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

4、div元素的原型链

HTMLDivElement -> HTMLElement -> Element -> Node -> ...

通过元素节点对象获取其他节点的方法

element.childNodes 获取当前元素的子节点（会包含空白的子节点）

element.children 获取当前元素的子元素

element.firstElementChild 获取当前元素的第一个子元素

element.lastElementChild 获取当前元素的最后一个子元素

element.nextElementSibling 获取当前元素的下一个兄弟元素

element.previousElementSibling 获取当前元素的前一个兄弟元素

element.parentNode 获取当前元素的父节点

element.tagName 获取当前元素的标签名

 <body>
     <div id="box1">
         我是box1
         <span class="s1">我是s1</span>
         <span class="s1">我是s1</span>
     </div>
 
     <span class="s1">我是s1</span>
 
     <script>
             const box1 = document.getElementById('box1')
             const spans = box1.getElementsByTagName('span')
             const span2 = box1.getElementsByClassName('s1')
             const cns = box1.childNodes
             const children = box1.children
             console.log(children.length)//2,两个span标签
     </script>
 </body>

5、文本节点

在DOM中，网页中所有的文本内容都是文本节点对象, 可以通过元素来获取其中的文本节点对象，但是我们通常不会这么做

我们可以直接通过元素去修改其中的文本修改文本的三个属性

element.textContent

获取或修改元素中的文本内容

 - 获取的是标签中的内容，不会考虑css样式

element.innerText

获取或修改元素中的文本内容

innerText获取内容时，会考虑css样式
通过innerText去读取CSS样式，会触发网页的重排（计算CSS样式）
当字符串中有标签时，会自动对标签进行转义

  <li> --> <li>

element.innerHTML

获取或修改元素中的html代码

可以直接向元素中添加html代码
innerHTML插入内容时，有被xss注入的风险

 <body>
     <div id="box1">
         <span style="text-transform: uppercase;">我是box1</span>
     </div>
 
 
     <script>
         const box1 = document.getElementById('box1')
 
         const text = box1.firstChild
         console.log(text)
 
         // box1.innerText = "xxxx"
         // console.log(box1.textContent)
 
         // box1.textContent = "新的内容"
 
         /* box1.innerHTML = "<、script src='https://sss/sss.js'></script>" */
     </script>
 </body>

6、属性节点

属性节点（Attr）

在DOM也是一个对象，通常不需要获取对象而是直接通过元素即可完成对其的各种操作
如何操作属性节点 ?

方式一：

读取：元素.属性名（注意，class属性需要使用className来读取）

读取一个布尔值时，会返回true或false

修改：元素.属性名 = 属性值

方式二：

读取：元素.getAttribute(属性名)

修改：元素.setAttribute(属性名, 属性值)

删除：元素.removeAttribute(属性名)

 <body>
     <input class="a" type="text" name="username" id="admin">
 
     <script>
         // const input = document.getElementsByName('uesrname')
         const input = document.querySelector('[name=username]')
         console.log(input.type)
 
         console.log(input.getAttribute('type'))
 
         input.setAttribute('value','孙悟空')
         input.setAttribute('disable','disable')
     </script>
 </body>

【JavaScript】24_DOM编程：div的原型链