JavaScript DOM

气质&末雨

已于 2022-11-25 21:03:11 修改

阅读量191

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2022-11-25 20:57:31 首次发布

本文链接：https://blog.csdn.net/m0_72168501/article/details/128042380

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

JavaScript DOM操作
- 一、DOM

JavaScript DOM操作

一、DOM

1、DOM操作介绍 (初识DOM)

DOM(Document Object Model)：文档对象模型
其实就是操作html中的标签的一些能力
我们可以操作哪些内容：
(1) 获取一个元素
(2) 移除一个元素
(3) 创建一个元素
(4) 像页面里面添加一个元素
(5) 给元素绑定一些时间
(6) 获取元素的属性
(7) 给元素添加一些css样式
DOM 的核心对象就是document对象
document 对象是浏览器内置的一个对象，里面存储着专门用来操作元素的各种方法
DOM：页面中的标签，我们通过js获取到以后，就把这个对象叫做DOM对象

2、获取一个元素

通过js 代码来获取页面中的标签
获取到以后我们就可以操作这些标签了

0) 非常规节点

html，head，body这三个节点非常规节点，使用 document.documentElment 获取最外面的html节点，使用 document.head 获取head节点，使用 document.body 获取body节点，其他的常规节点使用下面的这些方法就可以获取节点

1) getElementById

getElementById 是通过标签 id 名称来获取标签的
因为在一个页面中id是唯一的，所以获取到的就是一个元素

2) getElementByClassName

通过获取class 类名字来获取节点

3) getElmentByTagName

通过元素标签来获取这个节点

4) getElmentsByName

5) querySelector

返回一个对象，只会返回遇到的第一个对象直接通过那个选择器的名称是什么就写入进去就行了

6) querySelectorAll

这个方法非常棒，返回所有的对象，要是遇到列表对象的话，一定要用这个很棒

3、代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box">666</div>
		<ul>
			<li class="item">111</li>
			<li class="item">111</li>
			<li class="item">111</li>
			<li class="item">111</li>
			<li class="item">111</li>
		</ul>
			<script>
				// console.log(box)
				// box.innerHTML = "111" //这样用也是可以的
				/*
				html,head,body 非常规
				
				常规的方案=>id,class,tag ...
				
				*/
				// console.log(document.documentElement) //获取最外面的html节点
			 //    console.log(document.head) //获取head节点
				// console.log(document.body) //获取body节点
				
				//getElementById   通过获取元素id 获取节点
				// console.log(document.getElementById("box"))  //获取元素的节点，通过id
				var obx = document.getElementById("box")
				obx.innerHTML = "111111"
				
				//getElementByClassName  通过获取class 类名字来获取节点   class这种方法更聚焦一点
				var itemr = document.getElementsByClassName("item")
				console.log(itemr)  //伪数组  长的像数组不能调用数组的那些方法
				
				itemr[0].innerHTML = "kl"  //通过这种方法来改变里面的元素
				for(var i=0;i<itemr.length;i++){
					itemr[i].innerHTML = "news-"+i;  //通过for循环，innerHTML属性吧吧itemr里面所有的值改为news
				}
				//Set => Array.from
				var newitem = Array.from(itemr)  //可以使用Arroy.from()方法，吧假的数组转化为真的数组
				console.log(newitem.filter)  //这里这个方法只是为了看转换成功没，转换成功了之后，就会有数组分方法
				
				//getElmentByTagName  通过元素标签来获取这个节点
				var items = document.getElementsByTagName("li")
				console.log(items)
				
				//getElmentsByName
				// var itemss = document.getElementsName("username")
				// itemss[0].value = "kerwin"
				
				//querySelector  返回一个对象，只会返回遇到的第一个对象 直接通过那个选择器的名称是什么就写入进去就行了 
				var ite = document.querySelector("#box")   
				console.log(ite)
				
				//querySelectorAll  这个方法非常棒，返回所有的
				var its = document.querySelectorAll("ul li")
				 console.log(its)
			</script>  

	</body>
</html>