html dom操作

最新推荐文章于 2024-06-13 20:46:26 发布

德鲁兹

最新推荐文章于 2024-06-13 20:46:26 发布

阅读量217

点赞数

分类专栏： vue 文章标签： html

本文链接：https://blog.csdn.net/wjnjava/article/details/107899572

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

什么是 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 元素。

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

德鲁兹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html dom操作

什么是 DOM？DOM 定义了访问 HTML 和 XML 文档的标准什么是 XML DOM？XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。什么是 HTML DOM？HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。HTML DOM 节点<html> <head> <title>DOM 教程</title> </head> <body&gt
复制链接

扫一扫

专栏目录