1.获取节点:根据元素Id获取元素document.getelementById("元素Id"),值是一个object
根据元素name获取元素document.getelementByName("元素的Name"),值是一个object
根据元素标签获取获取元素document.getelementByTagName("元素标签名,比如div"),值是一个集合
2.根据已经有的节点,来获取跟他相关的节点:获取元素的第一个节点 父节点.firstChild
获取最后一个节点:父节点.lastChild,值是个object
获取所有的子节点:父节点.childNodes,值是个集合
获取节点的前一个节点:兄弟节点.previousSibling,值是个object
获取节点的下一个节点:兄弟节点.nextSibling,值是个object
获取节点的父节点:子节点.parentNode,值是个object
3.创建节点:
创建元素:document.createElement("元素标签名")
4.插入节点:
向子节点列表的末尾添加新的子节点:appendChild("节点");
在节点的前面添加一个节点:insertBefore("要添加的节点","节点(在此节点前面添加)")
替换一个节点:replaceChild("新的节点","将要被替换的节点")
复制节点:需要被复制的节点.cloneNode(true/false),true复制当前节点和气子节点,false仅复制当前节点
删除节点:removeChild("删除的节点")
5.元素的属性操作:
获取属性值:节点.getAttribute("属性名")
设置属性值:节点.setAttribute("属性名","属性值")
删除属性:节点.removeAttribute("属性名")
这是网页的代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-1.7.1.js"></script> <!--这个一定要引用-->
<script>
$(function () {
// 获取节点
// var qw = document.getElementsByTagName("ul");//根据元素标签获取节点
// var a = qw.item(0);
// var a = document.getElementById("qwe");// 根据Id获取节点
var qw = document.getElementsByName("zxc"); // 根据name获取节点
var a = qw.item(0);
// 有些浏览器的childNodes会把文本节点算在里面,过滤childNodes中的文本节点
for (i = 0; i < a.childNodes.length; i++) {
if (a.childNodes[i].nodeType != 1) {
a.removeChild(a.childNodes[i]);
}
}
var b = a.childNodes;// 所有的子节点
var c = a.firstChild; // 第一个子节点
var d = a.lastChild; // 最后个子节点
var e = d.previousSibling; // 获取节点的前一个节点
var f = c.nextSibling; // 取节点的下一个节点
var g = c.parentNode; // 获取节点的父节点
alert(c);
// 输出ul下的文本
for (i = 0; i < b.length; i++) {
if (b[i].nodeType == 1) {
alert(b[i].innerHTML);
}
}
// 创建节点
var h = document.createElement("span");
h.setAttribute("display", "block");
h.innerHTML = "sfdsdfsdf";
// 向ul中插入节点
a.appendChild(h);
// 向d的前面插入节点
d.insertBefore(h);
// 替换节点
a.replaceChild(h, c);
// 复制节点
var v = c.cloneNode(true)
alert(v.innerHTML);
// 获取节点的属性
var j = h.getAttribute("display");
h.removeAttribute("display");
});
</script>
</head>
<body>
<div>
<div id="gf" data-sdf="dsfsdfs">sdfsdfsd</div>
<ul id="qwe" name="zxc">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>