DOM增删改操作

最新推荐文章于 2021-01-28 17:28:36 发布

407指导员

最新推荐文章于 2021-01-28 17:28:36 发布

阅读量341

点赞数 1

分类专栏： # DOM 文章标签： javascript

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/109403974

版权

DOM 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

dom的增删改操作

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>dom增删改</title>
    <link rel="stylesheet" type="text/css" href="style/css2.css"/>
    <script type="text/javascript">

        window.onload = function () {
            /*公共绑定函数*/
            function myClick(idStr, fun) {
                let btn = document.getElementById(idStr);
                btn.onclick = fun;

            }

            //创建一个"广州"节点,添加到#city下
            myClick("btn01", function () {
                //创建广州节点<li>广州<li>
                //第一步创建li元素节点
                /**
                 * document.createElement()
                 * 可以用于创建一个元素节点对象
                 * 它需要一个标签名作为对象，将会根据标签名创建元素节点对象
                 * 并将创建好的对象作为返回值返回
                 */
                let li = document.createElement("li");
                //第二部创建"广州"文本节点
                /**
                 * document.creatTextNode()
                 * 可以用来创建一个文本节点
                 * 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
                 */
                let gzText = document.createTextNode("广州");
                //第三步，将文本节点放入li节点内，认父
                /**
                 * appendChild()
                 *   -向父元素中添加一个新的子节点
                 *   -用法：父节点.appendChild(子元素);
                 */
                li.appendChild(gzText);
                //第四步，还要把li添加到id为city的ul标签下
                let city = document.getElementById("city");
                city.appendChild(li);

            });

            //将"广州"节点插入到#bj前面
            myClick("btn02", function () {
                let li = document.createElement("li");
                let gzText = document.createTextNode("广州");
                li.appendChild(gzText);
                //获取id为bj节点
                let bj = document.getElementById("bj");
                /**
                 * insertBefore()
                 *  -可以在指定子节点前插入新的子节点
                 *  -语法：
                 *          父节点.insertBefore(新插入节点，在其之前插入的节点)
                 */
                    //获取#city
                let city = document.getElementById("city");
                city.insertBefore(li, bj);
            });

            //使用"广州"节点替换#bj节点
            myClick("btn03", function () {
                let li = document.createElement("li");
                let gzText = document.createTextNode("广州");
                li.appendChild(gzText);
                //获取id为bj节点
                let bj = document.getElementById("bj");
                /**
                 * replaceChild()
                 *  -可以用新节点替换指定子节点
                 *  -语法：
                 *          父节点.replaceChild(新插入节点，在其之前插入的节点)
                 */
                    //获取#city
                let city = document.getElementById("city");
                city.replaceChild(li, bj);

            });

            //删除#bj节点
            myClick("btn04", function () {
                //获取#bj
                let bj = document.getElementById("bj");
                //获取city
                let city = document.getElementById("city");
                /**
                 * removeChild()
                 *   -删除一个子节点
                 *   -语法：
                 *         父节点.removeChild(子节点)
                 *         子节点.parentNode.removeChild(子节点)
                 *         第二种更常用，不用知道其父节点。
                 */
                //city.removeChild(bj);
                //如果不知道
                bj.parentNode.removeChild(bj);
            });

            //读取#city内的HTML代码
            myClick("btn05", function () {
                //获取city
                let city = document.getElementById("city");
                alert(city.innerHTML);

            });

            //设置#bj内的HTML代码
            myClick("btn06", function () {
                let bj = document.getElementById("bj");
                bj.innerHTML = "武汉"
            });

            //向city中添加广州
            myClick("btn07",function () {
                //获取#city
                let city = document.getElementById("city");
                /**
                 * 使用innerHTML也可以完成DOM增删改的相关操作
                 * 这种方式会影响整个ul标签而btn01中的方法只影响最后一个添加的标签
                 * 一般两种方式结合使用
                 */
                //city.innerHTML = city.innerHTML +"<li>广州</li>";
                //创建一个li
                let li = document.createElement("li");
                //向li中添加文本
                li.innerHTML= "广州";
                //将li添加到city中
                city.appendChild(li);
            });

        };





    </script>

</head>
<body>
<div id="total">
    <div class="inner">
        <p>
            你喜欢哪个城市?
        </p>

        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>东京</li>
            <li>首尔</li>
        </ul>

    </div>
</div>
<div id="btnList">
    <div>
        <button id="btn01">创建一个"广州"节点,添加到#city下</button>
    </div>
    <div>
        <button id="btn02">将"广州"节点插入到#bj前面</button>
    </div>
    <div>
        <button id="btn03">使用"广州"节点替换#bj节点</button>
    </div>
    <div>
        <button id="btn04">删除#bj节点</button>
    </div>
    <div>
        <button id="btn05">读取#city内的HTML代码</button>
    </div>
    <div>
        <button id="btn06">设置#bj内的HTML代码</button>
    </div>
    <div>
        <button id="btn07">创建一个"广州"节点,添加到#city下</button>
    </div>
</div>
</body>
</html>

@CHARSET "UTF-8";

body {
   width: 800px;
   margin-left: auto;
   margin-right: auto;
}

button {
   width: 300px;
   margin-bottom: 10px;
}

#btnList {
   float:left;
}

#total{
   width: 450px;
   float:left;
}

ul{
   list-style-type: none;
   margin: 0px;
   padding: 0px;
}

.inner li{
   border-style: solid;
   border-width: 1px;
   padding: 5px;
   margin: 5px;
   background-color: #99ff99;
   float:left;
}

.inner{
   width:400px;
   border-style: solid;
   border-width: 1px;
   margin-bottom: 10px;
   padding: 10px;
   float: left;
}

Element对象属性和方法

下面的属性和方法可用于所有 HTML 元素上：

属性 / 方法	描述
element.accessKey	设置或返回元素的快捷键。
element.appendChild()	向元素添加新的子节点，作为最后一个子节点。
element.attributes	返回元素属性的 NamedNodeMap。
element.childNodes	返回元素子节点的 NodeList。
element.className	设置或返回元素的 class 属性。
element.clientHeight	返回元素的可见高度。
element.clientWidth	返回元素的可见宽度。
element.cloneNode()	克隆元素。
element.compareDocumentPosition()	比较两个元素的文档位置。
element.contentEditable	设置或返回元素的文本方向。
element.dir	设置或返回元素的内容是否可编辑。
element.firstChild	返回元素的首个子。
element.getAttribute()	返回元素节点的指定属性值。
element.getAttributeNode()	返回指定的属性节点。
element.getElementsByTagName()	返回拥有指定标签名的所有子元素的集合。
element.getFeature()	返回实现了指定特性的 API 的某个对象。
element.getUserData()	返回关联元素上键的对象。
element.hasAttribute()	如果元素拥有指定属性，则返回true，否则返回 false。
element.hasAttributes()	如果元素拥有属性，则返回 true，否则返回 false。
element.hasChildNodes()	如果元素拥有子节点，则返回 true，否则 false。
element.id	设置或返回元素的 id。
element.innerHTML	设置或返回元素的内容。
element.insertBefore()	在指定的已有的子节点之前插入新节点。
element.isContentEditable	设置或返回元素的内容。
element.isDefaultNamespace()	如果指定的 namespaceURI 是默认的，则返回 true，否则返回 false。
element.isEqualNode()	检查两个元素是否相等。
element.isSameNode()	检查两个元素是否是相同的节点。
element.isSupported()	如果元素支持指定特性，则返回 true。
element.lang	设置或返回元素的语言代码。
element.lastChild	返回元素的最后一个子元素。
element.namespaceURI	返回元素的 namespace URI。
element.nextSibling	返回位于相同节点树层级的下一个节点。
element.nodeName	返回元素的名称。
element.nodeType	返回元素的节点类型。
element.nodeValue	设置或返回元素值。
element.normalize()	合并元素中相邻的文本节点，并移除空的文本节点。
element.offsetHeight	返回元素的高度。
element.offsetWidth	返回元素的宽度。
element.offsetLeft	返回元素的水平偏移位置。
element.offsetParent	返回元素的偏移容器。
element.offsetTop	返回元素的垂直偏移位置。
element.ownerDocument	返回元素的根元素（文档对象）。
element.parentNode	返回元素的父节点。
element.previousSibling	返回位于相同节点树层级的前一个元素。
element.removeAttribute()	从元素中移除指定属性。
element.removeAttributeNode()	移除指定的属性节点，并返回被移除的节点。
element.removeChild()	从元素中移除子节点。
element.replaceChild()	替换元素中的子节点。
element.scrollHeight	返回元素的整体高度。
element.scrollLeft	返回元素左边缘与视图之间的距离。
element.scrollTop	返回元素上边缘与视图之间的距离。
element.scrollWidth	返回元素的整体宽度。
element.setAttribute()	把指定属性设置或更改为指定值。
element.setAttributeNode()	设置或更改指定属性节点。
element.setIdAttribute()
element.setIdAttributeNode()
element.setUserData()	把对象关联到元素上的键。
element.style	设置或返回元素的 style 属性。
element.tabIndex	设置或返回元素的 tab 键控制次序。
element.tagName	返回元素的标签名。
element.textContent	设置或返回节点及其后代的文本内容。
element.title	设置或返回元素的 title 属性。
element.toString()	把元素转换为字符串。
nodelist.item()	返回 NodeList 中位于指定下标的节点。
nodelist.length	返回 NodeList 中的节点数。

407指导员

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM增删改操作

dom的增删改操作<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>dom增删改</title> <link rel="stylesheet" type="text/css" href="style/css2.css"/&gt
复制链接

扫一扫