HTML 之 DOM 操作

最新推荐文章于 2020-05-25 09:53:10 发布

一個頭像用四年

最新推荐文章于 2020-05-25 09:53:10 发布

阅读量210

点赞数

文章标签： html dom

本文链接：https://blog.csdn.net/huzongnan/article/details/79560647

版权

DOM

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>简单的 DOM 操作</title>
        <style type="text/css">
            #first{
                width: 200px;
                height: 200px;
                background: red;
                color: white;
            }
        </style>
    </head>
    <body>
        <div id="first"></div>
        <input type="text" class="userName">
        <input type="button" value="提交">
    </body>
    <script type="text/javascript">
        // 获取对象
        var first = document.getElementById("first");
        // 修改背景颜色
        first.style.backgroundColor = "blue";
        // 修改边框属性
        first.style.border = "5px solid green";
        // 修改外边距
        first.style.margin = "100px auto";
        // 旋转
        first.style.transform = "rotate(45deg)";

        // 获取、修改内容
        first.innerHTML = "<p>福</p>"; // 可以解析字符串中的标签
        first.innerText = "<p>福</p>"; // 只可添加文本内容(留言板),不可以解析字符串中的标签
        console.log(first.innerHTML);
        console.log(first.innerText);

        // 通过类名获取一组元素
        var userNames = document.getElementsByClassName("userName");
        // userNames 是所有类名为 userName 的集合
        userNames[0].value = "输入框";
        console.log(userNames[0].value);

        // 通过类名获取某个元素
        var userName = document.getElementsByClassName("userName")[0];
        // userNames 是所有类名为 userName 的集合
        userName.value = "搜索框";
        console.log(userName.value);

        // 通过标签名获取
        var button = document.getElementsByTagName("input")[1];
        var temp = 1;
        // 添加点击方法,每次点击都会执行
        button.onclick = function(){
            console.log(userName.value);
            userName.value = temp++;
            first.style.transition = "1s";
            first.style.width = temp * 10 + "px";
            first.style.height = temp * 10 + "px";
        }

    </script>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>导航栏</title>
        <style type="text/css">
            div{
                border: 1px grey solid;
                width: 100px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                float: left;
                margin-right: -1px;
            }
            div:hover{
                background-color: grey;
            }
        </style>
    </head>
    <body>
        <div>我的关注</div>
        <div>推荐</div>
        <div>导航</div>
        <div>体育</div>
        <div>小说</div>
    </body>
    <script type="text/javascript">
        var divs = document.getElementsByTagName("div");
        var last = divs[0];
        for (var j = 0; j < divs.length; j++) {
            // 自定义变量,将获取到的 j 存入自身,而不是通过 j 本身获取
            divs[j].temp = j;
            // onclick 是延迟执行,通过自定义变量来达到,同步打印对应的 j 的值
            divs[j].onclick = function(){
                // console.log(this.temp);
                // for (var i = 0; i < divs.length; i++) {
                //  divs[i].style.backgroundColor = "white";
                // }
                // this.style.backgroundColor = "blue";
                last.style.backgroundColor = "white";
                this.style.backgroundColor = "blue";
                last = this;
            }
        }
    </script>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>购物车</title>
        <style type="text/css">
            table{
                text-align: center;
            }
        </style>
    </head>
    <body>
        <table border="1" id="table">
            <tr>
                <td>
                    <input type="checkbox" id="checkall">全选
                </td>
                <td>商品</td>
                <td>单价</td>
                <td>数量</td>
                <td>小计</td>
                <td>操作</td>
            </tr>
            <tr class="mainbody">
                <td>
                    <input type="checkbox" class="checkbox">
                </td>
                <td>佳能</td>
                <td class="price">100</td>
                <td>
                    <input type="button" value="-" class="minus" />
                    <input type="text" value="0" class="count" >
                    <input type="button" value="+" class="add" />
                </td>
                <td class="subtotal">0</td>
                <td>
                    <input type="button" value="删除" class="delCell"  />
                </td>
            </tr>
            <tr class="mainbody">
                <td>
                    <input type="checkbox" class="checkbox">
                </td>
                <td>佳能</td>
                <td class="price">200</td>
                <td>
                    <input type="button" value="-" class="minus" />
                    <input type="text" value="0" class="count">
                    <input type="button" value="+" class="add" />
                </td>
                <td class="subtotal">0</td>
                <td>
                    <input type="button" value="删除" class="delCell"  />
                </td>
            </tr>
            <tr class="mainbody">
                <td>
                    <input type="checkbox" class="checkbox">
                </td>
                <td>佳能</td>
                <td class="price">300</td>
                <td>
                    <input type="button" value="-" class="minus" />
                    <input type="text" value="0" class="count">
                    <input type="button" value="+" class="add" />
                </td>
                <td class="subtotal">0</td>
                <td>
                    <input type="button" value="删除" class="delCell" />
                </td>
            </tr>
            <tr>
                <td colspan="6"><input type="button" value="删除所有" class="delCellall" />已选择商品<span class="total">0</span> 合计:￥<span class="altogether">0</span></td>
            </tr>
        </table>
    </body>
    <script type="text/javascript">
        var checkall = document.getElementById("checkall");
        var table = document.getElementById("table");
        var adds = document.getElementsByClassName("add");
        var minuss = document.getElementsByClassName("minus");
        var counts = document.getElementsByClassName("count");
        var prices = document.getElementsByClassName("price");
        var subtotals = document.getElementsByClassName("subtotal");
        var checkboxs = document.getElementsByClassName("checkbox");
        var total = document.getElementsByClassName("total")[0];
        var altogether = document.getElementsByClassName("altogether")[0];
        var delCells = document.getElementsByClassName("delCell");
        var mainbodys = document.getElementsByClassName("mainbody");
        var delCellall = document.getElementsByClassName("delCellall")[0];
        checkall.onclick = function(){
            if (checkall.checked == true) {
                for (var i = 0; i < checkboxs.length; i++) {
                    checkboxs[i].checked = true;
                    total.innerText = 3;
                }
            }else{
                for (var i = 0; i < checkboxs.length; i++) {
                    checkboxs[i].checked = false;
                    total.innerText = 0;
                }
            }
        }
        var test = 0;
        var altogetherprice = 0;

        for (var i = 0; i < adds.length; i++) {
            adds[i].time = i;
            adds[i].onclick = function(){
                if (counts[this.time].value < 100) {
                    counts[this.time].value++;
                }
                subtotals[this.time].innerText = prices[this.time].innerText * counts[this.time].value;
                if (checkboxs[this.time].checked == true) {
                    altogetherprice = parseInt(subtotals[this.time].innerText);
                    console.log(altogether.innerText);
                    altogether.innerText = parseInt(altogether.innerText) + parseInt(prices[this.time].innerText);
                }
            }
        }
        for (var j = 0; j < adds.length; j++) {
            minuss[j].time = j;
            minuss[j].onclick = function(){
                if (counts[this.time].value > 0) {
                    counts[this.time].value--;
                }
                subtotals[this.time].innerText = prices[this.time].innerText * counts[this.time].value;
                if (checkboxs[this.time].checked == true) {
                    altogetherprice = parseInt(subtotals[this.time].innerText);
                    console.log(altogether.innerText);
                    altogether.innerText = parseInt(altogether.innerText) - parseInt(prices[this.time].innerText);
                }
            }
        }
        for (var i = 0; i < checkboxs.length; i++) {
            checkboxs[i].temp = i;
            checkboxs[i].onclick = function(){
                console.log(checkboxs[this.temp].checked)
                if (checkboxs[this.temp].checked == true) {
                    test++;
                    altogether.innerText = parseInt(altogether.innerText) + parseInt(subtotals[this.temp].innerText);
                }else{
                    test--;
                    altogether.innerText = parseInt(altogether.innerText) - parseInt(subtotals[this.temp].innerText);
                }
                total.innerText = test;

            }
        }
        for(var i=0;i<delCells.length;i++){
            delCells[i].temp = i;
            delCells[i].onclick = function(){
                // console.log(mainbodys[this.temp].rowIndex);
                // 删除父级元素
                this.parentNode.parentNode.remove();
            }
        }
        delCellall.onclick = function(){
            for (var i = mainbodys.length - 1; i > -1; i--) {
                mainbodys[i].remove();
            } 
        }

    </script>
<!--    for(var i = 0; i < XX.length; i++){
            XX[i].onclick = function(){
            this.parentNode.parentNode.remove()
            }
        }
        学会通过DOM属性来找 父级、同级（next、preXX）、子级 -->
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>DOM</title>
        <style type="text/css">
            .item{
                width: 200px;
                height: 200px;
                margin: 10px;
                border: 10px blue solid;
                /*处理超出部分*/
                overflow: scroll;
                font-size: 50px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            box
            <!-- 注释 -->
            <p>p</p>
        </div>
    </body>
    <script type="text/javascript">
        // 1.创建元素
        var newDiv = document.createElement("div");
        newDiv.className = "item";
        newDiv.id = "first";
        newDiv.style.background = "red";

        // 2.添加元素
        var body = document.getElementsByTagName("body")[0];
        var box = document.getElementsByClassName("box")[0];
        // body最后添加
        body.appendChild(newDiv);
        newDiv.innerText = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem itaque provident at in officiis doloremque. Voluptatem impedit iure suscipit omnis placeat adipisci maiores, sint alias, quia repellat temporibus vero debitis assumenda ad veritatis culpa cumque facere dolor. Excepturi saepe praesentium quod debitis delectus eum commodi culpa, numquam iste eius laborum?";
        // 把 newDiv 插入到 box 的前面
        // body.insertBefore(newDiv, box);
        // 替换
        // body.replaceChild(newDiv, box);

        // 3.删除元素
        // body.removeChild(box);
        box.remove();

        // DOM 属性 
        // 原生的对象
        var obj = {
            name: "丁鹏",
            age: 18,
            gender: "男",
            eat:function(){
                console.log("吃东西~");
            }
        };
        obj.dd = 1;
        console.log(obj);
        console.log(obj.age);
        obj.eat();

        // 宿主对象: 浏览器自己添加的对象
        console.log(newDiv);

        // 节点: 标签、文本、注释、声明(doctype)

        // 获取元素下所有子节点
        console.log(box.childNodes);
        // 获取标签类型所有子节点
        console.log(box.children[0]);

        // 尺寸、位置
        console.log(newDiv.offsetWidth); // 含边框
        console.log(newDiv.clientWidth); // 不含边框
        console.log(newDiv.offsetHeight); // 含边框
        console.log(newDiv.clientHeight); // 不含边框
        // 不含边框和滚动条(可视区域)
        console.log(newDiv.scrollHeight); // 内容的高度

        // 位置
        // 相对于定位父级的一个位置
        console.log(newDiv.offsetTop);
        console.log(newDiv.offsetLeft);

        console.log(newDiv.scrollTop);

        // 子元素滚动上去的一段距离
        console.log(newDiv.scrollTop);
        setInterval(function(){
            // 除了 scrollTop 之外,以上属性都是只读的
            newDiv.scrollTop += 40;
            console.log(newDiv.scrollTop);
        }, 1000);

    </script>
</html>

http://blog.csdn.net/huzongnan/article/list

一個頭像用四年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML 之 DOM 操作

DOM&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;简单的 DOM 操作&lt;/title&gt; &lt;style type="tex
复制链接

扫一扫