DOM基本知识及DOM查询

一只丽丽猪

已于 2022-03-13 16:07:32 修改

阅读量1.9k

点赞数 3

分类专栏： JavaScript练习文章标签： javascript elementui html

于 2022-03-06 23:42:47 首次发布

本文链接：https://blog.csdn.net/weixin_44522602/article/details/123320066

版权

JavaScript练习专栏收录该内容

16 篇文章 1 订阅

订阅专栏

1. DOM概念

- DOM（Document Object Model）是文档对象模型，通过DOM可以来任意来修改网页中各个内容。

文档指的是网页，一个网页就是一个文档。
对象指将网页中的每一个节点都转换为对象，转换完对象以后，就可以以一种纯面向对象的形式来操作网页了。
模型用来表示节点和节点之间的关系，方便操作页面。

2. 节点（Node）

- 节点是构成网页的最基本的单元，网页中的每一个部分都可以称为是一个节点

- 虽然都是节点，但是节点的类型却是不同的

- 常用的节点

文档节点（Document），代表整个网页
元素节点（Element），代表网页中的标签
属性节点（Attribute），代表标签中的属性
文本节点（Text），代表网页中的文本内容

3. DOM操作——查询

在网页中浏览器已经为我们提供了document对象，它代表的是整个网页，它是window对象的属性，可以在页面中直接使用。

1) document查询方法：

- 根据元素的id属性查询一个元素节点对象：document.getElementById("id属性值");

- 根据元素的name属性值查询一组元素节点对象:document.getElementsByName("name属性值");

- 根据标签名来查询一组元素节点对象：document.getElementsByTagName("标签名");

注意即使查找只有一个返回一个类数组，所以document.getElementsByTagName("标签名")[0];

- 获取页面中的body元素: document.body

- 获取页面中html根元素: document.documentElement

- 获取页面中的所有元素，相当于document.getElementsByTagName("*"): document.all

- 根据元素的class属性值查询一组元素节点对象，这个方法不支持IE8及以下的浏览器： document.getElementsByClassName()

- 根据CSS选择器去页面中查询一个元素， IE8 也支持。如果匹配到的元素有多个，则它会返回查询到的第一个元素： document.querySelector() ，例如： document.querySelector(“.box1 div”)

- 根据CSS选择器去页面中查询一组元素， IE8 也支持。会将匹配到所有元素封装到一个数组中返回，即使只匹配到一个也返回数组：document.querySelectorAll()

- 获取当前元素的所有子节点，会获取到空白的文本子节点：元素.childNodes；

- 获取当前元素的所有子元素，不会获取到空白的文本子节点：元素.children；

- 获取当前元素的第一个子节点，包括空白节点：元素.firstChild

- 获取当前元素的第一个子元素，不支持IE8以下的浏览器：元素.firstElementChild

- 获取当前元素的最后一个子节点：元素.lastChild

- 获取当前元素的父元素：元素.parentNode

- 获取当前元素的前一个兄弟节点：元素.previousSibling

- 获取当前元素的后一个兄弟节点：元素.nextSibling

- 读取标签内部的文本内容: 元素.firstChild.nodeValue

2) 元素的属性：

- 读取元素的属性：

语法：元素.属性名

例子：

ele.name

ele.id

ele.value

ele.className（读取class必须用className）

- 修改元素的属性：

语法：元素.属性名 = 属性值

- innerHTML和innerText

-相同：这两个属性并没有在DOM标准定义，但是大部分浏览器都支持这两个属性。两个属性作用类似，都可以获取到标签内部的内容，

-不同：innerHTML会获取到html标签，而innerText会自动去除标签，如果使用这两个属性来设置标签内部的内容时，没有任何区别的。innerHTML 用于元素内的的html代码，对于自结束标签，这个属性没有意义

4. 事件（Event）

- 事件指的是用户和浏览器之间的交互行为。比如：点击按钮、关闭窗口、鼠标移动

- 我们可以为事件来绑定回调函数来响应事件。

- 绑定事件的方式：

1）可以在标签的事件属性中设置相应的JS代码，将结构内容混淆，不建议使用。

2）可以通过为对象的指定事件属性设置回调函数的形式来处理事件

<button id="btn">按钮</button>

<script>

var btn = document.getElementById("btn");

btn.onclick = function(){

};

</script>

3. 文档的加载

- 浏览器在加载一个页面时，是按照自上向下的顺序加载的，加载一行执行一行。

- 如果将js代码编写到页面的上边，当代码执行时，页面中的DOM对象还没有加载，

此时将会无法正常获取到DOM对象，导致DOM操作失败。

1）解决方式一：

- 可以将js代码编写到body的下边

<body>

<button id="btn">按钮</button>

<script>

var btn = document.getElementById("btn");

btn.onclick = function(){


};

</script>

</body>

- 解决方式二：

- 将js代码编写到window.onload = function(){}中，常用

- window.onload 对应的回调函数会在整个页面加载完毕以后才执行，所以可以确保代码执行时，DOM对象已经加载完毕了

<script>

window.onload = function(){

var btn = document.getElementById("btn");

btn.onclick = function(){

};

};

</script>

练习1 ：网页切换图片

<!DOCTYPE html>
<html>
    <head> 
        <meta charset="utf-8">
        <title>switch pics</title>
        <style text="type/css">
            *{
                margin: 0;
                padding:0;
            }
            img{
                width:350px;
                height:350px;
            }
            #outer{
                width: 350px;
                margin: 0 auto;
                background-color: aquamarine;
                padding:10px;
                text-align:center;
            }

        </style>
        <script text="type/javascript">
            window.onload = function(){
                var img  = document.getElementsByTagName('img')[0];
                var  imgArr =['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg']
                var prev = document.getElementById("prev");
                var next = document.getElementById("next");
                var index  = 0;
                var info  = document.getElementById('info');
                info.innerHTML =  '一共有'+ imgArr.length+'张，这是第' + (index+1) +'张';

                prev.onclick = function(){
                    index--;
                    if(index < 0){
                       index = imgArr.length - 1;
                    }
                    img.src = imgArr[index];
                    info.innerHTML =  '一共有'+ imgArr.length+'张，这是第' + (index+1) +'张';
                
                }

                next.onclick = function(){
                    index++;
                    if(index > imgArr.length - 1){
                        index = 0;
                   }
                   img.src  = imgArr[index];
                   info.innerHTML =  '一共有'+ imgArr.length+'张，这是第' + (index+1) +'张';
                   
                }
            }

        </script>
    </head>
  
    <body>
        <div id="outer">
            <p id = 'info'> </p>
            <img src = "images/1.jpg" alt = 'cat'>
            <button id = 'prev'>上一张</button>
            <button id = 'next'>下一张</button>
        </div>
    </body>
    </html>

练习2： DOM查询：为按钮绑定单击响应函数，点击按钮查找返回要求内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Untitled Document</title>
	<link rel="stylesheet" type="text/css" href="style/css.css" />
	<script type="text/javascript">
	/* 定义一个函数，专门用来制定元素绑定单级响应函数
	参数：
	--idStr 要绑定单击响应函数的对象的id属性值
	--fun  事件的回调函数，当单击函数，该函数会被触发；函数是一个对象，也可以做一个参数 */
		function myClick(idStr,fun){
			var btn = document.getElementById(idStr);
			btn.onclick =fun;
		}
		
		window.onload = function () {
			//查找#bj节点
			var btn01 = document.getElementById('btn01');
			btn01.onclick = function () {
				var bj = document.getElementById('bj');
				alert(bj.innerHTML);
			}

			//查找所有li节点
			var btn02 = document.getElementById('btn02');
			btn02.onclick = function () {
				var lis = document.getElementsByTagName('li');
				//lis返回一个类数组对象
				for (var i = 0; i < lis.length; i++) {
					alert(lis[i].innerHTML);
				}
			}
				//查找name=gender的所有节点
				var btn03 = document.getElementById('btn03');
				btn03.onclick = function () {
					var inputs = document.getElementsByName('gender');
					for (var i = 0; i < inputs.length; i++) {
						//innerHTML读取内部html代码，元素节点属性，元素.属性名
						//class是保留字，读取class，元素.className
						alert(inputs[i].value);
					}
				}

				//查找#city下所有li节点
				var btn04 = document.getElementById('btn04');
				btn04.onclick=function(){
					var city = document.getElementById('city');
					var lis = city.getElementsByTagName('li');
					for (var i=0; i<lis.length; i++){
						alert(lis[i].innerHTML);
					}
				}
				//返回#city的所有子节点
				var btn05 = document.getElementById('btn05');
				btn05.onclick=function(){
					var city = document.getElementById('city');
					var cns = city.childNodes;
					alert(cns.length);//9，包括空白子节点

					/* var cns2 = city.children;
					alert(cns2.length);//4，子元素，不包括空白节点 */
				}

				//返回#phone的第一个子节点，可能返回空白节点
				var btn06 = document.getElementById('btn06');
				btn06.onclick=function(){
					var phone = document.getElementById('phone');
					var first = phone.firstChild;
					alert(first.innerHTML);
					/* var fir = phone.firstElementChild;
					alert(fir.innerHTML); */
					
				}

				//返回#bj的父节点
				myClick('btn07',function(){
					var bj = document.getElementById('bj');
					var par = bj.parentNode;
					alert(par.innerText);
					//alert(par.innerHTML);
				})

				//返回#android的前一个兄弟节点
				myClick('btn08', function(){
					var android = document.getElementById('android');
					var pre = android.previousSibling;
					alert(pre.innerHTML);
					/* var pre = android.previousElementSibling;
					alert(pre.innerHTML) */
				})

				//返回#username的value属性值
				myClick('btn09',function(){
					var username = document.getElementById('username');
					alert(username.value);
				;
				})

				//设置#username的value属性值
				myClick('btn10',function(){
					var username = document.getElementById('username');
					username.value='你是猪';
				})

				//返回#bj的文本值
				myClick('btn11',function(){
					var bj = document.getElementById('bj');
					alert(bj.firstChild.nodeValue);
					//alert(bj.innerText); 

				})

		}
	</script>
</head>

<body>
	<div id="total">
		<div class="inner">
			<p>
				你喜欢哪个城市?
			</p>

			<ul id="city">
				<li id="bj">北京</li>
				<li>上海</li>
				<li>东京</li>
				<li>首尔</li>
			</ul>

			<br>
			<br>

			<p>
				你喜欢哪款单机游戏?
			</p>

			<ul id="game">
				<li id="rl">红警</li>
				<li>实况</li>
				<li>极品飞车</li>
				<li>魔兽</li>
			</ul>

			<br />
			<br />

			<p>
				你手机的操作系统是?
			</p>

			<ul id="phone">
				<li>IOS</li>
				<li id="android">Android</li>
				<li>Windows Phone</li>
			</ul>
		</div>

		<div class="inner">
			gender:
			<input class="hello" type="radio" name="gender" value="male" />
			Male
			<input class="hello" type="radio" name="gender" value="female" />
			Female
			<br>
			<br>
			name:
			<input type="text" name="name" id="username" value="abcde" />
		</div>
	</div>
	<div id="btnList">
		<div><button id="btn01">查找#bj节点</button></div>
		<div><button id="btn02">查找所有li节点</button></div>
		<div><button id="btn03">查找name=gender的所有节点</button></div>
		<div><button id="btn04">查找#city下所有li节点</button></div>
		<div><button id="btn05">返回#city的所有子节点</button></div>
		<div><button id="btn06">返回#phone的第一个子节点</button></div>
		<div><button id="btn07">返回#bj的父节点</button></div>
		<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
		<div><button id="btn09">返回#username的value属性值</button></div>
		<div><button id="btn10">设置#username的value属性值</button></div>
		<div><button id="btn11">返回#bj的文本值</button></div>
	</div>
</body>

</html>