欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

DOM中的属性操作、节点的操作讲解

程序员文章站 2022-05-03 09:28:28
DOM中的选择器/获取元和对象的集合: 1.var obox = document.getElementById(“box”) /获取指定元素的ID,ID...

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 获取标签内容