DOM介绍

夜夜夜璟归

于 2022-08-20 14:19:29 发布

阅读量637

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/m0_72313625/article/details/126438938

版权

一：web API的概念和总结

1）Web API的概念：

Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。

现阶段我们主要针对于浏览器讲解常用的 API , 主要针对浏览器做交互效果。比如我们想要浏览器弹出一个警示框，直接使用 alert(‘弹出’)。

2）Web API的总结：

Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。

Web API 一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法（函数）

二: DOM介绍

1)DOM简介：

总结：

文档：一个页面就是一个文档，DOM中使用document表示。

节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示。

标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示

DOM把以上内容都看做成对象。

2）DOM获取元素

2.1 根据ID获取

语法：document.getElementById(id)

作用：根据ID获取元素对象

参数：id值，区分大小写的字符串

返回值：元素对象或 null

<body>
    <div id="demo">hello</div>

<script>
    // 1)因为我们文档页面从上到下进行加载，所以我们先得有标签  所以我们script写到标签的下面
			// 2)文档是document   get 获得   element元素    by通过  命名的方式采用的是驼峰命名法
			// 3)参数id是大小写敏感的字符串
			// 4)返回的是一个元素对象   object 
			
			// 1.根据id获得元素
			var dom=document.getElementById("demo");
			//里面的参数必须是字符串
			console.log(dom);
			
			// 打印返回该元素的数据类型    object
			console.log(typeof dom);
			
			// console.dir 打印我们返回的元素对象，更好的查看里面的属性和方法
			console.dir(dom)
</script>
</body>

2.2 根据标签名获取元素

语法：document.getElementsByTagName('标签名') 或者 element.getElementsByTagName('标签名')

作用：根据标签名获取元素对象

参数：标签名

返回值：元素对象集合（伪数组，数组元素是元素对象）

<body>
        <a href="">链接1</a>
		<a href="">链接2</a>
		<a href="">链接3</a>

        <ul id=nav>
			<li>好好学习，天天向上</li>
			<li>好好学习，天天向上</li>
			<li>好好学习，天天向上</li>
			<li>好好学习，天天向上</li>
		</ul>

<script>
    // 2.根据标签名来获取元素  
			// 1)返回的是获取过来元素对象的集合（使用的是伪数组的形式存储的）
			var domA=document.getElementsByTagName("a");
			console.log(domA);
			console.log(domA[0]);
			// 2)我们想要依次打印里面的元素对象，我们可以采取便利的方式
			for (var i=0 ; i<domA.length ; i++){
				console.log(domA[i]);
			}
			
			// 3)element.getElementsByTagName()  可以得到这个元素里面的某些标签
			var nav=document.getElementById('nav');
			// 先获取id为nav的元素
			var list=nav.getElementsByTagName('li');
			// 然后获取id为nav里面标签为li里面的所有元素
			console.log(list)
</script>
</body>

注意：

1）因为得到的是一个对象的集合，所以我们想要操作里面的元素就要进行遍历

2）得到的元素是动态的

2.3 根据类名获取元素集合

(Html5新增) getElementsByClassName(‘类名’) 根据类名获得某些元素集合。

<body>
        <span class="demo1">span1</span>
		<span class="demo1">span1</span>
		<span class="demo1">span1</span>
		

<script>
   // 3.getElementsByClassName() 根据类来获取元素集合 (H5新增的获取元素的方法)
			var demo1=document.getElementsByClassName("demo1");
			console.log(demo1);
</script>

</body>

2.4 获取指定选择器第一个元素

(Html5新增) querySelector 返回指定选择器的第一个元素对象切记里面的选择器需要加符号 “.” “#”。(H5新增的获取元素的方法) 不考虑兼容性，这个为首选

<body>
        <div id="demo">hello</div>
		
		<a href="">链接1</a>
		<a href="">链接2</a>
		<a href="">链接3</a>

        <span class="demo1">span1</span>
		<span class="demo1">span1</span>
		<span class="demo1">span1</span>
		

<script>

			//4. queryselector  (H5新增的获取元素的方法) 不考虑兼容性，这个为首选  
			// 可以获取通过 id 标签 类 来获取元素，但是该方法是能获取指定元素的第一个元素对象，当该元素有多个元素时候，该方法只能获取一个元素。
			var domQueryId=document.querySelector("#demo");
			// 后面的字符加 #  querySelector会自动判断为id选择器
			console.log(domQueryId);
			
			
			var domQueryClass=document.querySelector(".demo1");
			//后面的字符加 .  querySelector会自动判断为class选择器
			console.log(domQueryClass);
			
			
			
			var domQueryB=document.querySelector("a");
			// 返回的是a标签里面的第一个a元素（标签里面的内容）
			console.log(domQueryB);
</script>
</body>

2.5 根据指定选择器返回所有元素

(Html5新增) querySelectorAll()返回指定选择器的所有元素对象集合。

<body>

        <span class="demo1">span1</span>
		<span class="demo1">span1</span>
		<span class="demo1">span1</span>
		

<script>

			//5 querySelectorALL 可以通过指定的id 标签 类，返回该类型下面所有的元素（返回指定的所有元素）
			var domQueryALL=document.querySelectorAll(".demo1");
			console.log(domQueryALL);
</script>
</body>

2.6 获取特殊元素

document.body //返回body元素

document.documentElement //返回HTML元素



<script>
// 获取特殊元素：  body   html  
			
			//1） 获取body元素
			var bodys=document.body;
			console.log(bodys);
			console.dir(bodys);
			// 返回的是一个元素对象
			
			
			// 2）获取html元素  规范的写法
			var htmlEle=document.documentElement;
			console.log(htmlEle);



</script>