跟小编一起学: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 获取标签内容