zoukankan      html  css  js  c++  java
  • DOM属性操作

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div class="box" a="10" b=20 id="cont" title="这是一个div">
            <span>hello</span>
        </div>
    </body>
    <script>
        var obox = document.querySelector(".box");
        // 属性的操作:
        //     可见:看得见
        //         内置:系统提供,对象的操作方法;系列专属方法:get/set/remove Attribute()
                     console.log(obox.title) //这是一个div
                     obox.title = "1231321";//将title里面内容改为1231321
                    console.log(obox.title) //1231321
                     console.log(obox.className)
                     obox.className = "hahah"
    
                     console.log(obox.getAttribute("title"))//1231321
                     console.log(obox.getAttribute("class"))//hahah
    
        //         非内置:自定义的,系列专属方法:get/set/remove Attribute()
                     console.log(obox.getAttribute("a")) //10
                     obox.setAttribute("a","hello")    //将10换成了hello
                     console.log(obox.getAttribute("a")) //hello
                     obox.setAttribute("c","world")    //null,但是可以在元素中看到这个属性。搞不懂
                     obox.removeAttribute("a") //删除属性a
                     console.log(obox.getAttribute("a")) //null
                    // obox.removeAttribute("b")
                    // obox.removeAttribute("c")
    
        //     不可见:看不见
        //         内置:对象的操作
                     console.log(obox.innerHTML);    //可以解析标签 // <span>hello</span>
                     console.log(obox.innerText);    //不可以解析标签 //hello
    
                     console.log(obox.tagName);//DIV
    
                     console.log(obox.style)
    //                 所有的css属性
    //                 obox.style.width = "300px"
    //                 obox.style.height = "300px"
    //                 obox.style.background = "red"
    //                 obox.style.display = "none"
                     obox.style.cssText = "100px;height:100px;background:red;position:absolute;left:100px;"
    
        //         非内置:对象的操作
                    // 元素本身的类型,对象
                    // 对象,作为真正的对象操作
                     obox.abc = "hahahah"
                     console.log(obox.abc)
                    
    
    
    </script>
    </html>
  • 相关阅读:
    1. 命令执行漏洞简介
    3. 从零开始学CSRF
    2. DVWA亲测CSRF漏洞
    使用pt-fifo-split 工具往mysql插入海量数据
    如何打印矩阵
    年轻人,你活着不是为了观察K线做布朗运动
    Python 之匿名函数和偏函数
    Python之闭包
    Python之装饰器
    Python之with语句
  • 原文地址:https://www.cnblogs.com/hy96/p/11401688.html
Copyright © 2011-2022 走看看