JavaScript对DOM总结

最新推荐文章于 2022-08-13 16:57:39 发布

前端小白QAQ

最新推荐文章于 2022-08-13 16:57:39 发布

阅读量144

点赞数

分类专栏： JavaScript专栏文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45932733/article/details/109464426

版权

JavaScript专栏专栏收录该内容

27 篇文章 2 订阅

订阅专栏

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树：

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

1.查找 HTML 元素

通过 id 查找 HTML 元素

var x=document.getElementById("intro");

通过标签名查找 HTML 元素

var x=getElementsByTagName("p");

通过类名找到 HTML 元素

var x=document.getElementsByClassName("intro");

2.改变HTML元素

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容，下面例子输出时间。

<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>

改变 HTML 内容
语法：document.getElementById(id).innerHTML=新的 HTML

<html>
<body>
<p id="p1">这个是要被修改的内容!</p>
<script>
document.getElementById("p1").innerHTML="这个是被修改后的内容!";
</script>
</body>
</html>

改变 HTML 属性
语法：document.getElementById(id).attribute=新属性值

<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>

改变 HTML 样式
语法：document.getElementById(id).style.property=新样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西河前端教程(axihe.com)</title>
</head>
<body>
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通过脚本修改。</p>
</body>
</html>

3.操作HTML元素即操作DOM(更多事件类型去MDN或者网上查找资料，这里不做过多总结)

如需向 HTML 元素分配事件，您可以使用事件属性。

<button onclick="displayDate()">点这里</button>
<script>
function displayDate () {
	console.log("我被点击了")
}
</script>

使用 HTML DOM 来分配事件

<button id=“myBtn”>点这里</button>
<script>
document.getElementById("myBtn").onclick=function(){ displayDate () };
function displayDate () {
	console.log("我被点击了")
}
</script>

使用addEventListener() 方法
语法：element.addEventListener(event, function, useCapture);
参数一：事件类型
参数二：执行的函数
参数三：可选布尔值，捕捉还是冒泡

addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。你可以向一个元素添加多个事件句柄。
你可以使用 removeEventListener() 方法来移除事件的监听。

element可以是任何元素包括window

element.addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}

removeEventListener() 方法
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄：
语法：element.removeEventListener("mousemove", myFunction);

4.文档中添加和移除元素

使用了 appendChild() 方法，它用于添加新元素到尾部。这个尾部是添加到目标元素的内部
如果我们需要将新元素添加到开始位置，可以使用 insertBefore() 方法，使用方法同appendChild()

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
1.创建 p 元素
var para = document.createElement("p");
2.为 p 元素创建一个新的文本节点
var node = document.createTextNode("这是一个新的段落。");
3.将文本节点添加到 p 元素中
para.appendChild(node);
4.查找已存在的元素
var element = document.getElementById("div1");
5.在id=“div1”元素中添加 p 元素
element.appendChild(para);
</script>

移除已存在的元素
要移除一个元素，你需要知道该元素的父元素

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
1.获取该元素父元素
var parent = document.getElementById("div1");
2.获取要移除的元素
var child = document.getElementById("p1");
3.移除元素
parent.removeChild(child);
</script>

替换 HTML 元素

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
1.创建一个元素
var para = document.createElement("p");
2.创建一个文本节点
var node = document.createTextNode("这是一个新的段落。");
3.把文本添加到p元素中
para.appendChild(node);
4.获取父元素
var parent = document.getElementById("div1");
5.获取要替换的元素
var child = document.getElementById("p1");
6。替换父元素的子元素
parent.replaceChild(para, child);
</script>