JavaScript及jQuery常用dom操作方法

2024-04-27 14:08:37

字体：大中小

来源：转载

供稿：网友

javaScript及jQuery常用dom操作方法

Javascript 原生方法:

document.createElement() 创建一个元素节点

a.appendChild(b) //将b节点插入到调用节点a的最后面

a.insertBefore(b, c) //接受两个参数, 在a的子节点中, 于c的前面插入b (b和c都为a的子节点)，第一个b为待插入的节点，第二个c指明在哪个节点前面，如果不传入第二个参数，则跟appendChild一样，放在最后。

a.removeChild(b); 由父元素a调用，删除一个子节点b。注意是直接父元素调用，删除直接子元素才有效，删除孙子元素就没有效果了。

a.replaceChild(b, c) //删除子节点c，并用一个新节点b代替它，第一个参数b为新建的节点，第二个节点c为被替换的节点

JavaScript设置属性的方法:

var e = document.getElementById("xx");

1. 使用e.src, e.value, e.className等直接设置属性.

2. 使用setAttribute/getAttribute方法, 如e.setAttribute('src', 'xxx/xx.png'), e.getAttribute('src')

3. 使用attributes属性, 如e.attributes.src.value = 'a.png'

JavaScript获取元素内容:

　　innerText, innerHTML,textContent

element作为元素树的文档时包含的属性 1、firstElementChild 第一个子元素节点 2、lastElementChild 最后一个子元素节点 3、nextElementSibling 下一个兄弟元素节点 4、PReviousElementSibling 前一个兄弟元素节点 5、childElementCount 子元素节点个数量

element作为节点数的文档时包含的属性 1、parentNode 获取该节点的父节点 2、childNodes 获取该节点的子节点数组 3、firstChild 获取该节点的第一个子节点 4、lastChild 获取该节点的最后一个子节点 5、nextSibling 获取该节点的下一个兄弟元素 6、previourssibling 获取该节点的上一个兄弟元素 7、nodeType 节点的类型，9代表Document节点，1代表Element节点，3代表Text节点，8代表Comment节点，11代表DocumentFragment节点 8、nodeVlue Text节点或Comment节点的文本内容 9、nodeName 元素的标签名(如P,SPAN,#text(文本节点),DIV)，以大写形式表示

jQuery操作DOM的方法

创建节点:li1=$("<li></li>") // 创建了一个li标签.

插入节点:

　　ul.append(li); // 将li加入ul末尾

　　li.appendTo(ul); //appendTo() 方法将所有匹配的元素追加到指定的元素中，该方法是append()方法的颠倒

　　ul.prepend(li), li.prependTo(ul) 在父元素的开头添加.

　　li1.after(li2) 将li1 添加在 li2后面, 同理before

　　li2.insertAfter(li2) 将li2添加在li1前端, 同理insertBefore

删除

　　.remove() 删除自己及孩子.

　　.empty() 删除孩子, 保留一个空的自己.

复制