DOM 2020-11-23

DOM Document Object Model 文档对象模型
html标签 == 元素 == 节点 ElementX
修改标签之间的内尔用

a.innerHTML

//单击事件 onclick 鼠标移入 onmouseover
// 根据id  返回 对象
document.getElementById()  
// 根据类名 返回 数组
document.getElementsByClassName()
// 根据name属性值 返回 数组
document.getElementsByName()
// 根据标签 返回 数组
document.getElementsByTagName()
// 获取body标签
var body = document.getElementsByTagName("body")[0]
console.log(body)
			
// body也是document对象的一个属性 ,保存的是body的引用
var body1 = document.body
console.log(body1)
// 获取html根标签
var html = document.documentElement;
console.log(html)
// 根据类名获取指定元素对象
// document.getElementsByClassName(c1)
			
// 根据选择器获取指定元素信息 querySelector
			
var q = document.querySelector(".c1")
console.log(q)
var q1 = document.querySelectorAll(".c1")
console.log(q1)
console.log(q1[0])
// 获取ul下所有的子元素
			var children1 = ul.children
			// 获取ul下所有的子节点
			var children2 = ul.childNodes
			
			// 获取ul的父节点
			var parent1 = ul.parentNode
			// 获取ul的父元素
			var parent2 = ul.parentElement
			
			// 获取ul的第一个子节点
			var first1 = ul.firstChild
			
			// 获取ul的第一个子元素
			var first2 = ul.firstElementChild
			
			// 获取ul的上一个兄弟节点
			var brother1 =  ul.previousSibling
			
			// 获取ul的下一个兄弟节点
			var brother2 =  ul.nextSibling
			
			// 获取ul的上一个兄弟元素
			var brother3 =  ul.previousElementSibling
			
			// 获取ul的下一个兄弟元素
			var brother4 =  ul.nextElementSibling

			//查找所有li节点
			var list = document.getElementsByTagName("li")
			// 创建一个元素
			var p = document.createElement("p")
			console.log(p)
			
			// 创建一个新的文本节点
			var text = document.createTextNode("erhuo")
			console.log(text)
			
			// 给p标签添加一个节点
			p.appendChild(text)
			// 将p添加到li之前
			ul.insertBefore(p,li)
			
			// 将li元素删除
			ul.removeChild(li)
			获取元素的宽度
			getComputedStyle(box , null)["width"];
			通过该方法读取到样式都是只读的不能修改
			clientHeight
			元素的可见高度，指元素的内容区和内边距的高度
			clientWidth
			元素的可见宽度，指元素的内容区和内边距的宽度
			offsetHeight
			整个元素的高度，包括内容区、内边距、边框
			offfsetWidth
			整个元素的宽度，包括内容区、内边距、边框