JavaScript DOM浅析

eynoZzzzc

已于 2022-03-29 09:54:56 修改

阅读量995

点赞数

分类专栏： HTML+CSS+JavaScript 文章标签： javascript 前端

于 2022-03-28 21:14:24 首次发布

本文链接：https://blog.csdn.net/qq_44185558/article/details/123788456

版权

HTML+CSS+JavaScript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

一、DOM简介

DOM（Document Object Model）：文档对象模型，是HTML和XML文档的编程接口。定义了访问Javascript HTML文档的标准方法(是关于获取、修改、添加、删除HTML元素的标准)，它以树结构表达HTML文档。
在这里插入图片描述
由树结构可知，整个文档中所有的内容都可以看作节点：

整个文档是一个文档节点
每个HTML元素是一个元素节点
HTML元素内的文本是文本节点
每个HTML属性是属性节点
注释是注释节点

因此，JavaScript可以改变页面中所有的HTML元素、HTML属性、CSS样式，对所有事件做出反应。

查找HTML元素

通过id

var x = document.getElementById("xxx")

如果找到了该元素，则该方法以对象的形式返回该元素，存储到x中；如果未找到，x为null。

通过标签名

var x = document.getElementById("xxx")
var y = x.getElementsByTagName("p")

查找id=xxx元素中所有元素。

通过类名

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

二、DOM HTML

1、修改输出流

document.write()可以直接向HTML输出流写内容。

<script>
document.write(Date());
</script>

以上语句可以创建动态的日期到HTML输出流。
注意：不要在文档（DOM）加载完成后使用document.write()，会覆盖该文档！！！

2、修改HTML内容

使用innerHTML属性修改内容，语法如下：

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

等价于：

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

修改了对应id的元素内容。

实例：

<html>
<body>

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

<script>
document.getElementById("p1").innerHTML="新文本!";
</script>

</body>
</html>

使用HTML DOM获取id=p1的元素
Javascript利用innerHTML修改元素内容

注：innerHTML属性可用于获取或者改变任意HTML元素，包括<html>和<body>。

3、修改HTML属性

语法如下：

document.getElementById(id).某个属性= 新属性值

实例：

<html>
<body>

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

</body>
</html>

使用HTML DOM获取id=image的<img>元素
Javascript更改src属性值，从smiley.gif到landscape.jpg

三、DOM CSS

1、修改HTML样式

语法：

document.getElementById(id).style.属性=新样式

实例：

</head>
<body>
 
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p1").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>

</body>
</html>

获取id=p1的元素，修改对应样式的颜色为蓝色
获取id=p2的元素，修改对应样式的字体为"Arial"
获取id=p2的元素，修改对应样式的字体大小为"larger"

2、触发事件

当某些事件发生时执行代码，如：

用户点击鼠标
网页加载
鼠标移动
…

<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<h1 id="id1">我的标题 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
click here!</button>

</body>
</html>

当用户点击按钮时，获取id=id1的<h1>标签，修改其样式的颜色为红色。

四、DOM事件

1、事件属性

上一节我们浅谈到了事件，HTML中事件有：

当用户点击鼠标时
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户触发按键时
…
我们可以在事件发生时执行Javascript，例如刚才的实例可以写成函数调用形式：

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        function myFunction(){
           document.getElementById('id1').style.color='red'
        }
    </script>
</head>
<body>

<h1 id="id1">我的标题 1</h1>
<button type="button" onclick="myFunction()">
    click here!
</button>

</body>
</html>

以上实例向<button>元素分配onclick事件，当按钮被点击时，myFunction函数执行。

2、onload和onunload事件

onload和onunload事件属于window对象，在用户进入或者离开页面时触发，可用于处理cookie。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onload="checkCookies()">

<script>
function checkCookies(){
	if (navigator.cookieEnabled==true){
		alert("Cookies 可用")
	}
	else{
		alert("Cookies 不可用")
	}
}
</script>
	
</body>
</html>

会弹窗提示浏览器cookie是否可用。

3、onchange事件

该事件常常结合输入字段的验证，例如当用户完成输入，离开输入框时，触发函数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<head>
<script>
function myFunction(){
	var x=document.getElementById("fname");
	x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
输入你的名字: <input type="text" id="fname" onchange="myFunction()">

</body>
</html>

4、onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        function mOver(obj) {
            obj.innerHTML = "Thank You"
        }

        function mOut(obj) {
            obj.innerHTML = "Mouse Over Me"
        }
    </script>

    <style>
        #test {
            background-color: #D94A38;
            width: 120px;
            height: 20px;
            padding: 40px;
        }
    </style>
</head>
<body>

<div id="test" onmouseover="mOver(this)" onmouseout="mOut(this)">Mouse Over Me</div>

</body>
</html>

五、DOM事件监听

1、addEventListener() 方法

该方法用于向指定元素添加事件句柄，后添加的事件句柄不会覆盖已存在的事件句柄
可以向一个元素添加多个事件句柄
可以向一个元素添加多个同类型（或不同类型）的事件句柄，如：两个 “click” 事件
可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象
使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强，在没有控制HTML标记时也可以添加事件监听
语法：

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 “click” 或 “mousedown”)；
第二个参数是事件触发后调用的函数；
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
注意：不要使用onclick，使用click

以下实例向button元素添加点击事件，触发displayDate函数：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>

<button id="myBtn">click here</button>
<p id="demo"></p>
<script>
    document.getElementById("myBtn").addEventListener("click", displayDate);
    function displayDate() {
        document.getElementById("demo").innerHTML = Date();
    }
</script>

</body>
</html>

2、一个元素中添加多个句柄

addEventListener()方法允许向同一个元素添加多个事件，且不会覆盖已存在的事件，以下实例向同个按钮添加两个点击事件，调用两个函数，按顺序执行：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>

<button id="myBtn">click here</button>
<script>
    let x = document.getElementById("myBtn");
    x.addEventListener("click", myFunction);
    x.addEventListener("click", someOtherFunction);
    function myFunction() {
        alert ("Hello World!")
    }
    function someOtherFunction() {
        alert ("函数已执行!")
    }
</script>

</body>
</html>

或者也可以向同个元素添加不同类型的事件！

3、向window对象添加句柄

addEventListener()方法可以向任何 DOM 对象添加事件监听。以下实例当用户重置窗口大小时添加事件监听，触发resize事件句柄：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>

<p id="demo"></p>
<script>
    window.addEventListener("resize", function(){
        document.getElementById("demo").innerHTML = Math.random();
    });
</script>

</body>
</html>

4、事件冒泡和捕获

在元素嵌套结构中：
冒泡：内部元素的事件会先触发，然后再触发外部元素
捕获：外部元素的事件会先触发，然后再触发内部元素

addEventListener()方法第三个参数useCapture定义了事件传递的两种方式：冒泡和捕获。
默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            background-color: coral;
            border: 1px solid;
            padding: 50px;
        }
    </style>
</head>
<body>

<div id="myDiv1">
    <p id="myP1">点击段落，我是冒泡。</p>
</div><br>
<div id="myDiv2">
    <p id="myP2">点击段落，我是捕获。 </p>
</div>
<script>
    document.getElementById("myP1").addEventListener("click", function() {
        alert("你点击了 P1 元素!");
    }, false);
    document.getElementById("myDiv1").addEventListener("click", function() {
        alert(" 你点击了 DIV1 元素 !");
    }, false);
    document.getElementById("myP2").addEventListener("click", function() {
        alert("你点击了 P2 元素!");
    }, true);
    document.getElementById("myDiv2").addEventListener("click", function() {
        alert("你点击了 DIV2 元素 !");
    }, true);
</script>

</body>
</html>

建议自行敲一下，体会一下区别~~

5、removeEventListener() 方法

语法：

element.removeEventListener(event, function)

六、DOM元素（节点）

HTML 文档中的所有内容都是节点！

1、appendChild()

该方法在已存在的元素尾部添加新元素。

实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>

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

<script>
    let para = document.createElement("p");
    let node = document.createTextNode("这是一个新的段落。");
    para.appendChild(node);

    let element = document.getElementById("div1");
    element.appendChild(para);
</script>

</body>
</html>

首先创建一个元素和文本节点，并将文本节点加入到元素中
然后获取id=div1的元素，将加入到该元素中

2、insertBefore()

该方法将新元素添加到开始位置。

实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>

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

<script>
    let para = document.createElement("p");
    let node = document.createTextNode("这是一个新的段落。");
    para.appendChild(node);

    let element = document.getElementById("div1");
    let child = document.getElementById("p1");
    element.insertBefore(para, child);
</script>

</body>
</html>

首先创建一个元素和文本节点，并将文本节点加入到元素中
然后找到需要插入的位置，将新元素插入到其前。

3、removeChild()

该方法移除一个元素，但需要实现知道该元素的父元素。

实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>

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

<script>
    let parent = document.getElementById("div1");
    let child = document.getElementById("p1");
    parent.removeChild(child);
</script>

</body>
</html>

该实例移除id=p1的元素，需要找到它的父元素，即id=div1

如果已知要删除的子元素child，我们可以通过以下方法查找它的父元素，然后再删除这个子元素：

var child = document.getElementById("p1");
child.parentNode.removeChild(child);

4、replaceChild()

该方法实现元素的替换。

实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>

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

<script>
    let para = document.createElement("p");
    let node = document.createTextNode("这是一个新的段落。");
    para.appendChild(node);

    let parent = document.getElementById("div1");
    let child = document.getElementById("p1");
    parent.replaceChild(para, child);
</script>

</body>
</html>

首先创建一个元素和文本节点，并将文本节点加入到元素中
然后找到需要替换的元素及其父元素，替换新元素

七、HTMLCollection

HTMLCollection 是 HTML 元素的集合，HTMLCollection 对象类似一个包含 HTML 元素的数组列表。
getElementsByTagName()方法返回 HTMLCollection 对象。

var x = document.getElementsByTagName("p");

以上实例获取文档中所有的元素，返回一个HTMLCollection对象，集合中的元素可以通过索引下标访问（下标从0开始）。如访问x中的第三个元素：

var y = x[3];

length属性

定义了集合中元素的数量，常用于遍历集合中的元素。

//获取 <p> 元素的集合：
var myCollection = document.getElementsByTagName("p");
//显示集合元素个数
document.getElementById("demo").innerHTML = myCollection.length;

以下实例修改所有元素的背景颜色：

var myCollection = document.getElementsByTagName("p");
var i;
for (i = 0; i < myCollection.length; i++) {
    myCollection[i].style.backgroundColor = "red";
}

注意：HTMLCollection不是一个数组，无法使用数组的方法（如valueOf(),pop(),push(),join()），但是可以通过下标索引访问、获取元素。

八、DOM NodeList

NodeList 对象是一个从文档中获取的节点列表 (集合) 。
所有浏览器的 childNodes 属性返回的是 NodeList 对象。大部分浏览器的 querySelectorAll() 返回 NodeList 对象。

实例：

var myNodeList = document.querySelectorAll("p");

以上实例读取文档中所有的节点，可以通过索引访问（下标0开始）。
访问myNodeList第三个元素:

var y = myNodeList[3];

length属性

定义了节点列表中节点的数量。

var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = myNodelist.length;

HTMLCollection 与 NodeList 的异同

异：

NodeList可以包含任何节点类型，HTMLCollection只包含元素节点（elementNode），elementNode就是HTML中的标签；
HTMLCollection比NodeList多一项方法：namedItem，可以通过传递id或name属性来获取节点信息。

同：

都是类数组对象，都有length属性；
都有共同的方法：item，可以通过item(index)或者item(id)来访问返回结果中的元素；
都是实时变动的（live），document上的更改会反映到相关对象上（例外：document.querySelectorAll返回的NodeList不是实时的）。

eynoZzzzc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript DOM浅析

文章目录DOM简介查找HTML元素DOM HTML1、修改输出流2、修改HTML内容3、修改HTML属性DOM CSS1、修改HTML样式2、触发事件DOM事件1、事件属性2、onload和onunload事件3、onchange事件4、onmouseover 和 onmouseout 事件DOM事件监听1、addEventListener() 方法2、一个元素中添加多个句柄3、向window对象添加句柄4、事件冒泡和捕获5、removeEventListener() 方法DOM元素CollectionDO
复制链接

扫一扫