正文
js中元素操作的有关内容与对比
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
以下 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()
