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

时间:2021-11-13 22:50:32

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

1 创建元素/节点

A:

元素节点- createElement( )
文本节点 - createTextNode()
例如: var a = document.createElement("a");
a.href = http://baidu.com;
a.innerHTML = "go to baidu";

B:

$(HTML代码)
例如: $li = $("<a href="http://baidu.com">go to baidu</a>);

2 追加新元素节点

A:

parentelement.appendChild(elem);
例如: var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);

B:

append(content)
appendTo()

3 删除节点

A:

parentelement.removeChild(子节点)

B:

remove()【删除自身以及后代节点】
eg:$(“#bj”).remove();
empty()【删除后代节点,保留自身节点】

4 获取属性

A:

element.getAttribute() 方法返回指定属性名的属性值。
例如: document.getElementsByTagName("a")[0].getAttribute("target");

B:

attr( “属性名”)

5 设置属性

A:

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

B:

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

6 删除属性

A:

removeAttribute(“属性名”)

B:

removeAttr(“属性名”)

7 获取/设置元素内容

A:

innerHTML、textContent、innerText
例如: document.getElementsByTagName("BUTTON")[0].textContent; //获得第一个 button 元素的文本内容:

B:

html()、text()

8 获取/设置元素样式

A:

获取:
elem.style.属性名

设置:

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

【仅针对内联样式】

B:

获取: css(attrName)
设置:(一个或多个)
css(attrName,attrValue)
css({
attrName : attrValue,
attrName : attrValue
})"

9 返回元素父节点

A:

父节点 - parentNode
子节点
所有子节点 - childNodes
第一个子节点 - firstChild
最后一个子节点 - lastChild
兄弟节点
上一个兄弟节点 - previousSibling
下一个兄弟节点 - nextSibling

B:

父元素 - parent()
祖先元素 - parents()
子元素 - children()
兄弟元素
上一个兄弟元素 - prev()
下一个兄弟元素 - next()
所有兄弟元素 - siblings()

未完待续。。。。