开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第25天，点击查看活动详情

1、初识

要使用DOM来操作网页，我们需要浏览器至少得先给我一个对象

才能去完成各种操作

所以浏览器已经为我们提供了一个document对象，它是一个全局变量可以直接使用

document代表的是整个的网页

 <body>
     <button id="btn">点我一下</button>
     <script>
         console.log(document)
         //获取btn对象
         const btn = document.getElementById('btn')
         console.log(btn)
         //修改btn中的文字
         btn.innerText = 'Click ME'
     </script>
 </body>

2、document对象

document对象

document对象表示的是整个网页

document对象的原型链

HTMLDocument -> Document -> Node -> EventTarget -> Object.prototype -> null

凡是在原型链上存在的对象的属性和方法都可以通过Document去调用

部分属性：

document.documentElement --> html根元素 document.head --> head元素 document.title --> title元素 document.body --> body元素 document.links --> 获取页面中所有的超链接 ...

 <body>
     <a href="#">hhh</a>
     <script>
         console.log(document.links)
     </script>
 </body>

3、元素节点

元素节点对象（element）

在网页中，每一个标签都是一个元素节点
如何获取元素节点对象？
1. 通过document对象来获取元素节点
2. 通过document对象来创建元素节点

通过document来获取已有的元素节点：

document.getElementById()

根据id获取一个元素节点对象

document.getElementsByClassName()

根据元素的class属性值获取一组元素节点对象
返回的是一个类数组对象
该方法返回的结果是一个实时更新的集合当网页中新添加元素时，集合也会实时的刷新

document.getElementsByTagName()

根据标签名获取一组元素节点对象
返回的结果是可以实时更新的集合
document.getElementsByTagName("*") 获取页面中所有的元素

document.getElementsByName()

根据name属性获取一组元素节点对象
返回一个实时更新的集合
主要用于表单项

document.querySelectorAll()

根据选择器去页面中查询元素
会返回一个类数组（不会实时更新）

document.querySelector()

根据选择器去页面中查询第一个符合条件的元素

创建一个元素节点

document.createElement()

根据标签名创建一个元素节点对象

 <body>
     <button id="btn">点我一下</button>
     <hr>
     <span class="s1">我是span</span>
     <span class="s1">我是span</span>
     <span class="s1">我是span</span>
     <span class="s1">我是span</span>
     <span class="s1">我是span</span>
 
     <div>我是div</div>
     <div>我是div</div>
     <div>我是div</div>
     <div>我是div</div>
     <div>我是div</div>
 
     <form>
         <input type="text" name="username">
 
         <input type="radio" name="gender" value="male"> 男
         <input type="radio" name="gender" value="female"> 女
     </form>
 
     <script>
             const btn = document.getElementById("btn")
 
             const spans = document.getElementsByClassName("s1")
 
             const divs = document.getElementsByTagName("div")
 
             const genderInput = document.getElementsByName("gender")
 
             const divs2 = document.querySelectorAll("div")
 
             const div = document.querySelector("div")
 
             const h2 = document.createElement("h2")
 
             console.log(spans)
 
             for(let i=0; i<spans.length; i++){
                 spans[i].innerText = "哈哈哈"+i
             }
     </script>
 </body>

【JavaScript】23_DOM编程初步与元素节点