HTML DOM节点概述

「爱情、让人受尽委屈。」 2024-04-19 09:29 123阅读 0赞

### 一，概述 ###

DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

DOM 标准被分为 3 个不同的部分：

1.  核心 DOM - 针对任何结构化文档的标准模型
2.  XML DOM - 针对 XML 文档的标准模型
3.  HTML DOM - 针对 HTML 文档的标准模型

### 二，DOM节点 ###

1.  整个文档是一个文档节点
2.  每个 HTML 元素是元素节点
3.  HTML 元素内的文本是文本节点
4.  每个 HTML 属性是属性节点
5.  注释是注释节点

### 三，节点的名称 ###

nodeName 是只读的

*  元素节点的 nodeName 与标签名相同
 *  属性节点的 nodeName 与属性名相同
 *  文本节点的 nodeName 始终是 \#text
 *  文档节点的 nodeName 始终是 \#document

（1）元素节点名称

//1,获得元素节点
        let h1 = document.getElementById('title');
        //2,获得节点的名字
        let nodeName = h1.nodeName;
        console.log(nodeName);

（2）属性节点名称

//1,获得元素节点
    var h1 = document.getElementById('title');
    //2,获得特性
    var oAttr = h1.attributes;
    
    h1.setAttribute('class', 'ccc');
    console.log(oAttr);

### 四，节点的类型 ###

nodeType 属性返回节点的类型

*  元素：1
 *  属性：2
 *  文本：3
 *  注释：8
 *  文档：9

//1,获得元素节点
    let h1 = document.getElementById('title');
    //2,获得节点类型
    let nodeType = h1.nodeType;
    console.log(nodeType);

### 五，文本节点 ###

//1,获得元素节点
    var h1 = document.getElementById('title');
    console.log(h1.childNodes);
    
    //2,获得节点的值
    var nodeValue = h1.childNodes[1].nodeValue;
    console.log(nodeValue);

发表评论取消回复

表情：

评论列表（有 0 条评论，123人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML DOM 节点元素操作

一，判断属性 hasAttribute(‘属性名’) ：判断是否有某个属性 //3,判断属性是否存在 console.log(h1.hasAttri...

悠悠/ 2024年04月19日 10:47/ 0 赞/ 122 阅读

相关 HTML DOM节点操作

一，节点内容 innerHTML设置节点内容 <body> <div id="div"> 节点内容 ...

绝地灬酷狼/ 2024年04月19日 09:35/ 0 赞/ 130 阅读

相关 HTML DOM根据关系找节点

一，根据关系找节点 1. 获得父节点：parentNode 2. 获得子节点：childNodes 3. 获得第一个节点：firstChild 4. 获得最后...

水深无声/ 2024年04月19日 09:35/ 0 赞/ 98 阅读

相关 HTML DOM节点选择器

一，id获得元素 <body> <div id="div"> id获得元素 </div> </...

港控/mmm°/ 2024年04月19日 09:34/ 0 赞/ 117 阅读

相关 HTML DOM节点概述

一，概述 DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。 DOM 标准被分为 3 个不同的部分： 1. 核心 DOM ...

「爱情、让人受尽委屈。」/ 2024年04月19日 09:29/ 0 赞/ 124 阅读

相关 html dom节点源码,HTML DOM children 属性

HTML DOM children 属性元素对象实例获取 body 元素的子元素集合： var c = document.body.children; 定义和用

Dear 丶/ 2022年10月09日 15:18/ 0 赞/ 279 阅读

相关 JavaScript HTML DOM 元素（节点）

JavaScript HTML DOM 元素（节点） -------------------- 添加和删除节点（HTML 元素）。创建新的 HTML 元素如

梦里梦外;/ 2022年09月29日 14:51/ 0 赞/ 404 阅读

相关 DOM（HTML中节点的获取）

<span style="color:ff0000">内容</span> 元素节点/文本节点/属性节点的nodeName/nodeValue/nodeT

悠悠/ 2022年06月06日 11:28/ 0 赞/ 318 阅读

相关 DOM动态添加HTML节点 appendChild、removeChild

1、函数语法 createElement(name)：方法可创建元素节点，此方法可返回一个 Element 对象。 appendChild(node)：方法在指定元素节点的

Bertha 。/ 2021年09月20日 05:34/ 0 赞/ 352 阅读

相关 JavaScript HTML DOM replaceChild替换子节点

目录说明语法： 1.用已有的节点去替换 2.用新创建的节点去替换 -------------------- replaceC

川长思鸟来/ 2021年07月24日 18:56/ 0 赞/ 506 阅读