定位 找到那个DOM

一.查找HTML元素的方法

为了操作DOM中的元素，你必须选择该特定元素，你可以使用以下document.querySelector从页面中选择节点

1.1 querySelector--从页面中选择单个节点

document.querySelector("CSS 选择器");

querySelector方法需要一个CSS选择器，用来从HTML中找到满足你要求的元素

如果你有多个项目满足您指定的CSS选择器，则只返回第一个满足条件的元素

        <p>返回满足条件的第一个元素</p>
        
    <script>
    
      const p=document.querySelector("p");
      console.log(p);

1.2 querySelectorAll()--返回满足条件的所有元素

        <p>返回满足条件的所有元素</p>

    <script>

      const p=document.querySelectorAll("p");
      console.log(p);

1.3 getElementById()

<p id="calssp">返回满足条件的元素</p>

<script>
const elep=document.getElementById("calssp");
console.log(elep);

 

 

如果没有元素满足条件，则返回

 

 

 

1.4 getElementsByClassName()

        <ul class="classul">
          <li>The</li>
          <li>test</li>
        </ul>
        <ul class="classul">
          <li>has</li>
          <li>passed</li>
        </ul>
    <script>
    
    const elid=document.getElementsByClassName("classul");
    console.log(elid);

1.5 getElementsByTagName()

        <ul class="classul">
          <li>The</li>
          <li>test</li>
        </ul>
        <ul >
          <li>has</li>
          <li>passed</li>
        </ul>
    <script>
    
    const elid=document.getElementsByTagName("li");
    console.log(elid);

二、CSS选择器

2.1 标记选择器

标记名称

<form>This is a form</form>
<script>
  const form = document.querySelector("form");
</script>

2.2 ID选择器

<div id="sidebar">id选择器需要在名字前加一个#</div>
        <script>
          const elem = document.querySelector("#sidebar");
          console.log(elem)
        </script>

2.3 类选择器

        <div class="active">类选择器前面需要加点号</div>
        <script>
          const elem = document.querySelector(".active");
          console.log(elem);
        </script>

 

 

 

 

2.4 后代选择器

        <ul>
          <li>具体项目</li>
        </ul>
        <script>
          const elem = document.querySelectorAll("ul li");
          console.log(elem);
        </script>

  2.5 属性选择器

<input type="text" placeholder="Your name here" disabled />
        <script>
          const elem=document.querySelector("[disabled]");
          console.log(elem);
        </script>

元素选择器	h1,p	选择所有的h1和p元素
ID选择器	#idname	选择id="idname"的元素
类选择器	.classname	选择class=“classname"的所有元素
后代选择器	div p	选择div元素内的所有p元素
属性选择器	title	选择所有属性里表明有title的所有元素
子选择器	div>p	选择父元素是div的所有p元素
相邻兄弟选择器	div+p	选择所有紧邻div元素之后的每个p元素
通用兄弟选择器	p~ul	选择前面有p元素的每个ul元素

 

三、节点列表（nodeList）与集合

使用querySelector返回的是节点列表，这是一个DOM元素的集合，包含一个或多个DOM元素的变量。该列表对象类似于数组，但它不是一个数组

将节点列表转化为对象

NodeList是类数组，只支持.length .forEach().但是出于某种原因你想使用.map()和 .filter呢？为了做到这一点，您必须将NodeList转化为一个数组。

使用数组展开语法，将NodeList转化为一个数组，该语法将NodeList的每一项展开为一个新数组

const divs = document.querySelectorAll("div"); // NodeList
const items = [...divs]; // Array

还有一种方法是可以使用Array.from（）将节点集合转换为数组

const divs = document.querySelectorAll("div"); // NodeList
Array.from(document.body.divs); // Array

集合

使用getElementsByTagName或getElementsByClassName得到的是一个元素集合

    <div id="contents">
            <ul class="list">
                <li class="listi">待办事项清单</li>
                <li class="listi">愿望清单</li>
            </ul>
        </div>
        <script type="text/javascript">
              let divs = document.getElementsByTagName('div');
              console.log(divs.length);//1
        </script>
        
        <div>Second div</div>
        
        <script>
            console.log(divs.length);//2

 

<div id="contents">
            <ul class="list">
                <li class="listi">待办事项清单</li>
                <li class="listi">愿望清单</li>
            </ul>
        </div>
        
        <script type="text/javascript">
              let divs = document.querySelectorAll('div');
              console.log(divs.length);
        </script>
        
        <div>Second div</div>
        
        <script>
            console.log(divs.length);

四、遍历DOM树

将学习遍历DOM。如，如何达到父元素以及如何找到与某个选择器匹配的“最近”父元素

寻找父节点

4.1 elem.matches(css)

不会查找任何内容，它只会检查elem是否与给定的CSS选择器匹配。返回false或true

当我们遍历元素（例如数组或其他内容）并试图过滤那些我们感兴趣的元素时，这个方法会很有用

<a href="http://example.com/file.zip">...</a>
<a href="http://ya.ru">...</a>

<script>
  // 不一定是 document.body.children，还可以是任何集合
  for (let elem of document.body.children) {
    if (elem.matches('a[href$="zip"]')) {
      alert("The archive reference: " + elem.href );
    }
  }
</script>

4.2 element.parentElement--返回当前元素的父元素

        <div id="contents">
            <ul class="list">
                <li class="listi">待办事项清单</li>
                <li class="listi">愿望清单</li>
            </ul>
        </div>
        <script>
            let listi=document.querySelector(".listi");
            parentEle=listi.parentElement;
            console.log(parentEle);

4.3 element.closets("CSS选择器")

元素的祖先是：父级，父级的父级，它的父级等。祖先们一起组成了元素到顶端的父级链，elem.closest(css)方法会查找与css选择器匹配最近的祖先，elem也会被搜索

检查每个父级，如果他与选择器匹配，则停止所有并返回该祖先

        <div id="contents">
            <ul class="list">
                <li class="listi">待办事项清单</li>
                <li class="listi">愿望清单</li>
            </ul>
        </div>
        <script>
            let listi=document.querySelector(".listi");
            console.log(listi.closest(".list"));//listi 的祖先ul
            console.log(listi.closest("#contents"));//div
            console.log(listi.closest("h1"));//null h1不是listi的祖先