文档对象 DOM

查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

• 通过 id 找到 HTML 元素
• 通过标签名找到 HTML 元素
• 通过类名找到 HTML 元素

---

通过 id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。

本例查找 id="intro" 元素：

实例

var x=document.getElementById("intro");

如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。

如果未找到该元素，则 x 将包含 null。

 

1.2 DOM 节点
DOM节点 网页中所有内容都是节点（标签、属性、文本、注释等）

整个文档是一个文档节点
每个Html元素是一个元素节点
Html元素内的文本是文本节点
每个Html属性是属性节点
注释是注释节点
树中的所有节点均可以通过JS访问、修改

2. 获取元素
2.1 通过 id 获取
（1）语法格式： var 元素对象 = document . getElementById ( " id 属性名称 " )
（2）作用：通过页面中某个元素的 id 属性来获取这个元素对象
（3）返回值：这个方法执行后会有一个返回值，如果获取到则返回当前对象，否则返回 null
示例：

  

  <div id="time"></div>
    <script>
        var time = document.getElementByld('time');// id以字符串形式书写
        console.log(time);// <div id="time">
        console.log(typeof time);// object
        console.dir(time);// 可以打印返回的元素对象，更好地查看里面的属性和方法
    </script>

2.2 根据标签名获取
（1）语法格式： var 返回对象集 = document . getElementsByTagName ( ’ 标签名称 ’ )
（2）作用：根据指定的标称名称返回这些对象
示例：

   

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        var lis = document.getElementsByTagName('li');
        console.log(lis);// lis指所有的<li>
        console.log(lis[0]);// 返回第一个<li> 即2022
        for(var i=0;i<lis.length;i++){
            console.log(lis[i]);// 遍历所有的 <li>
        }
    </script>

除了可以使用 document 来引用这个方法外，还可以使用它父组对象来引用这个方法
指定父元素，获取其子元素 获取某个父元素内部指定标签名的子元素
注意：父元素必须是单个对象（必须指明是哪一个元素对象）获取的时候不包括父元素自己

    <ul id="time">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        var ul = document.getElementById('time');// 获取父级元素
        console.log(ul);
        lis = ul.getElementsByTagName('li'); // 通过父级元素来获取子元素 
        console.log(lis);
    </script>

2.3 根据name属性获取

（1）语法格式： var 元素对象集 = document . getElementsByName ( ’ name 属性名 ' )
（2）作用：根据 name 属性来获取元素对象的集合
示例：

 
    <p> <input type="checkbox" name="time" value="1">1
        <input type="checkbox" name="time" value="2">2
    </p>
    <script>
        var year = document.getElementsByName('time');
        console.log(year);
    </script>