JS中的DOM

一、理解JS中的DOM1.DOM是文档对象模型：当网页被加载时，浏览器会创建页面的文档对象模型。2.通过 DOM，可访问 JavaScript HTML 文档的所有元素。3.DOM 模型被构造为对象的树：通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。JavaScript 能够改变页面中的所有 HTML 元素JavaScript 能够改变页面...

雾眠气泡水@

7466人浏览 · 2021-11-24 15:18:52

雾眠气泡水@ · 2021-11-24 15:18:52 发布

一、理解JS中的DOM

1.DOM是文档对象模型：当网页被加载时，浏览器会创建页面的文档对象模型。

2.通过 DOM，可访问 JavaScript HTML 文档的所有元素。

3.DOM 模型被构造为对象的树：通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素

JavaScript 能够改变页面中的所有 HTML 属性

JavaScript 能够改变页面中的所有 CSS 样式

JavaScript 能够对页面中的所有事件做出反应

二、JS中的DOM改变页面中内容的步骤：

1.获取HTML元素（三种方法）

1）根据id获取HTML元素：document.getElementById("id名")

2）根据标签名获取HTML元素：document.getElementsByTagName("标签名");

3）根据类名获取HTML元素：document.getElementsByClassName("类名");

2.改变HTML

1）改变页面中的 HTML 内容

document.getElementById(id).innerHTML=新的 HTML

例子：将文本“Hello World!”改为“新文本！”

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>改变HTML内容</title>
</head>
<body>

<p id="p1">Hello World!</p>

</body>
<script>

document.getElementById("p1").innerHTML="新文本!";

</script>
</html>

结果：

2）改变页面中的 HTML 属性

document.getElementById(id).attribute=新属性值

例子：将img的属性src改为“landscape.jpg”

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>改变HTML属性</title>
</head>
<body>

<img id="image" src="smiley.gif" width="160" height="120">

</body>
<script>

document.getElementById("image").src="landscape.jpg";

</script>
</html>

3）改变页面中的HTML 样式

document.getElementById(id).style.property=新样式

例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>改变HTML样式</title>
</head>
<body>

<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>

</body>
<script>

document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";

</script>
</html>

结果：

3.创建、删除、替换HTML元素

1）创建HTML元素

appendChild()：添加新元素到尾部。

insertBefore()：添加新元素到该元素之前。

appendChild()的例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>创建HTML节点</title>
</head>
<body>

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>

</body>
<script>

//创建一个p标签
var para = document.createElement("p");
//为p标签创建文本
var node = document.createTextNode("这是一个新的段落。");
//把创建的文本添加到创建的p标签中
para.appendChild(node);

//找到div1标签 
var element = document.getElementById("div1");
//把新建的p标签添加到div1中
element.appendChild(para);

</script>
</html>

insertBefore()的例子：

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);

//找到id为div1标签 
var element = document.getElementById("div1");
//找到id为p1标签
var child = document.getElementById("p1");
//将新建的元素添加到id为p1元素的之前
element.insertBefore(para, child);
</script>

2）删除HTML节点：removeChild()


<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

3）替换 HTML 元素：replaceChild()

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);

</script>