JavaScript之操作DOM对象添加节点删除节点替换节点父节点子节点

最新推荐文章于 2023-06-26 22:22:38 发布

小白葫芦

最新推荐文章于 2023-06-26 22:22:38 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/qq_40791843/article/details/93477033

版权

DOM

HTML DOM
　当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）；
　文档：DOM的D
　如果没有ducument文档，DOM就无从谈起。当创建了一个网页并把它加载到web浏览器中，DOM就悄然而生，它会根据你的网页文档创建一个文档对象。
　对象：DOM的O
　JavaScript中的对象分为三种，用户自定义对象，内在对象（如：Array，Math等），宿主对象（由浏览器提供的对象，最基础的就是window对象）。
　模型：DOM的M
　代表某种事物的表现形式。
　DOM把文档分为一棵树（节点树）。
　如下图：

在这里插入图片描述
2. DOM操作HTML
　2.1 JavaScript 能够改变页面中的所有HTML元素；
　2.2 JavaScript 能够改变页面中的所有HTML属性；
　2.3 JavaScript 能够改变页面中的所有CSS样式；
　2.4 JavaScript 能够对页面中的所有事件作出反应；
3. DOM主要是围绕元素节点和属性节点的增删改查。
　 3.1 查
　在对DOM进行增删改查之前，首先要找到对应的元素：

<script>
	getElementByID();//通过属性id查到节点，单个节点
	getElementByTagName()//通过标签查找数组 得到节点数组
	getElementByName()//通过name属性得到节点数组
	childNodes();//获取子节点列表 NodeList
	firstChild();//获取第一个子节点
	lastChild();//获取最后一个子节点
	parentNode();//返回父节点
	ownerDocument();//返回祖先节点 整个document
	previousSibling();//返回前一个节点 如果没有则返回null
	nextSibling();//返回后一个节点
</script>

3.2 增

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM</title>
</head>
<body>
    <p name="pname">Hello</p>
    <p name="pname">Hello</p>
    <p name="pname">Hello</p>
    <p name="pname">Hello</p>
    <div id="div">
        <p id="pid">div的p元素</p>
        <a id="aid" title="得到了a标签的属性">hello</a>
 	    <a id="aid2">aid2</a>
    </div>
    <ul>
        <li>  1</li>
        <li>  2</li>
        <li>  3</li>
        <li>  4</li>
        <li>  5</li>
    </ul>
    <script>
        function createNode() {
            var body = document.body;
            var input = document.createElement("input");
            input.type = "button";
            input.value = "创建元素的按钮";
            //将添加的节点 添加至body 子节点
            body.appendChild(input);
        }

        function addNode() {
            var div = document.getElementById("div");
            var node = document.getElementById("pid");
            var newNode = document.createElement("p");
            newNode.innerHTML = "动态添加一个p元素";
            //动态添加一个p元素 将p元素添加到 node 节点之前
            div.insertBefore(newNode,node);
        }
       
    </script>
</body>
</html>

3.3 删

<script>
	function removeChild() {
            var div = document.getElementById("div");
            //要删除div的子节点 p节点是div的第一个子节点 第0个子节点是空项
            var p = div.removeChild(div.childNodes[1]);
        }
</script>

3.4 改

<script>
	function setAttr() {
            var node = document.getElementById("aid2");
            node.setAttribute("title","动态设置a的title属性");
            var attr = node.getAttribute("title");
            alert(attr);
        }
        function getName() {
            var count1 = document.getElementsByTagName("p");//类似于name 属性
            var count = document.getElementsByName("pname");
            alert(count.length);//4
            var p = count[0];
            p.innerHTML = "world";//第一个元素 被修改成world
        }
        
</script>

获得父节点

<script>
function getParentNode() {
            var p = document.getElementById("pid");
            alert(p);//[object HTMLParagraphElement]
            alert(p.parentNode.nodeName);//DIV  获得父节点的标签名
}
</script>

获得子节点

<script>
function getChildNode() {
            var childNode = document.getElementsByTagName("ul")[0].childNodes;
            alert(childNode.length);// 11 因为ul和li后面都有空白项 总共6个 加上li标签 总共11个
            //nodeType 返回1表示元素节点 返回2表示属性节点
            alert(childNode[1].nodeType);//1
 }
 </script>