DOM概念 修改元素 获取元素 添加
来源:互联网 发布:我的网络是几g 编辑:程序博客网 时间:2024/04/28 00:15
DOM概念
DOM(document object model):文档对象模型
通过开发者工具的Element标签 也可以查看
通过开发者工具 source和标签页观察
整个文档是由一系列节点队形组成的一棵树。
节点(Node)包括元素节点(1)、属性节点(2)和文本节点(3)
元素节点无属性值
文本节点#text
varth1 =document.getElementById("th1");
alert(th1.nodeType);
alert(th1.nodeName);
alert(th1.nodeValue);
th1代表元素节点(nodeType=1),nodaName就是标签名(th),元素节点的nodeValue=null。
varattr1 =th1.getAttributeNode("name");
alert(attr1.nodeType);
alert(attr1.nodeName);
alert(attr1.nodeValue)
getAttributeNode方法是获取元素的节点,此时输出的节点类型为属性节点(2),节点名称就是属性名(name),节点值就是属性值(sex)
vartxt1 =th1.firstChild;
alert(txt1.nodeType);
alert(txt1.nodeName);
alert(txt1.nodeValue);
txt1是一个文本节点(3),节点名称固定就是#text,节点值就文本内容
11.2 获取元素
(1)getElementByld
根据元素的id属性来获取元素,获取到的是一个元素
(2)getElementByTagName
根据标签名来获取元素,结果是一个元素集合
(3)getElementByClassName
根据标class属性来获取元素,结果是一个元素集合
(4)getElementByName
根据name属性来获取元素,结果是一个元素集合
总结:获取元素可以根据标签名来获取、也可以根据id、name、class属性来获取。根据id属性获取的结果是一个元素,而其他的获取的是一个集合
(5)document对象支持以上四种,而element对象仅仅支持getElementByClassName和getElementByTagName
11.3 修改元素
(1)修改内容
functionfun(){
//获取到指定元素
varp1 =document.getElementById("p1");
p1.innerText="我被单击了!";
}
通过innerText属性可读取或设置标签的内部文本
functionfun(){
//获取到指定元素
varp1 =document.getElementById("p1");
p1.innerHTML="我被单击了!<br>换行了";
}
也可以通过innerHTML属性获取或设置内部文本
两者的区别:innerHTML会按照html规则解析文本,而innerText只当做普通的文本内容。
(2)修改样式
a. xxx.style.yyy
b. xxx.classname = “..............”(相当于修改了class属性)
<body>
<div id="div1">
<p id="p1">捕获和冒泡的演示</p>
</div>
</body>
<script>
vardiv1 =document.getElementById("div1");
varp1 =document.getElementById("p1");
p1.addEventListener("click",click1);
div1.addEventListener("click",click2);
functionclick1(){
alert("段落被单击了");
}
functionclick2(){
alert("div被单击了");
}
11.4 添加删除元素
(1)createElement创建一个元素
createElement(“p”)创建一个段落
(2)createTextNode 创建一个文本节点
createTextNode (“文本内容”)创建一个“文本内容”的文本节点
(3)appendChild添加子节点
(4)removeChild删除子节点
添加
<body>
<div id ="div1">
</div>
<input type="button"value="添加段落"onclick="add()"/>
</body>
<script>
varindex =1;
functionadd(){
//创建一个段落
varp =document.createElement("p");
//创建文本节点
varcontent ="第"+index+"段落";
vartxt =document.createTextNode(content);
//将文本节点添加到段落中
p.appendChild(txt);
//将段落添加到div中
vardiv1 =document.getElementById("div1");
div1.appendChild(p);
index++;
}
删除
<body>
<div id ="div1">
<p id="p1">第一段落</p>
<p id="p2">第二段落</p>
<p id="p3">第三段落</p>
<p id="p4">第四段落</p>
</div>
<input type="button"value="删除第二段"onclick="del()"/>
</body>
<script>
functiondel(){
//先找到父节点div1
vardiv1 =document.getElementById("div1");
//在找到要删除的节点
varp2 =document.getElementById("p2");
//将要删除的节点从父节点中移除
div1.removeChild(p2);
}
这种方法是分别找到父节点和要删除的节点,然后执行删除操作。该方法的一个前提是知道父节点是谁。
那么如果并不知道父节点是谁?该如何删除
functiondel(){
varp2 =document.getElementById("p2");
//将要删除的节点从父节点中移除
p2.parentNode.removeChild(p2);
}
动态添加和动态删除:删除动态添加的奇数段落
思路1 :获取div1下的所有动态段落
这种在初始时是可以的,但是随着动态的添加或删除的进行,后面的结果就不对了。因为动态删除操作影响了原来的顺序,而程序是按照顺序号去判断奇偶性,所以出现判误
思路2:添加时通过设置class属性,然后通过getElementByClassName来获取奇数行
可以从后面往前面删
<body>
<div id ="div1">
</div>
<input type="button"value="添加段落"onclick="add()"/>
<input type="button"value="删除奇数段落"onclick="del()"/>
</body>
<script>
varindex =1;
functionadd(){
//创建一个段落
varp =document.createElement("p");
//创建文本节点
varcontent ="第"+index+"段落";
vartxt =document.createTextNode(content);
//将文本节点添加到段落中
p.appendChild(txt);
if(index%2==1) {
p.setAttribute("Class","odd");
}
//将段落添加到div中
vardiv1 =document.getElementById("div1");
div1.appendChild(p);
index++;
}
functiondel(){
vardiv1 =document.getElementById("div1");
/* var paras = div1.getElementsByTagName("p");
for(var i in paras){
if((i+1)%2 == 1){
div1.removeChild(paras[i]);
}
}*/
varparas =document.getElementsByClassName("odd");
for(vari=paras.length-1;i>=0;i--){
div1.removeChild(paras[i]);
}
}
</script>
11.5导航
document 是根节点
parentNode:获取父节点
childNode:获取所有子节点
firstChild:第一个子节点
lastChild:获取最后一个子节点
<body>
<div name ="第一章">
<p id="p1">第一段<span>第一句</span><span>第二句</span></p>
</div>
<input type="button"value="获取p1父节点的name属性"onclick="fun1()"/>
<input type="button"value="获取子节点的个数"onclick="fun2()"/>
<input type="button"value="显示p1第一个子节点的类型"onclick="fun3()"/>
<input type="button"value="显示p1最后一个子节点的类型"onclick="fun4()"/>
</body>
<script>
varp1=document.getElementById("p1");
//获取父节点
functionfun1(){
varvalue = p1.parentNode.getAttribute("name");
alert(value);
}
//获取子节点
functionfun2(){
varchilds = p1.childNodes;
alert(childs.length);
}
functionfun3(){
alert(p1.firstChild.nodeType)
}
functionfun4(){
alert(p1.lastChild.nodeType)
}
</script>
- DOM概念 修改元素 获取元素 添加
- jquery 获取dom固定元素 添加样式
- 动态添加DOM元素
- DOM添加删除元素
- 循环添加DOM元素
- DOM修改元素
- dom元素的获取
- DOM获取元素大小
- dom元素获取
- DOM元素尺寸获取
- Jsoup获取DOM元素
- 获取DOM元素样式
- JavaScript获取DOM元素
- 获取Dom元素方式
- DOM元素的获取
- jQuery -> 如何【先创建、再修改、后添加】 DOM元素
- JS使用DOM对元素进行添加和修改
- Jquery获取和修改dom元素的属性值
- 关于 ima adpcm 的灵活应用
- 如何自动生成Dump文件
- HDU 6070 Dirt Ratio(二分+线段树 17多校第四场)
- android开发——Fragment跳转activity(带返回值)
- 1111111111
- DOM概念 修改元素 获取元素 添加
- 【BZOJ2631】tree
- shell整理(2)
- iOS开发-修改UITextField的placeholder字体颜色并垂直居中
- Centos7-Minimal安装配置
- Html书写规范
- 设计模式 之 工厂模式
- 检查站点
- js判断is为空