本文实例讲述了JavaScript Dom中操作。分享给大家供大家参考,具体如下:
博主将按照增删改查的方式来介绍一下Dom的主要操作。
<强> 1,增加节点
添加节点的操作主要分为3步:
(1)创建要添加的新节点
(2)找到要添加到的父节点
(3)父节点添加新节点
参考代码
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元http-equiv=癤-UA-Compatible”内容=癐E=边缘”比;
& lt; title> & lt;/title>
& lt;链接rel="样式表" href="比;
& lt; script>
函数添加(){//新建要增加的节点
李var=document.createElement(‘李’);
var txt=document.createTextNode(北);
li.appendChild (txt);//找到要添加到的父节点
var ul=document.getElementsByTagName (ul) [0];//添加到父节点
ul.appendChild(李);
}
& lt;/script>
& lt;/head>
& lt; body>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/增加一个节点”在
& lt; ul>
& lt; li>东& lt;/li>
& lt; li>南& lt;/li>
& lt; li>西& lt;/li>
& lt;/ul>
& lt;/body>
& lt;/html>
之前
<强> 2,删除节点
删除节点的操作主要分为3步:
(1)先找到要删除的节点
(2)找到其父节点
(3)调用父节点的removeChild(删除的节点)操作
参考代码
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元http-equiv=癤-UA-Compatible”内容=癐E=边缘”比;
& lt; title> & lt;/title>
& lt;链接rel="样式表" href="比;
& lt; script>
函数德尔(){//找到要删除的节点
var lis=document.getElementsByTagName(‘李’);
var lastli=lis (lis)。长度- 1];//让父节点来进行删除操作
lastli.parentNode.removeChild (lastli);
}
& lt;/script>
& lt;/head>
& lt; body>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/删除最后一个节点”在
& lt; ul>
& lt; li>东& lt;/li>
& lt; li>南& lt;/li>
& lt; li>西& lt;/li>
& lt; li>北& lt;/li>
& lt;/ul>
& lt;/body>
& lt;/html>
之前
<强> 3,修改节点
修改操作主要是修改节点的属性,如修改img节点的src属性
但是有几点需要注意:
(1)如果需要操作dom对象的类属性,应该使用类名属性
document.getElementsByTagName (div) [0]。className=皌est2”;
之前
(2)如果需要修改dom对象的样式,应该使用obj.style.css样式名
document.getElementsByTagName (div) [0] .style。宽度=方法(div.style.width) + 5 +“px”;
之前
(3)遇到有这样带——的样式,如:border-bottom-width,应这样修改样式,将——去掉,然后将——后的首字母改为大写
div.style。borderBottomWidth=方法(div.style.borderBottomWidth) + 5 +“px”;
之前
<强> 4,查找节点
(1)根据id进行查找,返回对象:
test1 . getelementbyid (' ');
之前
(2)根据标签名进行查找,返回对象集合:
document.getElementsByTagName (“p”);
之前
(3)对于表单元素,按照名称值进行查找,返回对象集合:
document.getElementsByName(“用户名”);
之前
(4)根据类名进行查找,返回对象集合:
document.getElementsByClassName (test2);
之前
(5)查找对象的子节点,子节点的时候存在缺陷属性包括文本节点(换行),返回对象集合
警报(. getelementbyid (‘test1) .childNodes.length);//打印包括文本节点的数量
警报(. getelementbyid (‘test1) .children.length);//儿童属性虽然不符合w3c规范,但是浏览器支持良好
之前
(6)查找对象的父节点,使用parentNode,返回单个对象
document.getElementsByTagName (“p”) [0] .parentNode.style。边境=' 1 px固体黑色的;
