目录
一、什么是DOM
1.DOM是文档对象模型，当网页被加载时，浏览器会创建页面的文档对象模型；
2.通过DOM，可以访问JavaScript HTML的所有元素；
3.DOM模型被构造为对象的树通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的HTML。
4.JavaScript能够改变页面中所有的HTML元素、HTML属性、css样式、且能够对页面中所有的事件作出反应。
二、JS中的DOM改变页面中内容的步骤
1.获取HTML元素(三种方法)
(1)根据id获取HTML元素:document.getElementById(“id名”)；
(2)根据标签名获取HTML元素:document.getElementByTagName(“标签名”);
(3)根据类名获取HTML元素:document.getElementByClassName(“类名”);
2.改变HTML
(1)改变页面中的HTML内容
document.getElementById(“id”).innerHTML = “新的HTML”;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通过innerHTML改变HTML内容</title>
</head>
<body>
<p id="p1">大家好!</p>
</body>
<script>
document.getElementById("p1").innerHTML = "Hello,everyone!";
</script>
</html>运行结果为:Hello,everyone!
(2)改变页面中的HTML属性
document.getElementById(id).attribute = 新属性值;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>改变HTML属性</title>
</head>
<body>
<img id="image" src="images/pic1.jpg">
</body>
<script>
document.getElementById("image").src="images/pic2.jpg";
</script>
</html>运行结果pic2.jpg
(3)改变页面中的HTML样式
document.getElementById(id).style.property = 新样式;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>改变HTML样式</title>
</head>
<body>
<p id="p1">大家好</p>
<p id="p2">大家好</p>
</body>
<script>
document.getElementById("p2").style.color = "blue";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "30px";
</script>
</html>运行结果:
3.创建、删除、替换HTML元素
(1)创建HTML元素
appendChild():添加新元素到结尾；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>appendChild()创建元素</title>
</head>
<body>
<div id="div">
<p id="p1">熊大</p>
<p id="p2">熊二</p>
</div>
</body>
<script>
var ps = document.createElement("p");
var node = document.createTextNode("光头强");
ps.appendChild(node);
var element = document.getElementById("div");
element.appendChild(ps);
</script>
</html>运行结果:
insertBefore():添加新元素到开头。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>创建HTML节点</title>
</head>
<body>
<div id="div">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
var ps = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
ps.appendChild(node);
var element = document.getElementById("div");
var child = document.getElementById("ps");
element.insertBefore(ps, child);
</script>
</body>
</html>
运行结果:
(2)删除HTML节点
removeChild()
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="div">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
var parent = document.getElementById("div");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>
</body>
</html>
(3)替换HTML元素
replaceChild()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>replaceChild替换HTML元素</title>
</head>
<div id="div">
<p id="p1">段落一</p>
<p id="p2">段落二</p>
</div>
<script>
var ps = document.createElement("p");
var node = document.createTextNode("这是新段落");
ps.appendChild(node);
var parent = document.getElementById("div");
var child = document.getElementById("p1");
parent.replaceChild(ps, child);
</script>
</body>
</html>运行结果:
当创建了一个网页并把它加载到web浏览器中时，DOM就悄然而生。浏览器根据网页文档创建一个文档对象。浏览器为我们提供了当前网页的模型，可通过javascript去读写它。所以DOM(Document Object Model)，文档对象模型，可以简单理解为代表网页文档的一颗树（模型）。需要同学们多多的去理解和使用它。