方法：1、用“document.getelementbyid(id属性值)”语句；2、用“document.getelementsbytagname(标签名字)”语句；3、用“document.documentelement”语句。
本教程操作环境：windows7系统、javascript1.8.5版、dell g3电脑。
1. 通过document节点获取（直接获取）案例：
<body> <ul > <li id="one">一个</li> <li name="name1" >二个</li> <li class="classname">三个</li> <li>四个</li> </ul></body>
1.1 通过id
语法：document.getelementbyid("id属性值")
特点：根据id值获取元素，返回元素对象；(id唯一)
示例：
var one=document.getelementbyid("one"); console.log(one);
1.2 通过标签名
语法：document.getelementsbytagname("标签名字")
特点：标签名字获取元素,返回来的是一个伪数组,里面保存了多个的dom对象；
示例：
var li=document.getelementsbytagname("li") console.log(li);
1.3 通过name值
语法：document.getelementsbyname("name属性的值")
特点：根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的dom对象
示例：
var name1=document.getelementsbyname("name1")[0]; console.log(name1);
1.4 通过class
语法：document.getelementsbyclassname("类样式的名字")
特点：据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的dom对象
示例：
var classname=document.getelementsbyclassname("classname")[0]; console.log(classname);//
1.5 通过选择器
语法：document.queryselector("选择器的名字")
特点：根据选择器获取元素,返回来的是一个元素对象；
示例：
var que1=document.queryselector("#one"); console.log(que1); //
1.6 通过所有选择器
语法： document.queryselectorall("选择器的名字")
特点：据选择器获取元素,返回来的是一个伪数组,里面保存了多个的dom对象；
示例：
var queall=document.queryselectorall("li"); console.log(queall); //
1.7 特殊元素获取
语法：doucumnet.body
特点：返回body元素对象
示例：
var body=document.body ; console.log(body);
1.8 html元素获取
语法：document.documentelement
特点：html元素对象
示例：
var dc=document.documentelement ; console.log(dc);
2. 通过父级节点获取（一般在已经获取父节点，通过父节点来获取子字节）
<body> <div id="digbox"> <!-- 第一个 --> <div id="box1"> <ul class="ul"> <li>一</li> <li>二</li> <li>三</li> <li>四</li> <li>五</li> </ul> </div> <!-- 第二个 --> <div id="box2"> <a href="#">这是第二个div</a> </div> <!-- 第三个 --> <div id="box3"> <a href="#">这是第三个div</a> </div> </div></body>
2.1 获取第一个节点
语法：
document.getelementbyid("test").firstelementchild;document.getelementbyid("test").firstchild;
特点：获取第一个节点
示例：
var box=document.getelementbyid("digbox").firstelementchild; console.log(box); var box1=document.getelementbyid("digbox").firstchild; console.log(box1);
2.2 获取最后一个子节点
语法：
document.getelementbyid("test").lastelementchild;；document.getelementbyid("test").lastchild;
特点：获取最后一个子节点
示例：
var box2= document.getelementbyid("digbox").lastelementchild; console.log(box2); var box3= document.getelementbyid("digbox").lastchild; console.log(box3);
2.3 获取所有子节点
语法：
document.getelementbyid("test").children[0];document.getelementbyid("test").childnodes;document.getelementbyid("test").childelementcount;
特点：获取所有子节点
示例：
var box4= document.getelementbyid("digbox").children[0]; console.log(box4); var box5= document.getelementbyid("digbox").childnodes; console.log(box5); var box6= document.getelementbyid("digbox").childelementcount; console.log(box6);
2.4 获取直接子节点
语法：document.getelementbyid("id")
特点：获取直接子节点
示例：
var box7= document.getelementbyid("digbox"); console.log(box7);
2.5 获取对应属性的节点
语法：document.getelementbyid("id").getelementsbyclassname("ul")；
特点： 获取对应属性的节点(可以是id，class，属性，标签)常用；
示例：
var box8= document.getelementbyid("digbox").getelementsbyclassname("ul"); console.log(box8);
3. 通过兄弟节点获取<body> <div id="box"> <p>这是第一个标签</p> <p id="box2">这是第二个标签</p> <div ><a href="">这是第三个标签</a></div> </div></body>
3.1 获取当前节点的前一个节点
语法：
document.getelementbyid("id").previouselementsibling；document.getelementbyid("id").previoussibling
特点： 返回指定节点的前一个节点，如果没有 previoussibling 节点，则返回值为 null。
示例：
var box1=document.getelementbyid("box2").previouselementsibling; console.log(box1); var box2=document.getelementbyid("box2").previoussibling; console.log(box2);
3.2 获取当前节点的后一个节点
语法：
document.getelementbyid("id").nextsiblingdocument.getelementbyid("id").nextelementsibling；
特点： 返回指定节点之后紧跟的节点，如果没有 nextsibling 节点，则返回值为 null。
示例：
var box3=document.getelementbyid("box2").nextelementsibling; console.log(box3); var box4=document.getelementbyid("box2").nextsibling; console.log(box4);
4. 通过子级节点获取4.1 通过子节点获取父级节点
<body> <div id="box"> <p id="box2">这是第二个标签</p> </div></body>
语法：document.getelementbyid("id").parentnode
特点： 返回指定节点的父节点,如果指定节点没有父节点，则返回 null。
示例：
var box=document.getelementbyid("box2").parentnode; console.log(box);
【相关推荐：javascript学习教程】
以上就是javascript怎么获取html文件的节点的详细内容。