WebAPI-获取DOM节点的节点名称、节点类型值、节点值

你的名字 2023-06-13 08:59 68阅读 0赞

#### DOM ####

DOM 就是 文档对象模型，是 Document Object Model 的简称；是 W3C 国际标准化组织 制定的一套处理 HTML 和 XML 文档的规范，所有的浏览器都遵循了这套标准

W3C 组织定义了一系列的 DOM 接口，通过这些 DOM 接口就可以修改网页的内容、结构和样式。

#### DOM 节点 ####

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

*  整个文档是一个文档节点
 *  每个 HTML 元素属于元素节点
 *  HTML 元素中的文本属于文本节点
 *  每个 HTML 属性是属性节点
 *  每段注释属于注释节点

节点的类型值：

*  `1` 元素节点
 *  `2`属性节点
 *  `3` 文本（文字、空格、换行）节点
 *  `8` 注释节点
 *  `9` doucment 文档节点

##### 获取节点的类型值 #####

通过 `nodeType` 属性可获取指定节点对象的类型值

语法：

> node.nodeType

*  `node` DOM节点

##### 获取节点的名称 #####

通过 `nodeName` 属性可获取指定节点的节点名称

*  如果节点属于元素节点，则 nodeName 属性返回标签名
 *  如果节点是属性节点，则 nodeName 属性返回属性的名称
 *  对于其他节点类型，nodeName 属性返回不同节点类型的不同名称。

语法：

> node.nodeName

#### 获取节点的值 ####

通过 `nodeValue` 属性可根据节点的类型设置或返回节点的值

获取节点值：

> node.nodeValue

设置节点值：

> node .nodeValue = value

*  `value` 用于替换节点原内容的值

**注意**：如果将 nodeValue 应用在元素节点上，返回的结果为 null

示例：

<button>按钮</button>
    <div class="box">
      
      <h3>h3标签</h3>
    </div>
    
    <script type="text/javascript"> function $(selector) { return document.querySelector(selector) } $('button').onclick = function() { // 获取指定元素中的所有子节点 var els = $('.box').childNodes // 遍历每个子节点 for (var i = 0; i < els.length; i++) { // 输出节点和节点类型值 console.log('节点名称->', els[i].nodeName,'节点类型值->', els[i].nodeType, '节点值->', els[i].nodeValue) } // 打印文档节点和文档节点的类型值 console.log('节点名称->', document.nodeName, '节点类型值->', document.nodeType, '节点值->', document.nodeValue) } </script>

![在这里插入图片描述][20191115155128711.gif]

[20191115155128711.gif]: https://img-blog.csdnimg.cn/20191115155128711.gif