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() 删除孩子, 保留一个空的自己.

复制

　　.clone() 复制后新元素不具有复制功能.

　　.clone(true) 复制后新元素有复制功能.

替换

　　replaceWith()和replaceAll().

　　使用replaceWith方法使用后面的元素替换前面的元素，replaceAll方法使用前面的元素替换后面的元素

 

·text() - 设置或返回所选元素的文本内容 
·html() - 设置或返回所选元素的内容（包括 HTML 标记） 
·val() - 设置或返回表单字段的值

.css('font-size' [, '12px']) - 获取或设置css

.attr('name' [, 'what ever name']) - 获取属性, 或设置属性

.removeAttr('name') - 删除属性

.children() - 获取所有孩子

next(),pre(),siblings(), closest()取得最近的匹配元素。

addClass/removeClass/hasClass/

转载于:https://www.cnblogs.com/html5css3js/p/4550666.html