节点关系和动态创建

最新推荐文章于 2024-07-18 15:48:23 发布

cai05

最新推荐文章于 2024-07-18 15:48:23 发布

阅读量364

点赞数 8

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/cai05/article/details/140109610

版权

查询根节点：

语法结构：

document.documentElement

属性：clientHeight:整个窗口高度

<!Doctype html>
<html>
    <head>
        <title></title>
        <meta charset = "utf-8">
    </head>
    <body>
    	<div>div标签块</div>
        <script type = "text/javascript">
            //查询根节点
            var myform = document.documentElement;
            
            //查询根节点属性：窗口高度
            var height = myform.clientHeight; 
            console.log(height);
        </script>
    </body>
</html>

查询body节点：

语法结构：

document.body

属性：clientHeight:整个内容高度

<!Doctype html>
<html>
    <head>
        <title></title>
        <meta charset = "utf-8">
    </head>
    <body>
    	<div>div标签块</div>
        <script type = "text/javascript">
            //查询body节点
            var myform = document.body;
            console.dir(myform);
            //查询body节点属性：内容高度
            var height = myform.clientHeight;
            console.log(height);
        </script>
    </body>
</html>

查询节点

parentNode：父节点

语法结构：

子节点对象.parentNode

firstChild：列表中的第一个节点

语法结构：

父节点对象.firstChild

注意：子节点包含空格和换行符可以使用获取节点前三种方式

lastChild：列表中的最后一个节点

语法结构：

父节点对象.lastChild

注意：子节点包含空格和换行符可以使用获取节点前三种方式

firstElementChild：第一个子元素节点

语法结构：

父节点对象.firstElementChild

使用这个属性会直接获得父元素的第一个子元素节点

lastElementChild：最后一个子元素节点

语法结构：

父节点对象.lastElementChild

使用这个属性会直接获得父元素的最后一个元素节点

childNodes：所有子节点的列表

语法结构：

父节点对象.childNodes

children 返回所有子元素节点组成的伪数组

语法结构：

父节点对象.children

previousSibling：上一个兄弟节点

语法结构：

兄弟节点对象.previousSibling

nextSibling：下一个兄弟节点

语法结构：

兄弟节点对象.nextSibling

previousElementSibling：上一个元素兄弟结点

语法结构：

兄弟结点对象.previousElementSibling

nextElementSibling:下一个元素兄弟结点

语法结构：

兄弟结点对象.nextElementSibling

增加节点

appendChild(node) 追加节点

语法：

父节点. appendChild(node)

insertBefore(newnode,refnode) 插入节点

语法：

父节点.insertBefore(新节点，在具体的节点之前插入)

注意：

追加新节点之前应该创建节点

动态创建节点

createElement()：创建元素节点

语法：document.createElement(”元素名称“)

createAttribute():创建属性节点

createTextNode():创建文本节点

案例：在parent中添加一个新节点

修改节点

replaceChild(newnode,oldnode)：替换节点

语法：

父节点.replaceChild(newnode,oldnode)

案例：用新节点替换旧节点

<!Doctype html>
<html>
    <head>
        <title></title>
        <meta charset = "utf-8">
    </head>
    <body>
    	<ul id = parent>
        	<li>第一行</li>
            <li id = "two">第二行</li>
            <li>第三行</li>
            <li>第四行</li>
        </ul>
        <script type = "text/javascript">
            //用新节点替换旧节点two
            //创建新节点
            //创建元素节点
            var liObj = document.createElement("li");
            //创建属性节点
            liObj.className = "aaa";
            //创建文本节点
            liObj.innerHTML = "<p>我是新增的文本节点段落</p>";
            //查询被替换的旧节点
            var two = document.getElementById("two");
            //替换节点
            	//获取父元素
            var parent = document.getElementById("parent");
            	//用新节点替换旧节点
            parent.replaceChild(liObj,two);
        </script>
    </body>
</html>

删除节点

removeChild(node) ：删除节点

语法：

父节点.removeChild(删除节点)

注意：删除所有子节点，倒着删除

案例：删除two节点

<!Doctype html>
<html>
    <head>
        <title></title>
        <meta charset = "utf-8">
    </head>
    <body>
    	<ul id = parent>
        	<li>第一行</li>
            <li id = "two">第二行</li>
            <li>第三行</li>
            <li>第四行</li>
        </ul>
        <script type = "text/javascript">
            //需求：删除two节点
            //获取父元素
            var parent = document.getElementById("parent");
            //删除指定节点
            	//获取删除节点
            var two = document.getElementById("two");
            	//删除该节点
            parent.removeChild(two);
        </script>
    </body>
</html>

案例：删除parent中所有节

<!Doctype html>
<html>
    <head>
        <title></title>
        <meta charset = "utf-8">
    </head>
    <body>
    	<ul id = parent>
        	<li>第一行</li>
            <li id = "two">第二行</li>
            <li>第三行</li>
            <li>第四行</li>
        </ul>
        <script type = "text/javascript">
            //需求：删除parent中所有节点
            //获取父元素
            var parent = document.getElementById("parent");
           //获取父元素中所有节点
           var child = parent.childNodes;
           //删除所有子节点
            //遍历子元素
            for(var i = child.length-1;i>=0;i--){
                //删除所有子节点
                parent.removeChild(child[i]);
            }
        </script>
    </body>
</html>

cai05

关注

8
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
节点关系和动态创建

语法结构：：clientHeight:整个窗口高度语法结构：clientHeight:整个内容高度：父节点语法结构：子节点对象.parentNode：列表中的第一个节点语法结构：父节点对象.firstChild注意：子节点包含空格和换行符可以使用：列表中的最后一个节点语法结构：父节点对象.lastChild注意：子节点包含空格和换行符可以使用：第一个子元素节点语法结构：父节点对象.firstElementChild使用这个属性会直接获得父元素的第一个子元素节点。
复制链接

扫一扫