Html-DOM简单介绍

最新推荐文章于 2023-03-05 09:05:20 发布

搏·梦

最新推荐文章于 2023-03-05 09:05:20 发布

阅读量712

点赞数 1

文章标签： javascript dom html

本文链接：https://blog.csdn.net/xueyijin/article/details/105443662

版权

文章目录

1. DOM是什么
2. DOM节点
3. DOM相关方法与属性
4. 相应的例子
5. 其他注意事项
6. 学习资源

1. DOM是什么

DOM是Document Object Model(文档对象模型)的缩写。W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

2. DOM节点

在 HTML DOM 中，所有事物都是节点。比如：整个文档是一个文档节点，每个HTML元素是元素节点，HTML元素内的文本时文本节点，每个HTML属性时属性节点，注释是注释节点等等。

有了节点，我们可以把节点以树结构方式连接起来，形成节点树(如下图)。
在这里插入图片描述

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

节点树中拥有以下关系，父节点，子节点，同胞(兄弟或姐妹)。父节点有子节点，同级的子节点被称为同胞(兄弟或姐妹)。请看下面例子：

<html>
 <head>
  <title>你好，世界</title>
 </head>
 <body>
  <h1>Hello，world</h1>
  <p>今天，你好</p>
 </body>
 </html>

在上面的例子中：
<html>节点是根节点
<head>节点和<body>节点的父节点是<html>
<h1>节点和<p>节点是同胞节点

3. DOM相关方法与属性

方法	描述
getElementByid()	返回带有指定ID的元素
getElementByTagName()	返回包含带有指定标签名称的所有元素节点集合
getElementByClassName()	返回包含带有指定类名的所有元素节点集合
appendChild()	把新子节点添加到指定节点
removeChild()	删除子节点
replaceChild()	替换子节点
createAttribute()	创建属性节点
createElement()	创建元素节点
createTextNode()	创建文本节点
getAttibute()	返回指定的属性值
setAttribute()	把指定属性设置为指定的指

属性	描述
innerHTML	节点的文本值
parentNode	节点的父节点
childNodes	节点的子节点
attributes	节点的属性节点
nodeName	节点的名称，nodeName 是只读的，元素节点的 nodeName 与标签名相同，属性节点的 nodeName 与属性名相同，文本节点的 nodeName 始终是 #text，文档节点的 nodeName 始终是 #document
nodeValue	节点的值，元素节点的 nodeValue 是 undefined 或 null，文本节点的 nodeValue 是文本本身，属性节点的 nodeValue 是属性值

4. 相应的例子

<p id="p1>Hello world!</p>
<script type="text/javascript">
x=document.getElementById("p1");
document.write(x.firstChild.nodeValue);
</script>
输出：Hello world!
     Hello world!

<p id="p2">Hello world</p>
<script>
document.getElementById("p2").style.color ="blue";
</script>
输出：hello wolrd(蓝色字体)

比较重要的就是会创建元素，以及删除元素即可。

<div id="div1">
 <p id="p1">This is p1</p>
 <p id="p2">This is p2</p>
 </div>
 <script>
 //创建一个新的<p>元素
 var para = document,createElement("p");
 //创建一个文本节点
 var node = document,createTextNode("this is p3“);
 //向<p>元素追加文本节点
 para.appendChild(node);
 //获取id=div1的元素
 var parent = document.getElementById("div1");
 //向div1追加新的<p>元素
 parent.appendChild(para);

<div id="div1">
 <p id="p1">This is p1</p>
 <p id="p2">This is p2</p>
 </div>
 <script>
 var parent = document.getElementById("div1");
 var child = document.getElementById("p1");
 //从父元素删除子元素
 parent.removeChild(child);

5. 其他注意事项

在使用getElementByClassName()的时候，需要注意，它返回的是一个数组，因此代码中需要有索引号，不然会发生下面的结果:

<div class="div1"> 
  </div>
  <button onclick="test()">点我</button>
  <script type="text/javascript">
   function test(){
    var para = document.createElement("p");
    var node = document.createTextNode("This is new ");
    para.appendChild(node);
    var parent = document.getElementsByClassName("div1");
    parent.appendChild(para); //这里是错的，错的，错的，
   }
  </script>

在这里插入图片描述
appendChild居然不是一个函数，这怎么可能，是因为你没有指定对象。上面代码中parent.appendChild(para)是错误的，应该改成parent[0].appendChild(para）就可以了，我们在运行一次。

6. 学习资源

如果还想深度学习相关的Dom知识点，可以参考下面：

https://www.w3school.com.cn/htmldom/index.asp

搏·梦

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Html-DOM简单介绍

文章目录1. DOM是什么2. DOM节点1. DOM是什么DOM是Document Object Model(文档对象模型)的缩写。W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
复制链接

扫一扫