JavaScript DOM 获取任意元素 节点类型 节点名称属性

76433橘子
234 阅读4分钟

JavaScript DOM 获取任意元素 节点类型 节点名称属性

前端 JavaScript DOM 和 BOM 学习目录

1. 认识DOM 和 BOM

2. DOM 操作节点、DOM 操作元素节点

3. DOM 获取任意元素 、节点类型、节点名称属性

4. DOM attribute property style属性 className属性 classList属性 Data

5. DOM 创建元素 移除元素 克隆元素

6. DOM 元素操作 window窗口操作

7. DOM Event事件

8. DOM 常用API事件总结

9. BOM 操作

10. JSON数据操作

获取任意元素 - function

    1. getElementById : 就是实现的是我们的通过标签中的 id 属性实现获取得到元素节点
    2. getElementsByName: 就是实现的是通过 name 属性来实现获取我们的元素节点
    3. getElementsByTagName： 就是实现的是通过我们的标签名来实现获取元素节点
    4. getElementsByClassName： 就是实现的是通过我们的类名来实现获取元素节点
    5. querySelector： 就是实现的是我们的同元素的 CSS-Selector 来实现获取单个元素节点
    6. querySelectorAll 就是实现的是通过 CSS-Selector 来获取多个满足条件的元素节点

    熟练使用 1 4 5 6 即可， 5 和 6 当前使用得最多

  • <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <div class="container">
    <h2>我是标题</h2>
    <div class="box">
      <p>
        我是段落标签
      </p>
    </div>
    <div id="box">
      我是盒子
    </div>
  </div>
​
  <script>
    // 通过节点和元素之间的导航实现让我们的 h2 中的显示为红色
    document.body.children[0].children[0].style.color = "red"
​
    // 通过直接获取标签实现改变字体颜色为 天蓝色
    document.getElementsByTagName("h2")[0].style.color = "skyblue"
​
    // 使用我们得 querySelector
    console.dir(document.querySelector(".box"))
    document.querySelector(".box").style.backgroundColor = "red"
​
    // 使用我们得 querySelectorAll
    console.dir(document.querySelectorAll(".box"))  // 是一个伪数组
  </script>
</body>
</html>

    image-20241027160930296.png

节点类型 - nodeType

  • 我们的一个 HTML 文档中的节点类型含有:

    1. commentNodeType : 就是我们的注释节点
    2. textNodeType : 就是我们的文本节点
    3. elementNodeType : 就是我们的元素节点

    实现获取我们的节点类型的时候，我们使用的方法就是使用的是我们的 .nodeType 来实现获取的节点类型

    实现获取的时候，最终得到的节点就是返回的我们的 number

    NodeType文档阅读

  • 获取方式值描述desc
    Node.ELEMENT_NODE1获取的就是我们的 元素节点

    or

    Node.TEXT_NODE3就是实现获取的就是我们的一个 HTML 文档中的 文本内容
    Node.COMMENT_NODE8就是实现获取的是 HTML 文档中的 注释内容
    Node.DOCUMENT_NODE9获取的就是我们的 Document 节点
    Node.DOCUMENT_TYPE_NODE10实现获取的就是我们的 文档说明 <!DOCTYPE html>
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 我是注释 -->
  我是文本
  <div class="box">我是盒子</div>
​
​
  <script>
    var bodyChildNodes = document.body.childNodes
    console.log(bodyChildNodes)
    console.log("=======================")
​
    // 开始实现获取我们的每一个节点
    for(var item of bodyChildNodes) {
      console.log(item)
      // 实现获取我们的节点的类型： 文本节点  注释节点 元素节点
      console.log(item.nodeType)
    }
​
    console.log("========================")
​
    console.log(Node.ELEMENT_NODE)
    console.log(Node.TEXT_NODE)
    console.log(Node.COMMENT_NODE)
    console.log(Node.DOCUMENT_NODE)
    console.log(Node.DOCUMENT_TYPE_NODE)
  </script>
</body>
</html>

节点名称属性 - nodeName

  • nodeName 就是实现的是获取节点名称， tagName 就是实现的是获取标签名称，这个只是对元素节点有用
  • <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 我是注释 -->
  我是文本
  <div class="box">我是盒子</div>
​
​
  <script>
    var bodyChildNodes = document.body.childNodes
    
    // 为什么会多一个 #text 出来，是因为在文档中最开始的时候就出现了我们的 换行操作，这个也是我们的文本
    console.log(bodyChildNodes[0].nodeName)  // #text  Node.TEXT_NODE
    console.log(bodyChildNodes[1].nodeName)  // #comment  Node.COMMENT_NODE
    console.log(bodyChildNodes[2].nodeName)  // #text  Node.TEXT_NODE
    console.log(bodyChildNodes[3].nodeName)  // DIV  Node.ELEMENT_NODE
    console.log(bodyChildNodes[4].nodeName)  // #text  Node.TEXT_NODE
    
  </script>
</body>
</html>

节点内容属性 - innerHTML | innerText | nodeValue

  • 获取节点内容的三种方法:

    • innerHTML : 就是获取节点的中的元素节点以及文本节点，元素内容以及文本内容全部实现获取
    • innerText： 就是实现的是我们的获取一个节点中的文本节点，只是文本内容
    • **data（nodeValue） **: 针对非元素的节点实现获取数据

    注意，我们是可以通过这个方法来实现我们的赋值进行修改网页中原本的内容

    outerHTML 实现的不仅仅是获取节点内部的内容，还实现获取了节点本身

  • <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 我是注释 -->
  我是文本
  <div class="box">我是盒子</div>
​
  <script>
    var bodyChildNodes = document.body.childNodes
​
    console.log(bodyChildNodes[3].innerHTML)
    console.log(bodyChildNodes[3].innerText)
    console.log(bodyChildNodes[1].data)
    console.log(bodyChildNodes[1].nodeValue)
    console.log(bodyChildNodes[3].outerHTML)
  </script>
</body>
</html>

节点全局属性 - hidden

  • 使用我们的这个属性是可以实现设置我们的元素的显示模式的改变的

    设置为了为 hidden ，那么最终的呈现的效果就是元素以及内部的内容会在页面中消失

    其背后真真的实现的效果就是我们的改变元素的 CSS 属性: display: none;

  • <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="box">我是盒子</div>
  <button class="btn">控制盒子的显示</button>
​
  <script>
    // 先实现获取元素节点
    var divEl = document.querySelector(".box")
    var btnEL = document.querySelector(".btn")
​
    var i = 1
    // 然后对元素实现具体操作
    btnEL.onclick = function() {
​
      console.log(`我被点击了${i}次`)
      divEl.hidden ? divEl.hidden = false : divEl.hidden = true
      i++;
    }
  </script>
</body>
</html>
  • 实际上的话，上面的就是 vue 框架中的 v-for 底层代码的实现的一个简化的代码

拓展

现在的的框架开发前端实际上是不建议多操作 DOM

jquery框架: 设计的时候只是为了简化 DOM 的书写，但是没实质上的减少 对 DOM 的操作

vue框架： 设计的时候，就是为了减少开发人员对 DOM 操作

react库： 设计的时候，是通过的我们的虚拟DOM 来实现的减少 DOM 的使用的

但是最终的话，基本上所有的框架的底层的实现代码都还是在操作我们的 DOM 的，所以说，DOM对于我们后面的深入学习有帮助的

😄 😄 😄 😄

avatar
文章
阅读
粉丝