Dom直接选择器

  1 <!DOCTYPE html>
  2 <!--Dom间接选择器-->
  3 <html lang="en">
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>Title</title>
  7     <style>
  8         .d1 {
  9             display: inline-block;
 10             width:   455px; /*一行4个*/
 11             margin: auto;
 12                      }
 13         .d2{
 14             width:254px;
 15             height:160px;
 16             padding:0px;
 17             margin:0px;
 18             border:1px solid;
 19             background-color:#aaa;
 20             word-wrap:break-word;
 21             }
 22         .d3 {
 23             display: inline-block;
 24             width:   310px; /*一行4个*/
 25             margin: auto;
 26                      }
 27     </style>
 28 </head>
 29 <body>
 30     <div class="d1">文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。
 31     它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。
 32     我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，
 33     而不是JavaScript语言规范里的规定的核心内容。</div>
 34     <div>查找元素</div>
 35     <div class="d1">
 36     1、----------------------直接查找-----------------------
 37         document.getElementById             根据ID获取一个标签
 38         document.getElementsByName          根据name属性获取标签集合
 39         document.getElementsByClassName     根据class属性获取标签集合
 40         document.getElementsByTagName       根据标签名获取标签集合
 41     </div>
 42     <div class="d2">
 43     2、-----------间接查找----------
 44         parentNode          // 父节点
 45         childNodes          // 所有子节点
 46         firstChild          // 第一个子节点
 47         lastChild           // 最后一个子节点
 48         nextSibling         // 下一个兄弟节点
 49         previousSibling     // 上一个兄弟节点
 50     </div>
 51     <div class="d3">
 52         parentElement           // 父节点标签元素
 53         children                // 所有子标签元素
 54         firstElementChild       // 第一个子标签元素
 55         lastElementChild        // 最后一个子标签元素
 56         nextElementtSibling     // 下一个兄弟标签元素
 57         previousElementSibling  // 上一个兄弟标签元素
 58     </div>
 59     <div class="d2">
 60         -----------class操作----------
 61         className                // 获取所有类名
 62         classList.remove(cls)    // 删除指定类
 63         classList.add(cls)       // 添加类
 64     </div>
 65     <br/>
 66     <br/>
 67     <br/>
 68     <div>  间接查找使用演示实例  </div>
 69     <br/>
 70     <br/>
 71     <br/>
 72     <div>
 73         <div></div>
 74         <div>
 75             c1
 76         </div>
 77     </div>
 78     <div>
 79         <div></div>
 80         <div id="i1">
 81             c2
 82         </div>
 83     </div>
 84     <div>
 85         <div></div>
 86         <div>
 87             c3
 88         </div>
 89     </div>
 90     <br/>
 91     <br/>
 92     <br/>
 93     <div>  间接查找使用演示结果    .innerHTML  是显示在网页，在审查元素中console不要加  </div>
 94     <br/>
 95     <div> 使用审查元素中console</div>
 96     <div> 根据ID获取一个标签 父节点标签元素  所有子标签元素   上一个兄弟标签元素 </div>
 97     <script>
 98         tag =document.getElementById("i1")
 99         tag.parentElement
100         tag.parentElement.children
101         tag.parentElement.previousElementSibling
102     </script>
103 </body>
104 </html>
Dom间接选择器