DOM中的属性操作、节点的操作讲解
DOM中的选择器/获取元和对象的集合:
1.var obox = document.getElementById(“box”) /获取指定元素的ID,ID选择的特性眼瞎行为：只能选择第一个符合条件的元素/
2.var abox = document.getElementsByClassName(“box”);/*class选择器返回的是一个数组,哪怕只有一个元素,也是数组/
3.var ap = document.getElementsByTagName(“p”) /元素选择器,返回数组/
4.var ainput = document.getElementsByName(“user”); /name属性选择器,返回数组/
5.var ap = document.querySelectorAll("#box"); /*返回数组,什么都能选择*/
6.var obox = document.querySelector(".box"); /*返回单个元素*/
DOM中的属性操作:
getAttribute() 获取属性值 obj.getAttribute(“属性名”) 不能操作值为布尔类型的属性 例如： checked selected
setAttribute() 设置属性
用法：
obj.setAttribute( “属性名”,”值” );
removeAttribute() 删除某个元素的属性 obj.removeAttribute(“属性名”); 一般删除的是通过setAttribute方法设置的属性
对象.attributes //获得所有属性节点，返回一个数组(获得该元素节点的所有属性,数组循环取值)
节点指针:
1.oDiv.children; /根据腹肌选择所有子集,返回数组/
2.oSpan.parentNode; /返回一个元素的父元素/
3.对象.childNodes /返回所有元素的子节点的集合,包括空白节点/
节点的属性:
节点类型(nodeType) 节点名字(nodeName) 节点值(nodeValue)
元素节点 1 标签名 null
文本节点 3 #text 文本
注释节点 8 #comment 注释的文字
文档节点 9 #document null
属性节点 2 属性名 属性值
高级节点指针/节点选取方式:
对象.firstChild
对象.lastChild
对象.firstElementChild
对象.lastElementChild
对象.previousSibling /*上一个兄弟节点*/
对象.nextSibling /*获得下一个兄弟节点*/
对象.prveiousElementSibling /*获得上一个兄弟节点*/ previous以前的 蛇不宁 兄弟
对象.nextElementSibling /*获得下个兄弟节点*/
对象.ownerDocument /*只需要了解获取该节点的文档根节点，相当与 document*/
节点的操作:
-createElement 创建元素节点 document.createElement(元素标签)
创建节点 -createAttribute 创建属性节点 document.createAttribute(元素属性)
-createTextNode 创建文本节点 document.createTextNode(文本内容)
--appendChild 在已知节点末尾添加 appendChild(添加的节点)
插入节点
--insertBefore 在已知节点前插入一个新节点insertBefore(添加的节点)
替换节点 ---replaceChild 将某个子节点替换成另一个 replaceChicd(要插入的新元素,要被替换的老元素)
复制节点 ---cloneNode 复制指定节点的副本 需要被复制的节点.cloneNode(true/false)
当为true时复制当前元素及其所有子节点 false时仅复制当前节点
删除节点 ---- 简单的 元素.remove 直接删除当前元素
获取元素具有的定位属性:
1..offsetWidth/offsetHeight：元素实际宽度/高
2.clientWidth/clientHeight：元素视窗宽度/高度
3.scrollLeft/scrollTop 滚动条距离浏览器顶部的距离
4.offsetLeft：获取元素相对具有定位属性
5.offsetTop：定位属性的top
6. offsetParent：获取元素的最近的具有定位属性的包含快
鼠标坐标属性:
pageX / pageY 距离文档窗口的距离
clientX / clientY 距离浏览器窗口的距离 当页面没有滚动条时 结果和pageY一样
offsetX / offsetY 距离目标元素的内部偏移
screenX / screenY 距离屏幕窗口的距离Z
js操作页面元素:
操作样式：
obj.style.样式名 = 值 设置样式 操作一个样式
obj.style.cssText = “width:100px;height:200px;font-size:30px;”
obj.style.样式名 获取样式（紧限于行内样式的px值获取）
属性（标签上的属性）操作 ：
obj.属性名 = 值 设置属性
obj.属性名 获取属性值
内容操作：
表单内容操作：
obj.value = 值 设置表单内容
obj.value 获取表单的内容
普通标签的内容操作：
obj.innerHTML = 值 设置标签内容
obj.innerHTML 获取标签内容