HTML DOM基础知识

最新推荐文章于 2024-06-29 11:58:27 发布

iron_Le

最新推荐文章于 2024-06-29 11:58:27 发布

阅读量217

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/iron_max/article/details/108363145

版权

HTML DOM

定义了所有HTML元素的对象和属性，以及访问他们的方法，也就是关于如何获取，修改，添加，删除HTML元素的标准

DOM节点

HTML文档中所有内容都是节点：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

节点树

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

节点父，子和同胞

节点树中的节点彼此拥有层级关系。

父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子
同胞是拥有相同父节点的节点

DOM方法

方法是可以在节点上执行的动作

###　编程接口

HTML DOM对象-方法和属性

一些常用的 HTML DOM 方法：

getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：

innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点

DOM属性

innerHTML属性：

获取或替换HTML元素内容

<!DOCTYPE html>
<html>
    <body>
        <p id='intro'>
            hello world!
        </p>
        <script>
            var txt = document.getElementById("intro").innerHTML;
            document.write(txt);
        </script>
    </body>
</html>

nodeName属性：规定节点的名称

nodeName只读

元素节点与属性节点的nodeName分别与其标签名相同

文本节点nodeName为#text

文档节点nodeName为#document

nodeValue属性：规定节点的值

元素节点nodeValue为undefined或null

文本节点为文本本身，属性节点为属性值

nodeType属性：返回节点类型

DOM访问

访问HTML元素

getElementById() 返回带有指定id的元素

document.getElementById("intro")

getElementsByTagName() 返回带有指定标签的名的所有元素

document.getElementsByTagName("div")

返回包含文档中所有

元素列表中id="intro"的元素后代

document.getElementById("intro").getElementsByTagName("p")

getElementsByClassName() 查找带有相同类名的所有HTML元素

document.getElementsByClassName("intro")

DOM修改

修改HTML元素

创建HTML内容 document.getElementById("intro").innerHTML="hello world"

改变HTML样式 document.getElementById("intro").style.color=""

创建新的HTML元素

appendChild() / insertBefore()

<!DOCTYPE html>
<html>
<body>

最低0.47元/天解锁文章

iron_Le

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML DOM基础知识

HTML DOM定义了所有HTML元素的对象和属性，以及访问他们的方法，也就是关于如何获取，修改，添加，删除HTML元素的标准DOM节点HTML文档中所有内容都是节点：整个文档是一个文档节点每个 HTML 元素是元素节点HTML 元素内的文本是文本节点每个 HTML 属性是属性节点注释是注释节点节点树通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。节点父，子和同胞节点树中的节点彼此拥有层
复制链接

扫一扫