JS DOM
1. DOM概念
DOM(Document Object Model):文档对象模型
整个文档是由一系列节点对象组成一棵树
节点:node
节点包括元素节点(1)、属性节点(2)和文本节点(3)
var th1 =document.getElementById("th1");
alert(th1.nodeType);
alert(th1.nodeName);
alert(th1.nodeValue);
tht1代表一个元素节点(nodeType = 1),nodeName就是标签名(th)nodeValue =null。
var attr1 =th1.getAttributeNode("name");
alert(attr1.nodeType);
alert(attr1.nodeName);
alert(attr1.nodeValue);
getAttributeNode方法是获取元素的属性节点,此时输入的节点类型为属性节点(2),节点名称就是属性名(name),节点值就是属性值(sex)。
var txt1 =th1.firstChild;
alert(txt1.nodeType);
alert(txt1.nodeName);
alert(txt1.nodeValue);
txt1是一个文本节点(3),节点名称固定就是#text,节点值就是文本内容。
1.2获取元素
(1)getElementById
根据元素的id属性来获取元素,获取的是一个元素。
(2)getElementsByTagName
根据标签来获取元素,结果是一个元素集合。
(3)getElementsByClassName
根据class属性来获取元素,结果是一个元素集合。
(4)getElementsByName
根据name属性来获取元素,结果是一个元素集合。
总结:获取元素可以根据标签名来获取、也可以根据id、name、class属性来获取,根据id属性获取一个元素,而其他的获取的是一个元素集合。
document对象支持以上四种,而element对象仅支持getElementByTagName和getElementByClassName。
1.3修改元素
(1)修改内容
function fun() {
//获取指定元素
var p1 =document.getElementById("p1");
p1.innerText ="我被单击了!";
}
通过innerText属性获取或设置标签的内部文本。
function fun() {
//获取指定元素
var p1 =document.getElementById("p1");
p1.innerHTML ="我被单击了!<br/>换行了";
}
也可以通过innerHTML属性获取或设置内部文本。
两者的区别:
innerHTML会按照html规则解析文本,而innerText只是当成普通文本内容。
(2)修改样式
a. xxx.style.yyy
b. xxx.classname= ”……” (相当于修改了class属性)
<body>
<p id="p1">修改样式测试</p>
<input type="button"value="样式一"οnclick="style1()"/>
<input type="button"value="样式二"οnclick="style2()"/>
</body>
<script type="text/javascript">
var p1 =document.getElementById("p1");
function style1(){
p1.className ="style1";
}
function style2(){
p1.className ="style2";
}
</script>
1.4 添加删除元素
(1)createElement :创建一个元素。
createElement(“p”) :创建一个段落。
(2)createTextNode:创建一个文本节点。
createTextNode :(“文本内容”),创建一个值为“文本内容”的文本节点。
(3)appendChild :添加子节点。
(4)removeChild :删除子节点。
添加
<body>
<div id="div1">
</div>
<input type="button"value="添加段落"οnclick="add()"/>
</body>
<script type="text/javascript">
var index = 1;
function add(){
//创建一个段落标签
var p =document.createElement("p");
//创建一个文本节点
var content = "第"+index +"段落";
var txt =document.createTextNode(content);
//将文本节点添加到段落里面
p.appendChild(txt);
//将段落添加到div中
var div1 =document.getElementById("div1");
div1.appendChild(p);
index++;
}
</script>
删除
<body>
<div id="div1">
<p id="p1">第1段</p>
<p id="p2">第2段</p>
<p id="p3">第3段</p>
<p id="p4">第4段</p>
</div>
<input type="button"value="删第二段除"οnclick="del()"/>
</body>
<script type="text/javascript">
function del(){
//先找到父节点
var div1 =document.getElementById("div1");
//再找到要删除的节点
var p2 =document.getElementById("p2");
//将要删除的节点从父节点中移除
div1.removeChild(p2);
}
</script>
这种方法是分别找到父节点和要删除的节点,然后执行删除操作,该方法的一个前提是知道父节点是谁。
那么如果不知道父节点是谁,该如何删除呢?
p2.parentNode.removeChild(p2);
动态添加和动态删除:删除动态添加的奇数段落
思路1:获取div下所有段落,遍历所有段落,把奇数部分删除
<body>
<div id="div1">
</div>
<input type="button"value="添加段落"οnclick="add()"/>
<input type="button"value="删除奇数段落"οnclick="del()"/>
</body>
<script type="text/javascript">
var index = 1;
function add(){
//创建一个段落标签
var p =document.createElement("p");
//创建一个文本节点
var content = "第"+index+"段落";
var txt =document.createTextNode(content);
//将文本节点添加到段落里面
p.appendChild(txt);
//将段落添加到div中
var div1 =document.getElementById("div1");
div1.appendChild(p);
index++;
}
function del() {
var div1 =document.getElementById("div1");
var paras =div1.getElementsByTagName("p");
for(var i in paras){
if((i+1)%2 == 1){}
div1.removeChild((paras[i]));
}
}
这种在初始的时候是可以的,但是随着动态添加或啥拿出的进行,后面的结果就不对了。因为动态删除操作影响了原来的顺序,而程序是按照序号去判断奇偶数的,所以判断很容易出现误判。
思路2:添加时通过设置class属性,然后通过getElementByName或者getElementByClassName来获得奇数行
<body>
<div id="div1">
</div>
<input type="button"value="添加段落"οnclick="add()"/>
<input type="button"value="删除奇数段落"οnclick="del()"/>
</body>
<script type="text/javascript">
var index = 1;
function add(){
//创建一个段落标签
var p = document.createElement("p");
//创建一个文本节点
var content = "第"+index +"段落";
var txt =document.createTextNode(content);
//将文本节点添加到段落里面
p.appendChild(txt);
if(index%2 ==1){
p.setAttribute("class","odd");
}
//将段落添加到div中
var div1 =document.getElementById("div1");
div1.appendChild(p);
index++;
}
function del() {
var div1 =document.getElementById("div1");
var paras = div1.getElementsByClassName("odd");
for(var i = paras.length-1;i>=0;i--){
div1.removeChild(paras[i]);
}
}
</script>
1.5导航
document :是根节点
parentNode :获取父节点
childNodes :获取所有的子节点
firstChild :第一个子节点
lastNode :最后一个子节点
nextElementSivling :所在节点的下一个
previousElentSibling :所在节点的上一个
firstElementChild :所在节点的子节点