js中元素操作的有关内容与对比

以下 A：代表原生js B:代表jQuery

1 创建元素／节点

元素节点- createElement( )

文本节点 - createTextNode()

例如：

    var a = document.createElement("a");

    a.href = http://baidu.com;

    a.innerHTML = "go to baidu";

$(HTML代码)

例如：

$li = $("<a href="http://baidu.com">go to baidu</a>);

2 追加新元素节点

parentelement.appendChild(elem)；

例如：

    var para=document.createElement("p");

    var node=document.createTextNode("这是新段落。");

    para.appendChild(node);

append(content)

appendTo()

3 删除节点

parentelement.removeChild(子节点)

remove()【删除自身以及后代节点】

eg:$(“#bj”).remove();

empty()【删除后代节点，保留自身节点】

4 获取属性

element.getAttribute() 方法返回指定属性名的属性值。

例如：

document.getElementsByTagName("a")[0].getAttribute("target");

attr( “属性名”)

5 设置属性

setAttribute(“属性名”,”属性值”)

attr(“属性名”,”属性值”)

6 删除属性

removeAttribute(“属性名”)

removeAttr(“属性名”)

7 获取/设置元素内容

innerHTML、textContent、innerText

例如：

document.getElementsByTagName("BUTTON")[0].textContent; //获得第一个 button 元素的文本内容：

html()、text()

8 获取/设置元素样式

获取：

elem.style.属性名

设置：

elem.style.属性名=”值 ”;

【仅针对内联样式】

获取: css(attrName)

设置：（一个或多个）

css(attrName,attrValue)

css({

  attrName : attrValue，

  attrName : attrValue

})"

9 返回元素父节点

父节点 - parentNode

子节点

    所有子节点 - childNodes

    第一个子节点 - firstChild

    最后一个子节点 - lastChild

兄弟节点

    上一个兄弟节点 － previousSibling

    下一个兄弟节点 - nextSibling

父元素 - parent()

祖先元素 - parents()

子元素 - children()

兄弟元素

    上一个兄弟元素 - prev()

    下一个兄弟元素 - next()

    所有兄弟元素 - siblings()

巴特西

js中元素操作的有关内容与对比

1 创建元素／节点

2 追加新元素节点

3 删除节点

4 获取属性

5 设置属性

6 删除属性

7 获取/设置元素内容

8 获取/设置元素样式

9 返回元素父节点

未完待续。。。。

最新文章

热门文章