JS-dom结点操作

一、获取dom结点

	//1.通过id获取
    document.getElementById()
    //2.通过class获取
    document.getElementsByClassName()
    //3.通过name属性获取
    document.getElementsByName()
    //4.通过标签名获取
    document.getElementsByTagName()
    //5.通过css选择器方式获取
    document.querySelector()
    document.querySelectorAll()

其中第5种方式适用于IE浏览器，并且获取方式更加灵活。

二、dom结点的常见操作

2.1 获取dom结点的父与子

checkAllBox.parentNode //获取checkAllBox的父Node
checkAllBox.parentElement //获取checkAllBox的父元素
checkAllBox.children  //返回该结点的所有子元素(类数组)

2.2 dom结点创建及增删改

//1.appendChild 插入末尾
li = document.createElement("li")  //创建一个li标签元素
text = document.createTextNode("text") //创建一个文本节点
li.appendChild(text)

//2.insertBefore(新节点，旧结点) 插入指定元素之前

//3.删remove(ele)
bj.parentNode.removeChild(bj);

//4.替换replace(新节点, 旧结点)

//5.改innerHTML
li.innerHTML = "广州";
bj.innerText = "昌平";

2.3 dom结点属性的设置与读取

设置属性
ele.属性 = 'attr'
读取属性
ele.属性

2.4 dom结点获取样式

getComputedStyle(元素,null)

元素.currentStyle[属性]

2.5 dom结点其它常用属性

					 * clientWidth
					 * clientHeight
					 * 	- 这两个属性可以获取元素的可见宽度和高度
					 * 	- 这些属性都是不带px的，返回都是一个数字，可以直接进行计算
					 * 	- 会获取元素宽度和高度，包括内容区和内边距
					 *  - 这些属性都是只读的，不能修改
					 
					 * offsetWidth
					 * offsetHeight
					 * 	- 获取元素的整个的宽度和高度，包括内容区、内边距和边框
					 
					 offsetParent
					- 可以用来获取当前元素的定位父元素
					- 会获取到离当前元素最近的开启了定位的祖先元素
					如果所有的祖先元素都没有开启定位，则返回body
					
					offsetLeft
					- 当前元素相对于其定位父元素的水平偏移量
					offsetTop
					- 当前元素相对于其定位父元素的垂直偏移量
					
					scrollWidth
					scrollHeight
					- 可以获取元素整个滚动区域的宽度和高度
					
					
					
					scrollLeft
						- 可以获取水平滚动条滚动的距离
					scrollTop
						- 可以获取垂直滚动条滚动的距离
						
						//当满足scrollHeight - scrollTop == clientHeight
						//说明垂直滚动条滚动到底了
						
						//当满足scrollWidth - scrollLeft == clientWidth
						//说明水平滚动条滚动到底