JS DOM 基础操作

Pupper2023-02-202024-10-30

一、 DOM

 web API 是浏览器 提供的一套操作 浏览器功能（BOM）和 页面元素（DOM）的 API。

 DOM：处理 HTML 的标准 编程接口

1. 获取元素

通过 document 查找元素，是查找整个页面所有的元素；
通过 标签元素查找，是查找的该标签元素下的 子元素；

id 获取元素（ `getElementById()` ）

获取的元素的返回值是一个对象；
console.dir(元素对象) ：可以查看元素的属性和方法；
如果没有找到元素，则返回 null；

<div id="time"></div>

<script type="text/javascript">
    var el = document.getElementById('time')
    console.log(el)
</script>

标签名获取元素（ `getElementsByTagName()` ）

getElementsByTagName() : 返回一个元素 对象合集，以伪数组的形式存储；
如果没有找到元素，则返回一个 空数组

获取页面所有的 li 标签元素：

<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

<script type="text/javascript">
    var el = document.getElementsByTagName('li')
    console.log(el)		// [li, li, li, li, li]
</script>

获取父元素中指定标签名的子元素：

父元素必须是单个对象（必须指明是哪一个元素对象）；
获取的元素不包括父元素自己；

<ol>
	<li>这是 ol 中的 li 元素</li>
	<li>这是 ol 中的 li 元素</li>
	<li>这是 ol 中的 li 元素</li>
	<li>这是 ol 中的 li 元素</li>
	<li>这是 ol 中的 li 元素</li>
</ol>
<ul>
	<li>这是 ul 中的 li 元素</li>
	<li>这是 ul 中的 li 元素</li>
	<li>这是 ul 中的 li 元素</li>
	<li>这是 ul 中的 li 元素</li>
	<li>这是 ul 中的 li 元素</li>
</ul>

<script type="text/javascript">
	var ol = document.getElementsByTagName("ol");

	// 必须指明是哪一个元素对象 ol[0]
	var li = ol[0].getElementsByTagName("li");
	console.log(li);
</script>

类名获取元素（`getElementsByClassName`）

返回的是一个伪类集合；
使用时需要指定具体的一个对象；

<div class="box"></div>
<div class="box"></div>

<script type="text/javascript">
	var box = document.getElementsByClassName("box");
	console.log(box); // [div.box, div.box]
</script>

指定选择器获取元素（`querySelector('选择器')`）

返回的是元素中的 第一个对象;
选择器参数格式和 css 格式一致， . 表示类， #表示 id

<div class="box">元素1</div>
<div class="box">元素2</div>

<script type="text/javascript">
    var box = document.querySelector('.box');
    console.log(box)		// <div class="box">元素1</div>
</script>

querySelectorAll('选择器') ：返回选择器的所有元素

返回的是一个伪数组

<div class="box">元素1</div>
<div class="box">元素2</div>

<script type="text/javascript">
    var box = document.querySelectorAll('.box');
    console.log(box)		// [div.box, div.box]
</script>

2. 获取 body 和 html 元素

获取 body 元素 : 返回 body 元素对象

1	var el_body = document.body;

获取 html 元素：返回 HTML 元素对象

1	var el_html = document.documentElement;

二、操作元素

常见鼠标事件：

鼠标事件	触发条件
onclick	鼠标左键点击
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获取鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹出触发
onmousedown	鼠标按下触发

1. 事件三要素

事件三要素：1. 事件源，2. 绑定事件，3. 事件处理程序

事件源：事件触发的对象
绑定事件：如何触发，什么时间
事件处理程序：通过函数赋值的方式完成

<button type="button" class="mui-btn mui-btn-blue">唐伯虎</button>

<script type="text/javascript">
    var but = document.querySelector('.mui-btn');
    but.onclick = function(){
        alert('点秋香')
    }
</script>

2. 修改元素内容

方法	说明	实例
`element.innerText`	替换元素内容，不识别 HTML 标签去除空格和换行符	div.innerText = ‘你好’;
`element.innerHTML` （w3c 推荐）	替换元素内容，可识别 HTML 标签保留空格和换行符	div.innerHTML = ‘你好’;

区别：

<div class="demo1"><strong>innerText</strong> 不识别 HTML 标签</div>
<hr />
<div class="demo2"><strong>innerHTML</strong> 识别 HTML 标签</div>

<script>
	var div1 = document.querySelector(".demo1");
	var div2 = document.querySelector(".demo2");

	console.log(div1.innerText); // innerText 不识别 HTML 标签
	console.log(div2.innerHTML); // <strong>innerHTML</strong> 识别 HTML 标签
</script>

案例

代码示例

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>

	<body>
		<button>显示当前时间</button>
		<div>123</div>

		<p></p>

		<script>
			var bt = document.querySelector("button");
			var div = document.querySelector("div");
			var date = new Date();
			bt.onclick = function () {
				div.innerText = getDate();
			};

			var p = document.querySelector("p");
			p.innerText = getDate();

			function getDate() {
				var day = [
					"星期日",
					"星期一",
					"星期二",
					"星期三",
					"星期四",
					"星期五",
					"星期六",
				];
				var date = new Date();
				var Y = date.getFullYear();
				var M = date.getMonth();
				var D = date.getDate();
				var d = date.getDay();
				d = day[d];
				var h = date.getHours();
				h = h < 10 ? "0" + h : h;
				var m = date.getMinutes();
				m = m < 10 ? "0" + m : m;
				var s = date.getSeconds();
				s = s < 10 ? "0" + s : s;
				return (
					Y + "年" + M + "月" + D + "日 " + d + " " + h + ":" + m + ":" + s
				);
			}
		</script>
	</body>
</html>

3. 操作元素属性

自定义属性命名规范：以 data- 开头。

html5 新增的获取自定义属性的方法（ ie 11 才支持）：

element.dataset ，返回的是所有自定义属性的集合
element.dataset['index'], 返回的是所有自定义属性的集合
如果属性名是多个单词组成，获取属性值时需要用驼峰命名法，
1. 如：属性名：data-time-set ，获取属性值时：timeSet

<div data-time='20' data-ind="2"></div>

<script>
    var div = document.querySelector('div')

    console.log(div.dataset);			// {time: '20', ind: '2'}
    console.log(div.dataset.ind);		// 2
    console.log(div.dataset['time']);	// 20
</script>

获取元素属性的方法：

element.属性，如： console.log(div.id)
只能获得元素的内置属性；
element.getAttribute('属性')，如： console.log(div.getAttribute('id')) 1. 可以获得元素的 自定义属性

设置元素属性的方法：

element.属性 ，如： div.className = 'bg'
1. 主要用于设置内置属性
element.setAttribute('属性', '值') ，如： div.setAttribute('index', 'bg') 1. 主要用于设置 自定义 属性

移除元素属性的方法：

element.removeAttribute('属性')，如： div.removeAttribute('index')

<button class="ldh">刘德华</button>
<button class="vxy">张学友</button>
<img src="https://img.pupper.cn/img/202112091653296.jpg" alt="">


<script>
    var ldh = document.querySelector('.ldh');
    var vxy = document.querySelector('.vxy');
    var img = document.querySelector('img');

    ldh.onclick = function() {
        img.src = 'https://img.pupper.cn/img/202112091653296.jpg';
        img.title = '刘德华';
    }
    vxy.onclick = function() {
        img.src = 'https://img.pupper.cn/img/202112091653109.jpg';
        img.title = '张学友';
    }

案例 1

代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        img {
            margin: 10px;
            display: block;
        }

        button {
            margin: 10px;
        }
    </style>
</head>

<body>
    <button class="ldh">刘德华</button>
    <button class="vxy">张学友</button>
    <img src="https://img.pupper.cn/img/202112091653296.jpg" alt="">


    <script>
        var ldh = document.querySelector('.ldh');
        var vxy = document.querySelector('.vxy');
        var img = document.querySelector('img');

        ldh.onclick = function() {
            img.src = 'https://img.pupper.cn/img/202112091653296.jpg';
            img.title = '刘德华';
        }
        vxy.onclick = function() {
            img.src = 'https://img.pupper.cn/img/202112091653109.jpg';
            img.title = '张学友';
        }
    </script>
</body>

</html>

案例 2

代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        img {
            margin: 10px;
            display: block;
            width: 200px;
        }
    </style>
</head>

<body>
    <img src="https://img.pupper.cn/img/202112091713378.gif" alt="">
    <p>上午好</p>


    <script>
        var img = document.querySelector('img')
        var p = document.querySelector('p')

        function getDate() {
            var date = new Date();
            var h = date.getHours();
            return h;
        }

        if (getDate() < 12) {
            img.src = 'https://img.pupper.cn/img/202112091713378.gif';
            p.innerHTML = '上午好';
        } else {
            img.src = 'https://img.pupper.cn/img/202112091713834.gif';
            p.innerHTML = '下午好';
        }
    </script>
</body>

</html>

4. 操作表单元素属性

利用 DOM 可以操作表单属性，type、value、checked、selected、disabled 等

表单中的值需要通过 value 才能修改，innerHTML 不能修改

this ：指向时间函数的调用者

<button>按钮</button>
<input type="text">

<script>
    var btn = document.querySelector('button');
    var input = document.querySelector('input');

    btn.onclick = function() {
        input.value = '按钮被禁用了';

        // `this` ： 指向 时间函数的调用者
        this.disabled = true;
    }
</script>

案例 — 密码框

代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .box {
            position: relative;
            margin: 100px auto;
            background-color: rgb(248, 238, 238);
            width: 200px;
            height: 30px;
        }
        .box img {
            position: absolute;
            top: -5px;
            right: 5px;
            width: 40px;
        }
        .box input {
            width: 100%;
            height: 100%;
            outline: none;
            padding-left: 10px;
            padding-right: 50px;
        }
    </style>
</head>

<body>
    <div class="demo">
        <div class="box">
            <img src="https://img.pupper.cn/img/202112091853918.png" alt="">
            <input type="password">
        </div>
    </div>

    <script>
        var img = document.querySelector('img');
        var inp = document.querySelector('input');
        var flag = 0;
        img.onclick = function () {
            switch (flag) {
                case 0:
                    img.src = "https://img.pupper.cn/img/202112091853475.png";
                    inp.type = 'text';
                    flag = 1;
                    break;
                case 1:
                    img.src = 'https://img.pupper.cn/img/202112091853918.png';
                    inp.type = 'password';
                    flag = 0;
                    break;
            }
        }
    </script>

</body>

</html>

5. 操作样式属性

方法	说明
element.style	行内样式操作
element.className	通过改变标签的类名来获取新的样式

注意：

js 修改的样式为行内样式，他的权重最高

三、节点操作

一般时，节点至少拥有 nodeType（节点类型）、nodeName（节点名称）、nodeValue（节点值）三个基本属性

元素节点： nodeType 为 1
属性节点： nodeType 为 2
文本节点： nodeType 为 3 （文本节点包括：文字、空格、换行等）

1. 父节点（parentNode）

使用父节点时，一般得到的是离他最近的父节点，如果找不到父节点，就返回 null。

<div class="demo">
    <div class="box">
        <p class="set"></p>
    </div>
</div>

<script>
    var div = document.querySelector('.set')
    console.log(div.parentNode);	// <div class="box"><p class="set"></p></div>
</script>

2. 子节点（children）

children：返回所有的子元素节点集合数组
childNode ：返回所有的子节点集合数组，包含元素节点、文本节点等

<div class="demo">
	<div class="box">
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</div>

<script>
	var div = document.querySelector(".box").querySelector("ul");
	console.log(div.childNodes); // [text, li, text, li, text, li, text, li, text]
	console.log(div.children); // [li, li, li, li]
</script>

firstChild：获取第一个子节点，不管是文本节点还是元素节点，
lastChild：获取最后一个子节点，不管是文本节点还是元素节点，
以下方法需要 ie9 以上才能支持：
firstElementChild ：返回第一个子元素节点
lastElementChild ：返回最后一个子元素节点

实际开发中的写法： console.log(div.children[0])

1
2
3

// 获取最后一个子元素

console.log(div.children[div.children.length - 1]);

3. 兄弟节点（nextSibling）

node.nextSibling : 返回下一个兄弟节点，找不到则返回 null，返回中包含所有节点

<div>我是div</div>
<span>我是span</span>

<script>
	var div = document.querySelector("div");
	console.log(div.nextSibling); // #next
</script>

node.previousSibling : 返回上一个兄弟节点，找不到返回 null，返回中包含所有节点

<div>我是div</div>
<span>我是span</span>

<script>
	var div = document.querySelector('div');
    console.log(div.previousSibling);	// #next
</script>

以下方法需要 ie9 以上支持

nede.nextElementSibling : 返回下一个兄弟元素节点，找不到返回 null

<div>我是div</div>
<span>我是span</span>

<script>
	var div = document.querySelector('div');
    console.log(div.nextElementSibling);	// <span>我是span</span>
</script>

nede.previousElementSibling : 返回上一个兄弟元素节点，找不到返回 null

<div>我是div</div>
<span>我是span</span>

<script>
    var div = document.querySelector('div');
    console.log(div.previousElementSibling);    // null
</script>

兼容封装函数

function getNextElementSibling(element){
    var el = element;
    while (el = el.nextSibling) {
        if (el.nodeTpye === 1) {
            return el;
        }
    r
}

3. 创建及添加节点

语法：

// 创建节点
document.createElement("tagName");
// 后面添加节点
node.appendChild(child);

node.insertBefore(child, 指定元素);

createElement ：创建元素
appendChild : 在父元素后追加元素
insertBefore ：在指定元素前添加元素

<ul>
    <li>123</li>
</ul>

<script>
    //  创建元素
    var li = document.createElement('li');
    // 在最后追加元素
    var ul = document.querySelector('ul');
    ul.appendChild(li)
    // 在指定元素前添加元素
    var li1 = document.createElement('li');
    ul.insertBefore(li1, ul.children[0])
</script>

运行结果：

<ul>
    <li></li>
    <li>123</li>
    <li></li>
</ul>

代码示例

<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}
		.demo {
			width: 600px;
			margin: 100px auto;
		}
	</style>
</head>

<body>
	<div class="demo">
		<textarea name="" id="" cols="30" rows="10"></textarea>
		<button>发布</button>
		<ul></ul>
	</div>

	<script>
		var text = document.querySelector('textarea');
		var but = document.querySelector('button');
		var ul = document.querySelector('ul');

		but.onclick = function(){
			var li = document.createElement('li');
			li.innerHTML = text.value;
			var li1 = ul.appendChild(li);
		}
	</script>
</html>

3. 删除节点

语法：

1	node.removeChild(child);

<div class="demo">
	<button>删除</button>
	<ul>
		<li>熊大</li>
		<li>熊二</li>
		<li>光头强</li>
	</ul>
</div>

<script>
	var but = document.querySelector("button");
	var ul = document.querySelector("ul");
	but.onclick = function () {
		if (ul.children.length != 0) {
			ul.removeChild(ul.children[0]);
		} else {
			this.disabled = true;
		}
	};
</script>

4. 复制节点

语法：

1	node.cloneNode();

cloneNode() : 返回调用该方法的节点的一个副本。

如果括号里的参数为空或为 false，则是浅拷贝，只复制节点本身，不复制里面的子元素；
如果括号里的参数为 true，则是深拷贝，会复制他里边的所有内容

<div class="demo">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

<script>
    var ul = document.querySelector('ul');
    var li = ul.children[0].cloneNode(true);
    ul.appendChild(li)
</script>

5. 三种动态创建元素的区别

1
2
3

document.write();
document.innerHTML();
document.createElement();

区别：

document.write ：直接写入页面的内容流，会导致页面全部重绘
innerHTML ：使用数字的形式创建多个元素时效率更高，但是结构复杂
createElement ：创建多个元素时效率稍低，但是结构清晰

一、 DOM

1. 获取元素

id 获取 元素 （ getElementById() ）

标签名 获取元素 （ getElementsByTagName() ）

类名 获取元素 （getElementsByClassName）

指定选择器 获取元素 （querySelector('选择器')）

2. 获取 body 和 html 元素

二、 操作元素

1. 事件三要素

2. 修改元素内容

案例

3. 操作元素属性

获取元素属性的方法：

设置元素属性的方法：

移除元素属性的方法：

案例 1

案例 2

4. 操作表单 元素属性

案例 — 密码框

5. 操作 样式属性

三、节点操作

1. 父节点（parentNode）

2. 子节点（children）

3. 兄弟节点（nextSibling）

兼容封装函数

3. 创建及添加节点

3. 删除节点

4. 复制节点

5. 三种动态创建元素的区别

id 获取元素（ `getElementById()` ）

标签名获取元素（ `getElementsByTagName()` ）

类名获取元素（`getElementsByClassName`）

指定选择器获取元素（`querySelector('选择器')`）

二、操作元素

4. 操作表单元素属性

5. 操作样式属性