JS DOM屬性，包括固有屬性和自定義屬性，以及屬性獲取、移除和設定-有解無憂

屬性分為固有屬性property和自定義屬性attribute

固有屬性查看

固有屬性可以通過ele.property 來獲取，自定義屬性不行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            var input=document.querySelector("input");
            console.log(input.type);//text
            console.log(input.value);//txt
            console.log(input.a);//undefined
            console.log(input.title);//""

        });

    </script>
</head>
<body>
    <input type="text" value="txt" a="b">
</body>
</html>

.attributes 回傳類陣列，獲取所有屬性，包括自定義屬性和固有屬性

如果定義了同名屬性，后面的屬性會被忽略

如果自定義屬性時出現了大寫，會統一轉為小寫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            var div=document.querySelector("#div");
            console.log(div.attributes);//

        });

    </script>
</head>
<body>
    <div id="div" url="index.html" aa="xx" Bb="yy" aa="zz">這是div</div>
</body>
</html>

獲取指定的自定義屬性的屬性值

ele.attributes.getNamedItem(屬性名).nodeValue

ele.attributes[屬性名].nodeValue

注意，如果某個固有屬性沒有在元素中被人為定義，則不可獲取

如果是人為定義的固有屬性，或者自定義屬性，則可以用該方法獲取

.nodeName 獲取元素的節點名

ele.attributes.removeNamedItem(屬性名) 移除屬性

創建屬性：

1、.createAttribute(屬性名) 創建屬性

2、attr.value=https://www.cnblogs.com/chenyingying0/p/屬性值給創建的屬性設定屬性值

3、.attributes.setNamedItem(屬性名，屬性值)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            var div=document.querySelector("#div");
            //獲取自定義屬性方法一
            console.log(div.attributes.getNamedItem("aa").nodeValue);//xx
            //獲取自定義屬性方法二
            console.log(div.attributes["aa"].nodeValue);//xx
            //獲取未人為定義的固有屬性
            console.log(div.attributes.getNamedItem("nodeName"));//null
            //獲取固有屬性的正確打開方式
            console.log(div.nodeName);//DIV
            //獲取人為定義的固有屬性
            console.log(div.attributes.getNamedItem("id").nodeValue);//div

            // 移除屬性
            div.attributes.removeNamedItem("bb");
            console.log(div.attributes);

            //創建屬性
            var attr=document.createAttribute("data-my");
            attr.value="myattr";
            div.attributes.setNamedItem(attr);
        });

    </script>
</head>
<body>
    <div id="div" url="index.html" aa="xx" Bb="yy" aa="zz">這是div</div>
</body>
</html>

獲取未人為定義的固有屬性，回傳null

獲取未人為定義的固有屬性的nodeValue，會報錯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            var div=document.querySelector("#div");

            //獲取未人為定義的固有屬性
            console.log(div.attributes.getNamedItem("title"));//null
            console.log(div.attributes.getNamedItem("title").nodeValue);//報錯

        });

    </script>
</head>
<body>
    <div id="div" url="index.html" aa="xx" Bb="yy" aa="zz">這是div</div>
</body>
</html>

用.innerHTML來操作固有屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            var div=document.querySelector("#div");
            div.innerHTML="這是innerHTML設定的文本哈";
            console.log(div.innerHTML);//這是innerHTML設定的文本哈

        });

    </script>
</head>
<body>
    <div id="div" url="index.html" aa="xx" Bb="yy" aa="zz">這是div</div>
</body>
</html>

通用方法操作固有屬性和自定義屬性

getAttribute()

setAttribute()

removeAttribute()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            var div=document.querySelector("#div");
            console.log(div.getAttribute("aa"));//xx

            console.log(div.getAttribute("style"));//color:orange
            console.log(div.style);//CSSStyleDeclaration {0: "color", alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}

            console.log(div.getAttribute("onclick"));//alert('hello~')
            console.log(div.onclick);//onclick(event) {alert('hello~')}

        });

    </script>
</head>
<body>
    <div id="div" url="index.html" aa="xx" Bb="yy" aa="zz" style="color:orange" onclick="alert('hello~')">這是div</div>
</body>
</html>

以上代碼表明，使用getAttribute() 和 .屬性名來獲取屬性值，在某些情況下結果是不同的，比如style和Onclick

通常，獲取固有屬性使用 .屬性名，獲取自定義屬性使用getAttribute()

setAttribute() 設定自定義屬性時，不存在兼容性問題

但是設定部分固有屬性，比如onclick和style時，在IE7及以下版本存在兼容性問題

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            var div=document.querySelector("#div");
            // 設定自定義屬性
            div.setAttribute("data-a","a");
            div.setAttribute("style","color:purple");
            div.setAttribute("onclick","alert(0)");
        });

    </script>
</head>
<body>
    <div id="div" url="index.html">這是div</div>
</body>
</html>

正常瀏覽器效果

IE7及以下效果

由于不支持querySelector方法，先改成document.getElementById()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            var div=document.getElementById("div");
            // 設定自定義屬性
            div.setAttribute("data-a","a");
            div.setAttribute("style","color:purple");
            div.setAttribute("onclick","alert(0)");
        });

    </script>
</head>
<body>
    <div id="div" url="index.html">這是div</div>
</body>
</html>

不再報錯，但設定的style屬性和onclick方法都沒有生效

removeAttribute() 洗掉屬性，不存在兼容性問題

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            var div=document.getElementById("div");
            // 設定自定義屬性
            div.removeAttribute("style");
        });

    </script>
</head>
<body>
    <div id="div" url="index.html" style="color:orange">這是div</div>
</body>
</html>

布爾屬性

通過布爾屬性操作DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            var inputs=document.querySelectorAll("input");
            inputs[0].checked=true;
        });

    </script>
</head>
<body>
    <input type="checkbox" name="city">杭州
    <input type="checkbox" name="city" checked="checked">寧波
    <input type="checkbox" name="city" checked>溫州
</body>
</html>

input.checked 設定成任何非空字串，都換轉為布林值true，都可以選中

但這種自動轉換在IE7以下會失敗

另外固有屬性不能通過removeAttribute() 來移除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            var inputs=document.querySelectorAll("input");
            inputs[0].checked=true;
            inputs[0].checked="checked";
            inputs[0].checked=1;

            inputs[1].checked=0;
            inputs[1].checked="";

            inputs[1].removeAttribute("checked");
        });

    </script>
</head>
<body>
    <input type="checkbox" name="city">杭州
    <input type="checkbox" name="city" checked="checked">寧波
    <input type="checkbox" name="city" checked>溫州
</body>
</html>

.options 可以獲取select下的所有option選項

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            var select=document.getElementById("select");
            var options=select.options;
            options[1].selected=true;
        });

    </script>
</head>
<body>
    <select name="select" id="select">
        <option value="">請選擇</option>
        <option value="1">杭州</option>
        <option value="2">寧波</option>
        <option value="3">溫州</option>
    </select>
</body>
</html>

.readOnly 只讀屬性（注意O必須大寫）

.disabled 禁用屬性

區別：readOnly資料可以提交到服務器，disabled資料不會提交到服務器

select的multiple屬性設定多選，下拉框變串列框

HTML5新增屬性hidden 使元素不再顯示（低版本IE無法兼容）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        input{
            display: block;
            margin-bottom:10px;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            var input=document.getElementById("input");
            input.readOnly=false;

            var input2=document.getElementById("input2");
            input2.disabled=true;

            var select=document.getElementById("select");
            select.multiple=true;

            var div=document.getElementById("div");
            div.hidden=false;
        });

    </script>
</head>
<body>
    <input type="text" value="中國" readonly id="input">
    <input type="text" value="中國" id="input2">
    <select name="select" id="select">
        <option>杭州</option>
        <option>寧波</option>
        <option>溫州</option>
    </select>
    <div id="div" hidden="hidden">這是div</div>
</body>
</html>

常見的字串屬性（大部分都是字串屬性）

id 唯一標識

class 類

href 多用于a鏈接和link

src 多用于img和script和video等等

lang 輔助搜索引擎等的語言識別 <html land="zh">

zh 中文 zh-cn 中文簡體 zh-sg 新加坡 zh-hk 香港

accesskey 組合鍵，快捷鍵

在谷歌瀏覽器中使用alt+設定的快捷鍵字母來激活

name 多用于表單元素的控制元件名稱

value 表單元素的值

title 元素不可見時的提示資訊

W3C全域屬性

accesskey class dir id lang title

contenteditable 元素內容是否可編輯

hidden 元素是否隱藏

spellcheck 元素內容編輯時的語法檢查

style 樣式

tabindex 使用tab鍵導航時的切換順序

當一個頁面中有多個元素使用相同的id時，使用document.getElementById()能夠取得元素，但是只會取得第一個

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        input{
            display: block;
            margin-bottom:10px;
        }
        .active{
            color:orange;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            var p=document.getElementById("p");
            console.log(p);//<p id="p">這是一段文字1</p>

            var p=document.getElementById("p");
            p.className="active";
        });

    </script>
</head>
<body>
    <p id="p">這是一段文字1</p>
    <p id="p">這是一段文字2</p>
    
    <input type="text" accesskey="n" value="n"><!-- alt+n -->
    <input type="text" accesskey="m" value="m"><!-- alt+m -->
</body>
</html>

data屬性以data-開頭

設定時多單詞以連字符分開，如data-aa-bb

JS獲取時使用dataset.屬性名后面需要轉換成小駝峰形式

但是IE瀏覽器兼容性不是很好

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        input{
            display: block;
            margin-bottom:10px;
        }
        .active{
            color:orange;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){

            var div=document.getElementById("div");
            console.log(div.dataset.toggle);//modal
            console.log(div.dataset.xxxYyy);//aa
        });

    </script>
</head>
<body>

    <div id="div" data-toggle="modal" data-xxx-yyy="aa">這是驗證data屬性的div</div>
</body>
</html>

class屬性

自定義class相關的操作方法

this指向當前物件

gi表示全域匹配且不區分大小寫

str.replace(exp,str2) 將str字串中，滿足exp正則匹配的部分，用str2替換

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        input{
            display: block;
            margin-bottom:10px;
        }
        .active{
            color:orange;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){

            var classMethod={
                //獲取class
                getClass:function(ele){
                    // 將多個空格統一轉換為一個空格，并根據空格來將字串轉為陣列
                    return ele.className.replace(/\s+/," ").split(" ");
                },
                //判斷是否存在某個class
                hasClass:function(ele,cls){
                    // 給獲取的class字串前后加上空格，再給要查找的類名前后也加上空格
                    // -1表示不存在，否則為存在
                    return -1< (" "+ele.className+" ").indexOf(" "+cls+" ");
                },
                //添加class
                addClass:function(ele,cls){
                    //this指向classMethod這個物件
                    if(!this.hasClass(ele,cls)){
                        ele.className+=" "+cls;
                    }
                },
                //洗掉class
                removeClass:function(ele,cls){
                    if(this.hasClass(ele,cls)){
                        //gi表示全域匹配，且不區分大小寫
                        var exp=new RegExp("(^|\\s)"+cls+"($|\\s)","gi");
                        ele.className=ele.className.replace(exp," ");
                    }
                },
                //切換class
                toggleClass(ele,cls){
                    if(this.hasClass(ele,cls)){
                        this.removeClass(ele.cls);
                    }else{
                        this.addClass(ele,cls);
                    }
                }
            }

            var div=document.querySelector("div");
            console.log(classMethod.getClass(div));//(3) ["a", "b", "c"]

            console.log(classMethod.hasClass(div,"a"));//true
            console.log(classMethod.hasClass(div,"z"));//false

            classMethod.addClass(div,"z");

            classMethod.removeClass(div,"z");

            classMethod.toggleClass(div,"z");
        });

    </script>
</head>
<body>

    <div class="a b c">這是測驗class相關的div</div>
</body>
</html>

js自帶的classList對于class的操作

ele.classList.add(cls)

ele.classList.remove(cls)

ele.classList.toggle(cls)

ele.classList.contains(cls)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        input{
            display: block;
            margin-bottom:10px;
        }
        .active{
            color:orange;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){

            var div=document.querySelector("div");
            console.log(div.classList.add("z"));
            console.log(div.classList.toString());//a b c z

            console.log(div.classList.remove("a"));
            console.log(div.classList.toString());//b c z

            console.log(div.classList.contains("b"));//true
            console.log(div.classList.toString());//b c z

            console.log(div.classList.toggle("c"));//false
            console.log(div.classList.toString());//b z
        });

    </script>
</head>
<body>

    <div class="a b c">這是測驗class相關的div</div>
</body>
</html>

可惜兼容性是：IE11+

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/150285.html

標籤：JavaScript

上一篇：JS DOM用不同方法獲取節點及對節點插入、復制和移除

下一篇：JS筆記之第二天