html dom操作

最新推荐文章于 2025-03-07 07:15:37 发布

原创最新推荐文章于 2025-03-07 07:15:37 发布 · 279 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

vue 专栏收录该内容

5 篇文章

订阅专栏

什么是 DOM？

DOM 定义了访问 HTML 和 XML 文档的标准

什么是 XML DOM？

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

什么是 HTML DOM？

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

HTML DOM 节点

<html>
  <head>
    <title>DOM 教程</title>
  </head>
  <body>
    <h1>DOM 第一课</h1>
    <p>Hello world!</p>
  </body>
</html>

从上面的 HTML 中：

<html> 节点没有父节点；它是根节点
<head> 和 <body> 的父节点是 <html> 节点
文本节点 "Hello world!" 的父节点是 <p> 节点

并且：

<html> 节点拥有两个子节点：<head> 和 <body>
<head> 节点拥有一个子节点：<title> 节点
<title> 节点也拥有一个子节点：文本节点 "DOM 教程"
<h1> 和 <p> 节点是同胞节点，同时也是 <body> 的子节点

并且：

<head> 元素是 <html> 元素的首个子节点
<body> 元素是 <html> 元素的最后一个子节点
<h1> 元素是 <body> 元素的首个子节点
<p> 元素是 <body> 元素的最后一个子节点

HTML DOM常用方法

getElementById() 方法返回带有指定 ID 的元素

getAttribute() 返回指定的属性值

setAttribute() 把指定属性设置或修改为指定的值。

createAttribute() 创建属性节点。

appendChild(node) 插入新的子节点

appendChild() 把新的子节点添加到指定节点。

HTML DOM 属性

innerHTML 属性

例如：

<html>
<body>

<p id="intro">测试1</p>

<script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
</script>

</body>
</html>

getElementById 是一个方法，而 innerHTML 是属性。

innerHTML 属性可用于获取或改变任意 HTML 元素

访问 HTML 元素（节点）

访问 HTML 元素等同于访问节点

能够以下不同的方式来访问 HTML 元素：

通过使用 getElementById() 方法
通过使用 getElementsByTagName() 方法
通过使用 getElementsByClassName() 方法

1.getElementById() 方法

返回带有指定 ID 的元素：

document.getElementById("id");

2.getElementsByTagName() 方法

返回带有指定标签名的所有元素。

document.getElementsByTagName("p");

3.getElementsByClassName() 方法

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

document.getElementsByClassName("userName");

HTML DOM - 修改

改变 HTML 内容
改变 CSS 样式
改变 HTML 属性
创建新的 HTML 元素
删除已有的 HTML 元素

创建 HTML 内容

改变元素内容使用 innerHTML 属性。

document.getElementById("name").innerHTML="张三";

改变 HTML 样式

通过 HTML DOM获取对象

document.getElementById("name").style.color="red";

创建新的 HTML 元素

首先必须创建该元素（元素节点），然后把它追加到已有的元素上。

var para=document.createElement("p");
var node=document.createTextNode("new p");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);

HTML DOM - 元素

添加、删除和替换 HTML 元素。

appendChild(),:必须创建该元素，然后把它追加到已有的元素上

removeChild(); 删除 HTML 元素，必须清楚该元素的父元素

replaceChild() ; 替换HTML元素，必须清楚该元素的父元素

HTML DOM - 事件

onchange 事件

onclick事件

HTML DOM 允许使用 JavaScript 向 HTML 元素分配事件：

document.getElementById("btn").οnclick=function(){onlickName()};

在上面的例子中， onlickName的函数被分配给了 id=btn" 的 HTML 元素。

当按钮被点击时，将执行函数。