2.获取Node的方式
1 通过获取元素的方式获取Node
1.document.getElementById("elementID")
2.document.getElementBytagName("tagname")
3.document.getElementByname("name")
4.document.getElementByclassName("className")
2 通过Node关系属性获得引用
1 object.parentNode; //获取该元素的父节点
2 object.childNode; //获取对象所有的子节点,只包含次级 节点
3 object.firstChild; //获取该元素第一个子节点
4 object.lastChild; //获取该元素最后一个节点
5 object.nextSibling; //获取该下一个兄弟节点
6 object.previousSibling;//获取该元素上一个兄弟节点
例如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.οnlοad=function() {
var li=document.getElementsByTagName("li");
console.log(li);//返回一个数组
console.log(li.length); 返回一个数组长度
console.log(li[0]) 获取LI的第一个元素的借点对象
var body=document.getElementsByTagName("body")[0];
console.log(body);
var all=document.getElementsByTagName("*");
console.log(all.length);
var ccc=document.getElementsByName("test")[0];
console.log(ccc.value);
alert(ccc.checked);
var a1 = document.getElementById("a1");
alert(a1.className);//获取DIV的CLASSNAME
alert(a1.getAttribute("className"));//firfox gogole 不能获取
alert(a1.getAttribute("class")); //IE 不能获取
if (box.getAttribute("class") == null) {
alert(a1.getAttribute("className"));
}
else {
alert(a1.getAttribute("class"))
}
};
</script>
</head>
<body>
<!--<ul>
<li>2</li>
<li>23</li>
<li>232</li>
<li>24</li>
<li>232</li>
</ul>
<input type="checkbox" name="test" value="risoo" id="ccc" checked="checked">-->
<div id="a1" class="div1" style="color: blue" bbb="ggg"></div>
</body>
</html>
2.3 Node属性
nodeType(节点类型)
nodeName( 节点名)
nodeValue(节点值)
tips:其中元素节点值为1,属性节点值为2,文本节点值为3,注释节点值为8,文档节点值为9
3.NODE的增丶删丶查丶改
3.1创建NODE
1.创建元素节点
document.creatElement(TagName);
2.创建属性节点
document.createAttnbute(attr);
object.attr=var;
object.setAttribute(attr.var);
3.创建文本节点
object.lnnerText = var;
document.createTextNode(text);
3.2添加NODE
1.parentNode.appendChild(newNode);
说明:向节点的子节点列表的末尾添加新的子节点。如果文档树中已经存在了newNode,它将从文档中删除,然后重新插入新的位置。
可以使用appendChild()方法移除元素到另外一个元素。
2.parentNode.insertBefore(newNode.existingNOde);
说明:如果文档树中已经存在了newNode,它将从文档中删除,然后重新插入新的位置。
3.parentNode.replaceChild(newNode,oldNode)
说明:如果文档树中已经存在了newNode,它将从文档中删除,然后重新插入新的位置。
4.parentNode.removeChild(node);
说明:从子节点列表中删除某个节点
1 通过获取元素的方式获取Node
1.document.getElementById("elementID")
2.document.getElementBytagName("tagname")
3.document.getElementByname("name")
4.document.getElementByclassName("className")
2 通过Node关系属性获得引用
1 object.parentNode; //获取该元素的父节点
2 object.childNode; //获取对象所有的子节点,只包含次级 节点
3 object.firstChild; //获取该元素第一个子节点
4 object.lastChild; //获取该元素最后一个节点
5 object.nextSibling; //获取该下一个兄弟节点
6 object.previousSibling;//获取该元素上一个兄弟节点
例如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.οnlοad=function() {
var li=document.getElementsByTagName("li");
console.log(li);//返回一个数组
console.log(li.length); 返回一个数组长度
console.log(li[0]) 获取LI的第一个元素的借点对象
var body=document.getElementsByTagName("body")[0];
console.log(body);
var all=document.getElementsByTagName("*");
console.log(all.length);
var ccc=document.getElementsByName("test")[0];
console.log(ccc.value);
alert(ccc.checked);
var a1 = document.getElementById("a1");
alert(a1.className);//获取DIV的CLASSNAME
alert(a1.getAttribute("className"));//firfox gogole 不能获取
alert(a1.getAttribute("class")); //IE 不能获取
if (box.getAttribute("class") == null) {
alert(a1.getAttribute("className"));
}
else {
alert(a1.getAttribute("class"))
}
};
</script>
</head>
<body>
<!--<ul>
<li>2</li>
<li>23</li>
<li>232</li>
<li>24</li>
<li>232</li>
</ul>
<input type="checkbox" name="test" value="risoo" id="ccc" checked="checked">-->
<div id="a1" class="div1" style="color: blue" bbb="ggg"></div>
</body>
</html>
2.3 Node属性
nodeType(节点类型)
nodeName( 节点名)
nodeValue(节点值)
tips:其中元素节点值为1,属性节点值为2,文本节点值为3,注释节点值为8,文档节点值为9
3.NODE的增丶删丶查丶改
3.1创建NODE
1.创建元素节点
document.creatElement(TagName);
2.创建属性节点
document.createAttnbute(attr);
object.attr=var;
object.setAttribute(attr.var);
3.创建文本节点
object.lnnerText = var;
document.createTextNode(text);
3.2添加NODE
1.parentNode.appendChild(newNode);
说明:向节点的子节点列表的末尾添加新的子节点。如果文档树中已经存在了newNode,它将从文档中删除,然后重新插入新的位置。
可以使用appendChild()方法移除元素到另外一个元素。
2.parentNode.insertBefore(newNode.existingNOde);
说明:如果文档树中已经存在了newNode,它将从文档中删除,然后重新插入新的位置。
3.parentNode.replaceChild(newNode,oldNode)
说明:如果文档树中已经存在了newNode,它将从文档中删除,然后重新插入新的位置。
4.parentNode.removeChild(node);
说明:从子节点列表中删除某个节点