JavaScript中DOM的使用（下）

最新推荐文章于 2024-08-08 23:04:40 发布

《 L 》

最新推荐文章于 2024-08-08 23:04:40 发布

阅读量208

点赞数

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

本文链接：https://blog.csdn.net/qq_52273362/article/details/126594421

版权

一、DOM节点

1. 从文档对象模型DOM角度看：每个html标签、标签属性、内容、注释等都被看成dom节点；DOM就是html结构中一个个节点的构成

2. DOM节点分类

（1）整个文档是一个文档节点

（2）每个html元素是元素节点

（3）html元素内的文本是文本节点

（4）html属性是属性节点

（5）注释是注释节点

常用的三大类：元素节点、文本节点、属性节点

元素节点：通过getElementBy...得到

属性节点：通过getAttribute获取

文本节点：通过innerText获取

3. DOM节点的属性结构

节点的具体结构：

4. DOM节点关系

（1）根节点，html文档中html就是根节点

（2）父节点，一个子节点上面的节点就是该子节点的父节点，例如body的父节点就是html

（3）子节点，一个节点之下的节点就是该节点的子节点

（4）兄弟节点，如果多个节点在同一层次，并拥有相同的父节点那么这些节点就是兄弟节点，例如：li都是兄弟节点

二、获取节点

1. 获取元素节点

（1）getElement系列

（2）querySelector系列

2. 层次关系获取节点

（1）children：获取某一节点下所有的子一级元素节点：

3. 层次关系获取元素节点：

4. 获取元素节点的所有属性节点：attributes:

5. 节点层次图：

6. 非常规节点获取

（1）获取html根节点：document.documentElement

（2）获取body节点：document.body

（3）获取head节点：document.head

7. 购物车案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .containter {
            width: 1200px;
            margin: 100px auto;
        }

        .containter tr {
            line-height: 40px;
            text-align: center;
        }

        .containter tr,
        th,
        td {
            border-bottom: 1px dotted gray;
        }

        .containter tr input {
            width: 20px;
            text-align: center;
        }
    </style>
</head>

<body>
    <table class="containter">
        <tr>
            <th>商品图片</th>
            <th>商品信息</th>
            <th>单价</th>
            <th>数量</th>
            <th width="100px">总价</th>
            <th>操作</th>
        </tr>
        <tr>
            <td><img src="./images/shoppingBg_03.jpg" alt="图片1" /></td>
            <td>javascript高级编程</td>
            <td>￥28.98</td>
            <td>
                <input type="button" value="-" name="minus" /><input type="text" value="0" name="amount" /><input
                    type="button" value="+" name="plus" />
            </td>
            <td>￥0</td>
            <td>移入收藏<br />删除</td>
        </tr>
        <tr>
            <td><img src="./images/shoppingBg_06.jpg" alt="图片2" /></td>
            <td>css高级编程</td>
            <td>￥16.68</td>
            <td>
                <input type="button" value="-" name="minus" /><input type="text" value="0" name="amount" /><input
                    type="button" value="+" name="plus" />
            </td>
            <td>￥0</td>
            <td>移入收藏<br />删除</td>
        </tr>
    </table>

    <script>
        // 获取加
        var addBtn = document.querySelectorAll('input[name = "plus"]')
        //获取减
        var minusBtn = document.querySelectorAll('input[name = "minus"]')

        for (var i = 0; i < addBtn.length; i++) {

            // 获取单价
            var priceM = addBtn[i].parentElement.previousElementSibling.innerHTML
            //分离出价格数值
            var price = priceM.substring(priceM.indexOf('￥') + 1, priceM.length)

            // 获取总价
            var totalPriceM = addBtn[i].parentElement.nextElementSibling.innerHTML
            //分离出总价数值
            var totalPrice = totalPriceM.substring(totalPriceM.indexOf('￥') + 1, totalPriceM.length)

            // 设置增加的click函数
            addBtn[i].onclick = function () {

                // 数量的值自增
                this.previousSibling.value++

                // 设置总价等于单价 * 数量
                // 获取数量
                var str = this.parentElement.nextElementSibling
                var numPrice = price * this.previousSibling.value
                str.innerHTML = '￥' + numPrice.toFixed(2)
            }

            //设置减少的click函数
            minusBtn[i].onclick = function () {
                // 判断小于0后就不能继续减
                if (this.nextSibling.value > 0) {
                    // 点击后数量自减
                    this.nextSibling.value--
                }

                var str2 = this.parentElement.nextElementSibling
                var numPrice2 = price * this.nextSibling.value
                str2.innerHTML = '￥' + numPrice2.toFixed(2)
            }
        }

    </script>
</body>

</html>

三、节点属性

四、操作DOM节点

节点操作：

向页面中添加一个节点

删除页面中的一个节点

修改页面中的一个节点

获取页面中的某一个节点

（1）创建节点

（2）创建属性节点

createAttribute: 创建属性节点

setAttributeNode: 给元素节点设置属性节点

 <script>
        //创建一个p元素添加id属性节点
        var pEle = document.createElement('p');
        var idEle = document.createAttribute('id');
        idEle.value = 'p1'
        pEle.setAttributeNode(idEle)
        console.log(pEle);

        //创建一个div元素，添加class属性节点
        var divEle = document.createElement('div')
        var classEle = document.createAttribute('class')
        classEle.value = 'box'
        divEle.setAttributeNode(classEle)
        console.log(divEle);

        // 创建一个input元素
        var inp = document.createElement('input')

        //添加属性节点
        inp.id = 'submit'
        inp.type = 'button'
        inp.value = '提交'
        console.log(inp);

        //创建一个input元素
        var inpu = document.createElement('input')
        inpu.id = 'uname'
        inpu.type = 'password'
        inpu.name = 'userName'
        inpu.placeholder = '请输入密码'
        console.log(inpu);

        //创建一个input元素，方法二
        var inputEle = document.createElement('input');
        var idEle = document.createAttribute('id')
        idEle.value = 'uname'
        var typeEle = document.createAttribute('type')
        typeEle.value = 'text'
        inputEle.setAttributeNodeNS(idEle)
        inputEle.setAttributeNodeNS(typeEle)
        console.log(inputEle);
    </script>

（3）加入节点

appendChild:是向一个元素节点的末尾追加一个节点：