javascript怎么获取html文件的节点

方法：1、用“document.getElementById(“id属性值”)”语句；2、用“document.getElementsByTagName(“标签名字”)”语句；3、用“document.documentElement”语句。

本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

1. 通过document节点获取（直接获取）

案例：

• 一个
• 二个
• 三个
• 四个

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. 通过父级节点获取

（一般在已经获取父节点，通过父节点来获取子字节）

     
                  
             
一
                 
二
                 
三
                 
四
                 
五
             
                  
             这是第二个div         
                   
             这是第三个div         
     
 

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= docu活动：慈云数据爆款香港服务器，CTG+CN2高速带宽、快速稳定、平均延迟10+ms 速度快，免备案，每月仅需19元！！ 点击查看ment.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. 通过兄弟节点获取

     
         
这是第一个标签
         
这是第二个标签
        
这是第三个标签
     
 

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").nextSibling document.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 通过子节点获取父级节点

     
         
这是第二个标签
     
 

语法：

document.getElementById("id").parentNode


特点： 返回指定节点的父节点,如果指定节点没有父节点，则返回 null。

示例：

  var box=document.getElementById("box2").parentNode;   console.log(box);

【

本文来源网站：info110.com，若侵权，请联系删除。

《javascript怎么获取html文件的节点》来自互联网同行内容，若有侵权，请联系我们删除！