—恢复内容开始—

  • 背景：由于最近在做笔试题的时候，发现很多用到了js的dom节点访问的功能，所以现在来做个总结；

    javascript

  1. getElementById:这个是根据id来选择的，也是平时用的最多的一个；
  2. getElementsByClassName: 这是根据class=”***”来选择的，如果一段html中有多个相同的class，那么选择元素节点也就很多个；
  3. querySelector():这个方法返回的是样式选择器的第一个元素节点。比如一段代码：在控制台打印出的text= <li  class=”li”>1</li>
    text1=        
     1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>元素</title>
 5 </head>
 6 <body>
 7     <ul>
 8         <li  class="li">1</li>
 9         <li  class="li">2</li>
10         <li  class="li">3</li>
11     </ul>
12     <script type="text/javascript">
13         //var text=document.getElementById('li').firstChild.nodeValue;
14         var text=document.querySelector('.li');
               var text1=document.querySelectorAll('.li')
    15         console.log(text)
               console.log(text1)
                 </script>
17 </body>
18 </html>

     

  4. getElementsByTagName:使用标签名称来选择；
  5. parentNode:比如一个元素的元素节点。比如如下代码：
  6. <!DOCTYPE html>
<html>
<head>
    <title>元素</title>
</head>
<body>
    <ul>
        <li id='1' class="lii">1</li>
        <li  class="lii">2</li>
        <li  class="lii">3</li>
    </ul>
    <script type="text/javascript">
        //var text=document.getElementById('li').firstChild.nodeValue;
        var text=document.getElementById('1').parentNode;
        console.log(text)
        var text1=document.getElementById('1').parentNode.nodeName;
        console.log(text1)
    </script>
</body>
</htm>

     

 

—恢复内容结束—

  • 背景：由于最近在做笔试题的时候，发现很多用到了js的dom节点访问的功能，所以现在来做个总结；

    javascript

  1. getElementById:这个是根据id来选择的，也是平时用的最多的一个；
  2. getElementsByClassName: 这是根据class=”***”来选择的，如果一段html中有多个相同的class，那么选择元素节点也就很多个；
  3. querySelector():这个方法返回的是样式选择器的第一个元素节点。比如一段代码：在控制台打印出的text= <li  class=”li”>1</li>
    text1=       

     1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>元素</title>
 5 </head>
 6 <body>
 7     <ul>
 8         <li  class="li">1</li>
 9         <li  class="li">2</li>
10         <li  class="li">3</li>
11     </ul>
12     <script type="text/javascript">
13         //var text=document.getElementById('li').firstChild.nodeValue;
14         var text=document.querySelector('.li');
               var text1=document.querySelectorAll('.li')
    15         console.log(text)
               console.log(text1)
                 </script>
17 </body>
18 </html>

     

  4. getElementsByTagName:使用标签名称来选择；
  5. parentNode:比如一个元素的元素节点。比如如下代码:其中text结果是，text1结果是

     

    <!DOCTYPE html>
<html>
<head>
    <title>元素</title>
</head>
<body>
    <ul>
        <li id='1' class="lii">1</li>
        <li  class="lii">2</li>
        <li  class="lii">3</li>
    </ul>
    <script type="text/javascript">
        //var text=document.getElementById('li').firstChild.nodeValue;
        var text=document.getElementById('1').parentNode;
        console.log(text)
        var text1=document.getElementById('1').parentNode.nodeName;
        console.log(text1)
    </script>
</body>
</html>

     

  6. previousSibiling/nextSibling: 返回结果是一个元素的前一个兄弟元素的节点/后一个兄弟元素的节点。代码如下：

    <!DOCTYPE html>
<html>
<head>
    <title>元素</title>
</head>
<body>
    <ul>
        <li id='a' class="lii">1</li>
        <li id="b" class="lii">2</li>
        <li  class="lii">3</li>
    </ul>
    <script type="text/javascript">
        //var text=document.getElementById('li').firstChild.nodeValue;
        var text=document.getElementById('b').previousSibling;
        console.log(text)
        
    </script>
</body>
</html>

    这段代码想着应该返回的是 <li id=’a’ class=”lii”>1</li>节点，可是在chrome中返回的是

     

    这个原因，我看网上说是由于把换行符当成了文本节点；为了获得正确的节点可以使用var text=document.getElementById(‘b’).previousSibling.previousSibling.

 

—恢复内容开始—

  • 背景：由于最近在做笔试题的时候，发现很多用到了js的dom节点访问的功能，所以现在来做个总结；

    javascript

  1. getElementById:这个是根据id来选择的，也是平时用的最多的一个；
  2. getElementsByClassName: 这是根据class=”***”来选择的，如果一段html中有多个相同的class，那么选择元素节点也就很多个；
  3. querySelector():这个方法返回的是样式选择器的第一个元素节点。比如一段代码：在控制台打印出的text= <li  class=”li”>1</li>
    text1=        
     1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>元素</title>
 5 </head>
 6 <body>
 7     <ul>
 8         <li  class="li">1</li>
 9         <li  class="li">2</li>
10         <li  class="li">3</li>
11     </ul>
12     <script type="text/javascript">
13         //var text=document.getElementById('li').firstChild.nodeValue;
14         var text=document.querySelector('.li');
               var text1=document.querySelectorAll('.li')
    15         console.log(text)
               console.log(text1)
                 </script>
17 </body>
18 </html>

     

  4. getElementsByTagName:使用标签名称来选择；
  5. parentNode:比如一个元素的元素节点。比如如下代码：
  6. <!DOCTYPE html>
<html>
<head>
    <title>元素</title>
</head>
<body>
    <ul>
        <li id='1' class="lii">1</li>
        <li  class="lii">2</li>
        <li  class="lii">3</li>
    </ul>
    <script type="text/javascript">
        //var text=document.getElementById('li').firstChild.nodeValue;
        var text=document.getElementById('1').parentNode;
        console.log(text)
        var text1=document.getElementById('1').parentNode.nodeName;
        console.log(text1)
    </script>
</body>
</htm>

     

 

—恢复内容结束—

  • 背景：由于最近在做笔试题的时候，发现很多用到了js的dom节点访问的功能，所以现在来做个总结；

    javascript

  1. getElementById:这个是根据id来选择的，也是平时用的最多的一个；
  2. getElementsByClassName: 这是根据class=”***”来选择的，如果一段html中有多个相同的class，那么选择元素节点也就很多个；
  3. querySelector():这个方法返回的是样式选择器的第一个元素节点。比如一段代码：在控制台打印出的text= <li  class=”li”>1</li>
    text1=       

     1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>元素</title>
 5 </head>
 6 <body>
 7     <ul>
 8         <li  class="li">1</li>
 9         <li  class="li">2</li>
10         <li  class="li">3</li>
11     </ul>
12     <script type="text/javascript">
13         //var text=document.getElementById('li').firstChild.nodeValue;
14         var text=document.querySelector('.li');
               var text1=document.querySelectorAll('.li')
    15         console.log(text)
               console.log(text1)
                 </script>
17 </body>
18 </html>

     

  4. getElementsByTagName:使用标签名称来选择；
  5. parentNode:比如一个元素的元素节点。比如如下代码:其中text结果是，text1结果是

     

    <!DOCTYPE html>
<html>
<head>
    <title>元素</title>
</head>
<body>
    <ul>
        <li id='1' class="lii">1</li>
        <li  class="lii">2</li>
        <li  class="lii">3</li>
    </ul>
    <script type="text/javascript">
        //var text=document.getElementById('li').firstChild.nodeValue;
        var text=document.getElementById('1').parentNode;
        console.log(text)
        var text1=document.getElementById('1').parentNode.nodeName;
        console.log(text1)
    </script>
</body>
</html>

     

  6. previousSibling/nextsibling(): 

 

版权声明：本文为xiaowanzi2016原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/xiaowanzi2016/p/9323996.html