javascript中DOM的操作(1)-CSDN博客

本文链接：https://blog.csdn.net/weixin_58821175/article/details/126114494

DOM介绍

JavaScript一共包括三部分，分别是ECMAScript也就是JavaScript基础、DOM和BOM。

今天来将一下DOM，先说说什么是DOM，DOM(Document Object Model)文档对象模型，所谓文档，也就是对网页中的内容、结构和样式进行操作，对象也就是在操作过程中返回值为对象类型，我们学习DOM主要就是对元素进行创建、增、删、改、查、属性操作、时间操作，来看下DOM树吧，最顶层就是Document

获取元素

获取元素有很多方法，可以通过id获取，可以通过类获取，其中querySelector既可以通过id也能通过类，详细内容都在注释里


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取元素</title>
</head>
<body>
<div id="time">2019.10.12</div>
<div class="box">盒子</div>
<div class="box">盒子</div>
<ul id="ul">
    <li>我是丽丽</li>
    <li>我是丽丽</li>
    <li>我是丽丽</li>
    <li>我是丽丽</li>
    <li>我是丽丽</li>
</ul>
<script>
    //js是从上往下执行的，所以js要写到div下面
    //通过id获得元素
    var time = document.getElementById('time');
    console.log(time);//这里就获得了<div id="time">2019.10.12</div>元素
    console.log(typeof time);//返回的time是一个object对象
 
    //获取多个元素
    var lis = document.getElementsByTagName('li');//这里返回的是个集合，伪数组的形式
    console.log(lis);//这里可以通过下标访问，第一个元素是lis[0]
 
    //如果这里有很多的li而你只想获得ul中的li可以如下指定获取方法
    var ul = document.getElementById('ul');
    var lis1 = ul.getElementsByTagName('li');
    console.log(lis1);
 
    //通过class获得元素
    var boxs = document.getElementsByClassName('box');
    console.log(boxs);
 
    //querySelector() 返回指定选择器的第一个元素，类要加. id要加#，这个比较常用
    var box = document.querySelector('.box');//这是类选择器
    console.log(box);
    var ul1 = document.querySelector('#ul');//这是id选择器
    console.log(ul1);
    var li = document.querySelector('li');//标签选择器
    console.log(li);
 
    //querySelectorAll() 返回一个集合，是个伪数组的形式
    var allBox = document.querySelectorAll('.box');
    console.log(allBox);
    var lis2 = document.querySelectorAll('li');
    console.log(lis2);
</script>
</body>
</html>

运行结果

操作元素

操作元素是个重头戏了，可以通过元素内容、元素属性、表单属性、样式属性进行操作，具体操作都有注释，由于运行是交互式的结果，这里就进行演示了，只能截一张表面上的图了，感兴趣的可以复制代码自己尝试下


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作元素</title>
    <style>
        .d {
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .change {
            width: 500px;
            height: 500px;
            background-color: pink;
        }
    </style>
</head>
<body>
<button id="btn">点击我</button>
<div>点击按钮，我会发生变化</div>
<button id="btn1">盒子1</button>
<button id="btn2">盒子2</button><br>
<img src="btn1.jpg" alt="我是盒子1"><br>
<button id="btn3">按钮</button>
<input type="text" value="输入内容">
<div class="d"></div>
<div id="dd" data-index="2"></div>
<script>
    //元素内容操作
    var btn = document.querySelector('#btn');
    var div = document.querySelector('div');
    //这里用到了onclick点击事件，后面会着重讲解事件
    btn.onclick = function () {
        //div.innerText = '<strong>我变化了</strong>';
        //innerText是不能识别HTML标签的，而innerTHML可以识别HTML标签，后者比较常用
        div.innerHTML = '<strong>我变化了</strong>';
    }
 
    //元素属性操作
    var btn1 = document.querySelector('#btn1');
    var btn2 = document.querySelector('#btn2');
    var img = document.querySelector('img');
    btn1.onclick = function () {
        img.src = 'btn1.jpg';
        img.alt = '我是盒子1';
    }
    btn2.onclick = function () {
        img.src = 'btn2.jpg';
        img.alt = '我是盒子2';
    }
 
    //表单属性操作
    var btn3 = document.querySelector('#btn3');
    var input = document.querySelector('input');
 
    btn3.onclick = function () {
        input.value = '我被点击了';
        //当点击之后可以通过disabled禁用点击按钮
        btn3.disabled = true;//也可以用this.disabled = true;
    }
 
    //样式属性操作
    var di = document.querySelector('.d');
    di.onclick = function () {
        //单个改变样式
        // this.style.backgroundColor = 'blue';
        // this.style.width = '300px';
 
        //通过类的方式修改多个样式
        this.className = 'change';
    }
 
    //自定义属性操作
    var dd = document.querySelector('#dd');
    console.log(dd.id);//元素直接点属性，这里的属性是内置的属性
    console.log(dd.getAttribute('data-index'));//这里通过getAttribute()获得自定义属性，一般是data-开头
    dd.setAttribute('data-time',10);//这是设置属性
</script>
</body>
</html>

运行结果:

节点操作

在DOM中所有的节点组成了一棵树，树中的各个节点有父子关系和兄弟关系，这里演示了获得父节点、获得子节点、获得第一个和最后一个节点、获得兄弟节点、动态创建节点、删除节点还有辅助节点，在这里我都写到了一个文件中，方便读者复制了，自己运行，好好思考其中的意思

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>节点操作</title>
	</head>
	<body>
		<div class="box">
			<span class="x">x</span>
		</div>
		<ul>
			<li>hello</li>
			<li></li>
			<li></li>
		</ul>
		<ol>
			<li></li>
			<li></li>
			<li></li>
		</ol>
		<div class="box1">我是div</div>
		<span class="sp">我是span</span>
		<script>
			//获得父节点
			var x = document.querySelector('.x'); //这是拿到了span元素
			console.log(x);
			var div = x.parentNode; //用节点操作，可以直接拿到离它最近的父节点，节点也就是上面展示的DOM树
			console.log(div);

			//获得子节点
			var ul = document.querySelector('ul');
			var lis = ul.childNodes; //这里会得到7个元素，其中有3个元素节点li，4个文本节点这里是换行
			console.log(lis);
			var lis1 = ul.children; //这里得到的是4个元素，都是li
			console.log(lis1);

			//获得第一个和最后一个节点，当然了也可以通过上面获得的lis[0]来访问第一个，长度减1获得最后一个
			var ol = document.querySelector('ol');
			console.log(ol.firstChild); //这是第一个节点，但是这是text文本节点
			console.log(ol.lastChild); //这是最后一个节点，但是这是text文本节点
			console.log(ol.firstElementChild); //这是第一个元素，也就是li
			console.log(ol.lastElementChild); //这是最后一个元素，也就是li

			//获得兄弟节点
			var div1 = document.querySelector('.box1');
			console.log(div1.nextSibling); //这里获得的是下一个节点，这里是text文本节点
			console.log(div1.previousSibling); //这里获得的是上一个节点，这里是text文本节点
			console.log(div1.nextElementSibling); //这里获得的是span也就是下一个元素节点
			console.log(div1.previousElementSibling); //这里返回的是ol也就是上一个元素节点

			//动态创建节点
			var li = document.createElement('li');
			var ul1 = document.querySelector('ul');
			ul1.appendChild(li); //将li节点追加到ul后面
			var li1 = document.createElement('li');
			ul1.insertBefore(li1, ul.children[0]); //在某个元素前插入元素

			//删除节点
			var ul2 = document.querySelector('ul');
			ul2.removeChild(ul.children[0]); //删除父元素中的子节点

			//复制节点
			var ul3 = document.querySelector('ul');
			var li3 = ul3.children[0].cloneNode(); //这里的复制是只复制标签，不复制内容
			ul3.appendChild(li3);
			var li4 = ul3.children[0].cloneNode(true); //这里父子的有内容
			ul3.appendChild(li4);
		</script>
	</body>
</html>

运行结果: