DOM

最新推荐文章于 2022-09-19 16:27:56 发布

.小王baby.ʚ�ɞ

最新推荐文章于 2022-09-19 16:27:56 发布

阅读量210

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/wxy58719213/article/details/110038517

版权

这篇博客详细介绍了DOM（文档对象模型）的基本操作，包括获取和修改元素内容、通过ID和标签选择元素、事件绑定与处理。内容涵盖全选、全不选、反选功能的实现，以及多选框状态的同步。此外，还讲解了DOM元素的遍历、样式读取、增删查改等操作，并涉及页面加载时机和元素查询方法。

摘要由CSDN通过智能技术生成

DOM

1.html标签 == 元素 == 节点 Element

	  1- 获取button按钮的元素对象 并将内容修改为 i love button
	  2- 通过循环修改多个a链接的内容

2.根据id获取指定元素（标签）对象，将数据存储到本地变量a中

console.log(document.getElementById("a"))

3.修改标签之间的内尔用

var a = document.getElementById("a")

事件

1.在事件对应的属性中设置一些js代码
当事件触发时，执行此代码
此种方式我们成为结构与行为的耦合
不方便维护，不推荐使用

对button标签绑定了一个单击事件

<button onclick="alert('hello world')">按钮</button>

3.对div标签绑定了鼠标移入的事件

div onmouseover="alert('hello javascript')"></div>
<div style="width:100px;height:200px;background:pink"></div>
<button id="btn">你敢点我下试试</button>

4.根据指定id获取元素对象

var btn = document.getElementById("btn")

5.对btn元素对象注册单击事件，当事件触发时执行回调处理函数

btn.onclick = function(){
    alert("试试就试试")
}

文档加载

1- 浏览器加载页面时，自上而下的顺序加载的，读取到一行就运行一行，如果将script标签写到页面的顶部
在执行代码时，页面没有加载，页面也没有加载dom对象
就会导致无法获取dom对象
2- onload 事件在整个页面加载完成之后才触发
可以给window绑定onload事件
此事件的回调处理函数在页面加载完成时候执行
确保咱们可以执行所有的dom对象

DOM元素访问

1.根据指定id信息获取元素对象，返回:对象

var btn = document.getElementById("btn")
console.log(btn)

2.根据指定标签信息获取元素对象的集合返回:数组

var button = document.getElementsByTagName("button")
console.log(button)

3.根据指定name信息获取元素对象，返回:数组

var btn1 = document.getElementsByName("btn1")
console.log(btn1)

4.根据指定class信息获取元素对象，返回:数组

var c1 = document.getElementsByClassName("c1")
console.log(c1)

5.根据id名称获取指定元素button，返回一个button对象

var btn = document.getElementById("button")
var btn = document.getElementsByTagName("button")[0]

根据标签名称获取指定元素p ，返回一个数组数组中包含多个p对象

var p = document.getElementsByTagName("p")

给btn注册单击事件

btn.onclick = function(){
// 当事件触发
// 循环遍历数组中的每一个元素 
for(var i=0;i < p.length;i++){
// console.log(p[i])
// 设置元素的内容为 hello kitty
p[i].innerHTML = "hello kitty"
 }
}

全选全不选

1.功能：
①全选按钮：点击后所有爱好都选中 – 1.#checkedAllBtn
②全不选按钮：点击后所有爱好都选中 – 2.#checkedNoBtn
③反选按钮：点击后所有爱好选中状态反转 – 3.#checkedRevBtn
④提交按钮：点击后依次弹出选中内容 – 4.#sendBtn
⑤全选框：点击后让所有爱好的选中状态和自己一致 – 5.#checkedAllBox
⑥爱好框：点满后将全选框选中，否则取消选中 – 6.items

2.window.onload = function(){ // 获取四个多选框 var items = document.getElementsByName("items") // console.log(items) // 获取多选框全选全不选 var checkedAllBox = document.getElementById("checkedAllBox")

3.全选

// 获取全选按钮
		var checkedAllBtn = document.getElementById("checkedAllBtn")
		// console.log(checkedAllBtn)
		// 给全选按钮注册点击事件
		checkedAllBtn.onclick = function(){
			// 事件触发时
			// 遍历每一个爱好
			for(var i = 0; i < items.length; i++){
				// alert(items[i].checked)
				// 将每一个爱好的状态设置为 默认选中 
				items[i].checked = true
			}
			// 全选全不选多选框为 选中状态
			checkedAllBox.checked = true
		}

4.全不选

// 获取全不选按钮
		var checkedNoBtn = document.getElementById('checkedNoBtn')
		// 给全不选按钮注册点击事件
		checkedNoBtn.onclick = function(){
			// 事件触发时
			// 遍历每一个爱好
			for(var i = 0; i < items.length; i++){
				// alert(items[i].checked)
				// 将每一个爱好的状态设置为 默认不选中 
				items[i].checked = false
			}
			// 全选全不选多选框为 不选中状态
			checkedAllBox.checked = false
		}

全选全不选

// 给全选全不选多选框注册点击事件
		checkedAllBox.onclick=function(){
			// console.log(this.checked)
			// 事件触发时
			// 遍历每一个爱好
			for(var i=0;i<items.length;i++){
				//将全选全不选多选框的值赋值给每一个爱好多选框
				items[i].checked = this.checked
				// console.log(items[i].checked)
			}
		}

反选

// 获取反选按钮
		var checkedRevBtn = document.getElementById("checkedRevBtn")
		// 给反选按钮注册点击事件
		checkedRevBtn.onclick = function(){
			// 全选全不选多选框为 选中状态
			checkedAllBox.checked= true
			// 事件触发时
			// 遍历每一个爱好
			for(var i=0;i<items.length;i++){
				/* 
				//判断多选框
				if(items[i].checked){
					// 如果当前多选框的状态为 true 则赋值为false
					items[i].checked = false
				}else{
					// 如果当前多选框的状态为 false 则赋值为true
					items[i].checked = true
				} */
				
				// 将当前多选框的状态值取反后在赋值回去
				items[i].checked = !items[i].checked
				// 判断当前多选框的状态是否有为假的状态，如果四个爱好中有一个没有选中则，将  
				// !true false  ！false = true 
				if(!items[i].checked ){
					// 全选全不选多选框设置为 false
					checkedAllBox.checked= false
					// break;
				}
				
			}
			// 判断四个多选框是否全部选中
		}

7.提交按钮：当点击提交按钮时选中的都弹窗

	var sendBtn = document.getElementById("sendBtn")
		sendBtn.onclick = function(){
			for(var i = 0; i < items.length;i++){
				if(items[i].checked){
					alert(items[i].value)
				}
			}
		}

items
如果四个多选框都被选中，则checkedAllBox选中
如果四个多选框都被没选中，则checkedAllBox没选中

for(var i = 0; i < items.length;i++){
			items[i].onclick = function(){
				checkedAllBox.checked = true
				for(var j = 0; j < items.length;j++){
					if(!items[j].checked ){
						// 全选全不选多选框设置为 false
						checkedAllBox.checked= false
						break;
					}
				}
			}
		}
		
	}

9.根据id 返回对象

document.getElementById()

根据类名返回数组

document.getElementsByClassName()

11.根据name属性值返回数组

document.getElementsByName()

12.根据标签返回数组

document.getElementsByTagName()

DOM查询的其他方式

1.获取body标签

var body = document.getElementsByTagName("body")[0]
console.log(body)

2.body也是document对象的一个属性 ,保存的是body的引用

var body1 = document.body
console.log(body1)

3.获取html根标签

var html = document.documentElement;
console.log(html)

4.获取页面中所有的元素

var all = document.all
console.log(all)

5.根据类名获取指定元素对象

document.getElementsByClassName(c1)

7.根据选择器获取指定元素信息 querySelector

var q = document.querySelector(".c1")
			console.log(q)
			
var q1 = document.querySelectorAll(".c1")
			console.log(q1)
			console.log(q1[0])

DOM查询

1.查找#bj节点

var bj = document.getElementById("bj")

2.通过innerHTML这个属性可以获取元素内部内容

	alert(bj.innerHTML)
				}

3.查找所有li节点

var btn02 = document.getElementById("btn02")
				btn02.onclick = function(){
					//查找所有li节点
					var list = document.getElementsByTagName("li")
					console.log(list)
					for(var i = 0; i < list.length;i++){
						alert(list[i].innerHTML)
					}
				}

4.查找name=gender的所有节点

var btn03 = document.getElementById("btn03")
				btn03.onclick = function(){
					//查找所有li节点
					var genders = document.getElementsByName("gender")
					// console.log(genders)
					for(var i = 0; i < genders.length;i++){
						alert("hello")
					}
				}

5.查找#city下所有li节点

var btn04 = document.getElementById("btn04")
				btn04.onclick = function(){
					查找#city下所有li节点
					var city = document.getElementById("city")
					console.log(city)
					var list = city.getElementsByTagName("li")
					for(var i = 0; i < list.length;i++){
						alert(list[i].innerHTML)
					}
				}

6.//返回#city的所有子节点

var btn05 = document.getElementById("btn05")
				btn05.onclick = function(){
					//返回#city的所有子节点
					var city = document.getElementById("city")
					console.log(city)
					// 返回 #city元素下所有的子节点
					var list = city.childNodes
					console.log(list)
					// 返回#city元素下所有的子元素
					var list1 = city.children
					console.log(list1)
				}

7.返回#phone的第一个子节点

var btn06 = document.getElementById("btn06")
				btn06.onclick = function(){
					var phone = document.getElementById("phone")
					console.log(phone)
					// 返回 #phone元素下所有的子节点
					var list = phone.childNodes
					console.log(list)
					// 返回#city元素下所有的子元素
					// var list1 = phone.children
					// console.log(list1)
				}

DOM查询

获取ul下所有的子元素

var children1 = ul.children
console.log(children1)

2.获取ul下所有的子节点

var children2 = ul.childNodes
console.log(children2)

3.获取ul的父节点

var parent1 = ul.parentNode
console.log(parent1)

4.获取ul的父元素

var parent2 = ul.parentElement
console.log(parent2)

5.获取ul的第一个子节点

var first1 = ul.firstChild
console.log(first1)

6.获取ul的第一个子元素

var first2 = ul.firstElementChild
console.log(first2)

7.获取ul的上一个兄弟节点

var brother1 =  ul.previousSibling
console.log(brother1)

8.获取ul的下一个兄弟节点

var brother2 =  ul.nextSibling
console.log(brother2)

9.获取ul的上一个兄弟元素

var brother3 =  ul.previousElementSibling
console.log(brother3)

10.获取ul的下一个兄弟元素

var brother4 =  ul.nextElementSibling
console.log(brother4)

DOM的增删查

创建一个元素

var p = document.createElement("p")
console.log(p)

2.创建一个新的文本节点

var text = document.createTextNode("erhuo")
console.log(text)

3.给p标签添加一个节点

p.appendChild(text)

4.将p添加到li之前

ul.insertBefore(p,li)

5.将li元素删除

ul.removeChild(li)

6.替换

ul.replaceChild(p,li2)

读取元素的样式

获取当前元素样式

console.log(div.currentStyle.width)
div.style.width="300px"
alert(div.style.backgroundColor)

2.参数：
1.要获取样式的元素
2.可以传递一个伪元素，一般传null

var obj = window.getComputedStyle(div,null)
				console.log(obj.width)
				console.log(obj.backgroundColor)

3.通过该方法读取到样式都是只读的不能修改

obj.width = "500px"
				var g = getStyle(div,"width")
				console.log(g)
			}

定义一个函数：获取指定的元素信息
参数1：指定获取元素信息的元素
参数2：获取元素的样式名

 function getStyle(element,name){
				 if(window.getComputedStyle){
					 return window.getComputedStyle(element,null)[name]
				 }else{
					 return element.currentStyle.name
				 }
			 }

其他样式操作属性

1.1- 获取到元素的宽高时值得类型是Number 不带px 可以直接进行运算
2- 获取元素的宽度和高度，包含内容与内边距
3- 获取的都是可见的宽高
4- 属性是不能进行修改的

获取元素的宽度与高度,包含内容,边框,内边距

var height = dv1.offsetHeight
					// var width = dv1.offsetWidth
					// console.log(height,width)
					
					// var parent = dv1.offsetParent
					// console.log(parent)
					
					// var parent = dv2.offsetParent
					// console.log(parent)
					// console.log(parent.id)
					
					// // 获取当前元素的水平偏移量
					// var left = dv1.offsetLeft
					// // 获取当前元素的垂直偏移量
					// var top = dv1.offsetTop
					// console.log(left,top)

3.获取的是当前元素的滚动区域的宽度与高度

// var height = dv2.scrollHeight
					// var width = dv2.scrollWidth
					// console.log(width,height)
					
					var left = dv1.scrollLeft
					var top = dv1.scrollTop
					console.log(top,left)
					
				}
				
				var left = dv1.scrollLeft
				var top = dv1.scrollTop
				console.log(top,left)
			}