7.js仔必背的DOM八股-CSDN博客

本文链接：https://blog.csdn.net/m0_58085188/article/details/136701181

1.什么是DOM

DOM：文档对象模型（Document Object Model）：讲页面所有的内容表示为可以修改的对象
浏览器会将我们编写的html，css进行渲染，同时它又要考虑我们可能通过js对其进行操作
- 于是浏览器将我们编写在HTML中的每一个元素（Element）抽象成一个个对象
- 所有这些对象都可以通过js进行访问，那么我们就可以通过js来操作页面
- 所以，我们将这个抽象过程称之为文档对象模型（Document O···bject Model）
将文档被抽象到documnet 对象中
- 比如document.documentElement 对应的是html元素
- 比如document.body 对应的是body元素
- 比如document.head 对应的是head元素

2.DOM Tree 的理解

在html结构中，最终会形成一个树结构；
在抽象DOM对象的时候，他们也会形成一个树结构，我们称之为DOM Tree

3.节点（node）之间的导航（实际开发不用）

如果我们获取到一个节点后，可以根据这个节点去获取其他的节点，我们称之为节点之间的导航
其中获取节点的导航是包括注释和文本的，获取元素的导航是不包括注释和文本的

如下图所示
- 父节点：parentNode
- 前兄弟节点：periousSibling
- 后兄弟节点：nextSibling
- 子节点：childNodes
- 第一个子节点：firstChild
- 第二个子节点：lastChild

//拿到以下所有的节点
<div class="box">
    <div>我是标题</div>
    <div class="container">我是div元素</div>
    <div class="desc">我是一个段落</div>
  </div>

以下是解答

    // 1.获取第一个节点
    var bodyEl = document.body;
    // 2.获取body的所有子节点
    var children = bodyEl.childNodes;
    console.log(children);
    // 3.获取 box 节点
    var boxE1  =  bodyEl.firstChild.nextSibling ;
    console.log(boxE1);
    // 4.查看box的所有子节点
    console.log(boxE1.childNodes);
    // 4.获取box的第一个子节点 h1
    var h1El = boxE1.firstChild.nextSibling;
    console.log(h1El);

4.元素（Element）之间的导航（开发常用）

如果我们获取一个元素（Element）后，可以根据这个元素去获取其他的元素，我们称之为元素之间的导航
如下图所示
- 父节点：parentElement
- 前兄弟节点：periousElementSilbing
- 后兄弟节点：nextElementSibling
- 子节点：children
- 第一个子节点：firstElementChild
- 第二个子节点：lastElementChild

   <div class="box">
    <div>我是标题</div>
    <div class="container">我是div元素</div>
    <div class="desc">我是一个段落</div>
  </div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>

  // 1. 获取body元素
    var bodyEl = document.body
    console.log(bodyEl.children);
  // 2.获取box元素
   var boxE1 = bodyEl.firstElementChild
   console.log(boxE1);
  //  2.获取ul元素
   var ulE1 = boxE1.nextElementSibling
   console.log(ulE1);
  //  3.获取li元素
  var liEls = ulE1.children
  console.log(liEls);

5.attribute是什么

一个元素有开始标签，结束标签，内容之外，还有很多属性（attribute）
浏览器在解析html元素的时候，会讲对应的attribute也创建出来放在对应的元素对象上
- 比如id、class就是全局的attribute，会有对应的id，class属性；
- 比如href属性是针对于a元素的，type、value属性是针对于input元素的；
标准的attribute：比如id、class、href、type、value等

非标准的attribute：自定义的那种，比如abc、age、height等

<div id="abc" class="box" title="box"
       age="18" height="1.88">
    我是box
  </div>

var boxEl = document.querySelector(".box")

    // 1.所有的attribute都支持的操作
    console.log(boxEl.hasAttribute("AGE"), boxEl.hasAttribute("abc"), boxEl.hasAttribute("id"))
    // true false true

    console.log(boxEl.getAttribute("AGE"), boxEl.getAttribute("abc"), boxEl.getAttribute("id"))
    // 18 null abc

    boxEl.setAttribute("id", "cba")
    //设置这个特性值
    
    boxEl.removeAttribute("id")
    // 移出这个特性值

    var boxAttributes = boxEl.attributes
    for (var attr of boxAttributes) {
      console.log(attr.name, attr.value)
    }
    // 遍历name属性 和 value属性

    // 2.通过getAttribute()一定是字符串类型
    var inputEl = document.querySelector("input")
    console.log(inputEl.getAttribute("checked"))

6.property是什么

对于标准的attribute，会在DOM对象上创建其对应的property属性
在大多数情况下，他们是相互作用的
- 改变propety，通过attribute获取的值也会随着改变
- 反之同理
大多数情况下，设置、获取attribute，推荐使用property的方式
- 这是因为他默认情况下是有类型的

7.元素的className和classList操作

元素的class attribute，对应的property并非叫class，而是i叫className
- 因为js早期是不允许使用class这种关键字来作为对象的属性，所以DOM规范使用了className；
- 虽然js已经没有这样的限制，但是不推荐，并且依然使用className这个名称；
- ```
 var boxEl = document.querySelector(".box")
    boxEl.className = "why abc"
    // 对className 赋值，他会替换整个类的字符串
```
但是如果添加或者移除单个class，可以使用classList属性
elem.classList 是一个特殊的对象：

 elem.classList.add (class) ：添加一个类

 elem.classList.remove(class)：添加/移除类。

 elem.classList.toggle(class) ：如果类不存在就添加类，存在就移除它。

 elem.classList.contains(class)：检查给定类，返回 true/false。
是可迭代对象，可以通过for of遍历

    // 需求: box在active之间切换
    var btnEl = document.querySelector(".btn")
    btnEl.onclick = function() {
      // if (boxEl.classList.contains("active")) {
      //   boxEl.classList.remove("active")
      // } else {
      //   boxEl.classList.add("active")
      // }
      boxEl.classList.toggle("active")
    }

8.在js中读取style的操作

可以用getComputedStyle 的全局函数来读取

 .box {
      font-size: 20px;
    }
    
    
 var boxEl = document.querySelector(".box")
 console.log(boxEl.style.backgroundColor)
    // console.log(boxEl.style.fontSize)

    console.log(getComputedStyle(boxEl).fontSize)

9.在js中创建元素操作

有很多方法，比如说innerHTML 但是他不好提取里面的元素

所以常用去创建一个DOM对象，然后创建一个元素，插入元素到DOM的某一个位置。

    // 2.真实创建一个DOM对象
    var h2El = document.createElement("h2")
    h2El.className = "title"
    h2El.classList.add("active")
    h2El.textContent = "我是标题"
    
      // 将元素插入boxEl
    // boxEl.append(h2El)
    // boxEl.prepend(h2El)
    // boxEl.after(h2El)
    // boxEl.before(h2El)
    // boxEl.replaceWith(h2El, "abc")

如上

1.先创建一个元素出来 h2E1
2.用className 为他写出来属性值
3.用classList 追加一个属性
4.用textContent 填写文本
5.插入boxE1 使用插入元素的方式

插入元素的方式如下：
- node.append(...nodes or strings) —— 在 node 末尾插入节点或字符串，
- node.prepend(...nodes or strings) —— 在 node 开头插入节点或字符串，
- node.before(...nodes or strings) —— 在 node 前面插入节点或字符串，
- node.after(...nodes or strings) —— 在 node 后面插入节点或字符串，
- node.replaceWith(...nodes or strings) —— 将 node 替换为给定的节点或字符串。
克隆和删除

 
  <button class="remove-btn">移除box</button>
  <button class="clone-btn">复制box</button>

  <div class="box">
    <h2>我是标题</h2>
    <p>我是文本, 哈哈哈哈哈</p>
  </div>

  <script>

    // 1.获取元素
    var boxEl = document.querySelector(".box")
    var removeBtnEl = document.querySelector(".remove-btn")
    var cloneBtnEl = document.querySelector(".clone-btn")

    // 2.监听removeBtn的点击
    removeBtnEl.onclick = function() {
      boxEl.remove()
    }

    // 3.复制box
    var counter = 0
    cloneBtnEl.onclick = function() {
      var newNode = boxEl.cloneNode(true)
      newNode.children[0].textContent = "我是标题" + counter
      // boxEl.after(newNode)
      document.body.append(newNode)

      counter++
    }

  </script>

10.两个小案例

1.动态创建列表

 <h1>动态创建列表</h1>
  <ul class="list"></ul>

  <script>
    // 1. 获取元素
    var list = document.querySelector('.list');

    // 2.获取prompt
    var isflag = true
    while(isflag){
      var message = prompt(`请输入内容`)
      if (!message){
        isflag = false
      }else{
        var li = document.createElement(`li`)
        li.textContent = message
        list.append(li)
      }
    }

2.动态显示时间案例

// 利用string中的一个 padStart(4,"0")方法进行格式化。4是个数，0是不满足在前补充的字符串
    function padLeft(content, count, padStr){
      count = count || 2
      padStr = padStr || "0"

      content = String(content)//转化字符串
      return content.padStart(count, padStr)
    }

    // 1.获取时间元素
    var timeEl = document.querySelector(".time")
    setInterval(function(){
      // 2.获取当前时间
    var date = new Date()
    var year = date.getFullYear()//getFullYear 该方法返回本地时间
    var month = padLeft(date.getMonth() )
    var day = padLeft(date.getDate())
    var hour = padLeft(date.getHours())
    var minute = padLeft(date.getMinutes())
    var second = padLeft(date.getSeconds())
    // 3.讲时间放在timeE1中
    timeEl.textContent = `${year}-${month}-${day} ${hour}:${minute}:${second}`

    }, 1000);