DOM编程

R࿆ebirth Fire

于 2024-07-31 22:37:26 发布

阅读量130

点赞数 3

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

本文链接：https://blog.csdn.net/2301_77193348/article/details/140833905

版权

DOM编程其实就是用window对象的document属性的相关API完成对页面元素的控制的编程

1.获取页面元素的几种方式

1.1 在整个文档范围内查找元素结点

1.2 在具体元素节点范围内查找子节点

1.3 查找指定子元素节点的父节点

1.4 查找指定元素节点的兄弟节点

2.操作元素属性值

2.1 属性操作

2.2 内部文本操作

3 增删元素

3.1 对页面的元素进行增删操作

<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <script>
    /* 
    1 获得document  dom树
        window.document
    2 从document中获取要操作的元素
        1）直接获取
            var el1 =document.getElementById("username") // 根据元素的id值获取页面上唯一的一个元素
            var els =document.getElementsByTagName("input") // 根据元素的标签名获取多个同名元素
            var els =document.getElementsByName("aaa") // 根据元素的name属性值获得多个元素            var els =document.getElementsByClassName("a") // 根据元素的class属性值获得多个元素
        2）间接获取
            var cs=div01.children // 通过父元素获取全部的子元素
            var firstChild =div01.firstElementChild  // 通过父元素获取第一个子元素
            var lastChild = div01.lastElementChild   // 通过父元素获取最后一个子元素
            var parent = pinput.parentElement  // 通过子元素获取父元素
            var pElement = pinput.previousElementSibling // 获取前面的第一个元素
            var nElement = pinput.nextElementSibling // 获取后面的第一个元素
    3 对元素进行操作
        1）操作元素的属性   元素名.属性名=""
        2）操作元素的样式   元素名.style.样式名=""  样式名"-" 要进行驼峰转换
        3）操作元素的文本   元素名.innerText   只识别文本
                           元素名.innerHTML   同时可以识别html代码
        4）增删元素
            var element =document.createElement("元素名") // 创建元素
            父元素.appendChild(子元素)               // 在父元素中追加子元素
            父元素.insertBefore(新元素,参照元素)     // 在某个元素前增加元素
            父元素.replaceChild(新元素,被替换的元素) // 用新的元素替换某个子子元素
            元素.remove()                            // 删除当前元素
    */
   functionaddCs(){
        // 创建一个新的元素
        // 创建元素
        varcsli=document.createElement("li") // <li></li>
        // 设置子元素的属性和文本 <li id="cs">长沙</li>
        csli.id="cs"
        csli.innerText="长沙"
        // 将子元素放入父元素中
        varcityul=document.getElementById("city")
        // 在父元素中追加子元素
        cityul.appendChild(csli)
   }
   functionaddCsBeforeSz(){
        // 创建一个新的元素
        // 创建元素
        varcsli=document.createElement("li") // <li></li>
        // 设置子元素的属性和文本 <li id="cs">长沙</li>
        csli.id="cs"
        csli.innerText="长沙"
        // 将子元素放入父元素中
        varcityul=document.getElementById("city")
        // 在父元素中追加子元素
        //cityul.insertBefore(新元素,参照元素)
        varszli=document.getElementById("sz")
        cityul.insertBefore(csli,szli)
   }
   functionreplaceSz(){
        // 创建一个新的元素
        // 创建元素
        varcsli=document.createElement("li") // <li></li>
        // 设置子元素的属性和文本 <li id="cs">长沙</li>
        csli.id="cs"
        csli.innerText="长沙"
        // 将子元素放入父元素中
        varcityul=document.getElementById("city")
        // 在父元素中追加子元素
        //cityul.replaceChild(新元素,被替换的元素)
        varszli=document.getElementById("sz")
        cityul.replaceChild(csli,szli)
   }
   functionremoveSz(){
        varszli=document.getElementById("sz")
        // 哪个元素调用了remove该元素就会从dom树中移除
        szli.remove()
   }
   functionclearCity(){      
        varcityul=document.getElementById("city")
        /* var fc =cityul.firstChild
        while(fc != null ){
            fc.remove()
            fc =cityul.firstChild
        } */
        cityul.innerHTML=""
        //cityul.remove()
   }   
   </script>
</head>
<body>
    <ulid="city">
        <liid="bj">北京</li>
        <liid="sh">上海</li>
        <liid="sz">深圳</li>
        <liid="gz">广州</li>
    </ul>
    <hr>
    <!-- 目标1 在城市列表的最后添加一个子标签  <li id="cs">长沙</li>  -->
    <buttononclick="addCs()">增加长沙</button>
    <!-- 目标2 在城市列表的深圳前添加一个子标签  <li id="cs">长沙</li>  -->     
    <buttononclick="addCsBeforeSz()">在深圳前插入长沙</button>
    <!-- 目标3  将城市列表的深圳替换为  <li id="cs">长沙</li>  -->
    <buttononclick="replaceSz()">替换深圳</button>
    <!-- 目标4  将城市列表删除深圳  -->
    <buttononclick="removeSz()">删除深圳</button>
    <!-- 目标5  清空城市列表  -->
    <buttononclick="clearCity()">清空</button>
</body>
</html>