JavaScript—DOM基础操作应用—列表的创建和删除

最新推荐文章于 2023-01-24 15:30:57 发布

fuzuxian

最新推荐文章于 2023-01-24 15:30:57 发布

阅读量288

点赞数 1

分类专栏： JavaScript 文章标签： javascript dom js

本文链接：https://blog.csdn.net/image_fzx/article/details/103736931

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

DOM基础

获取 DOM节点
1，获取子节点： childNodes nodeType（节点类型）
children （高版本浏览器）
2，获取父节点： parentNode
3，获取元素在页面上的实际位置: offset Parent

4，获取首尾子节点，有兼容性问题
firstChild、firstElementChild
lastChild 、lastElementChild
5，获取兄弟节点 , 有兼容性问题
nextSibling、nextElementSibling
previousSibling、previousElementSibling

操纵元素属性

元素属性操作
第一种：oDiv.style.display=“block”;
第二种：oDiv.style[“display”]=“block”;
第三种：Dom方式

DOM方式操作元素属性
获取：getAttribute(名称)
设置：setAttribute(名称, 值)
删除：removeAttribute(名称)

创建DOM元素

创建列表
文本：
createElement（标签名）—— 创建节点
父级.insertBefore（子级，子级位置）—— 可应用于倒序插入
父级.appendChild（子级）——应用于尾部插入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <script>
        window.onload=function () {            //  window.onload  !!!!
            var otxt1=document.getElementById('txt1');
            var obutton1=document.getElementById('button1');
            var oUl=document.getElementsByTagName('ul')[0];

            obutton1.onclick=function () {
                var oLi= document.createElement('li');
                var aLi=oUl.getElementsByTagName('li');
                oLi.innerHTML=otxt1.value;

                if(aLi.length>0){              //  从未插入时aLi.length=0  ， 防止第一次插入式找不到aLi
                    oUl.insertBefore(oLi, aLi[0]);    //
                }else{
                    oUl.appendChild(oLi);       //   父级.appendChild(子节点)；
                }
            };
        };
    </script>
<body>
    <input   id="txt1"   type="text"/>
    <input  id="button1"   type="button"  value="创建列表li"/>
    <ul></ul>
</body>
</html>

删除DOM元素

删除列表--JavaScript
removeChild(节点) 删除一个节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除列表</title>
    <script>
        window.onload=function () {
            var  a_array=document.getElementsByTagName('a');
            var  oUl=document.getElementById('ul1');

            for(var i=0; i<a_array.length; i++){
                a_array[i].onclick=function () {
                    oUl.removeChild(this.parentNode);   //  removeChild     parentNode
                };
            }
        };
    </script>
</head>
<body>
    <ul id="ul1">
        <li>哈哈哈<a  href="javascript:;">删除</a></li>
        <li>fzx<a  href="javascript:;">删除</a></li>
        <li>cookie<a  href="javascript:;">删除</a></li>
        <li>COOKIE<a  href="javascript:;">删除</a></li>
        <li>嘻嘻嘻~~<a  href="javascript:;">删除</a></li>
    </ul>
</body>
</html>

fuzuxian

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript—DOM基础操作应用—列表的创建和删除

文本：createElement（标签名）—— 创建节点父级.insertBefore（子级，子级位置）—— 可应用于倒序插入父级.appendChild（子级）——应用于尾部插入<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title...
复制链接

扫一扫

专栏目录