你的位置:首页 > Java教程

[Java教程]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/