dom的操作

dom的增删改查

            // 创建一个元素
			var p = document.createElement("p")
			console.log(p)
			
			// 创建一个新的文本节点
			var text = document.createTextNode("erhuo")
			console.log(text)
			
			// 给p标签添加一个节点
			p.appendChild(text)
			
			
			var ul = document.getElementsByTagName("ul")[0]
			var li = ul.getElementsByTagName("li")[0]
			// 在指定元素之前添加新创建的元素
			// 将p添加到li之前
			// ul.insertBefore(p,li)
			
			// 将li元素删除
			// ul.removeChild(li)
			
			var li2 = ul.getElementsByTagName("li")[1]
			// 将李四替换为erhuo 参数一：要替换的内容  参数2：被替换的内容
			ul.replaceChild(p,li2)

dom操作css

            var dv = document.getElementById("dv")
			// 100 X 100 粉色
			dv.style.width = "100px"
			dv.style.height = "100px"
			dv.style.backgroundColor = "yellowgreen"

读取元素样式

            var div = document.getElementsByTagName("div")[0]
			var btn = document.getElementById("btn")
			btn.onclick = function(){
				// console.log(div.currentStyle.width)
				// div.style.width="300px"
				// alert(div.style.backgroundColor)
				// 获取当前元素样式
				
				// 这个方法是window对象的方法，可以返回一个对象，这个对象中保存着当前元素生效样式
				/* 
				参数：
								1.要获取样式的元素
								2.可以传递一个伪元素，一般传null 
				 */
				var obj = window.getComputedStyle(div,null)
				console.log(obj.width)
				console.log(obj.backgroundColor)
				
				//  通过该方法读取到样式都是只读的不能修改
				// 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
				 }
			 }

其他样式操作属性

              window.onload = function(){
				var btn01 = document.getElementById("btn01")
				var dv1 = document.getElementById("dv1")
				
				btn01.onclick = function(){
					/* 
					 1- 获取到元素的宽高时 值得类型是Number 不带px 可以直接进行运算
					 2- 获取元素的宽度和高度，包含内容与内边距
					 3- 获取的都是可见的宽高
					 4- 属性是不能进行修改的
					 */
					var height = dv1.clientHeight
					var width = dv1.clientWidth
					console.log(height,width)
					
					/* 
						1- 获取元素的宽度与高度,包含内容,边框,内边距
					 */
					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)
					 
					// 获取的是当前元素的滚动区域 的宽度与高度
					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)
			}