JavaScript DOM 元素属性状态属性

元素的属性

　　核心 DOM 为我们提供了操作元素标准属性的统一 API。

　　所有属性节点都储存在元素的 attributes 集合中。

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

　　获取某个属性节点的属性名：elem . attributes[i] . nodeName

　　获取某个属性节点的属性值：elem . attributes[i] . nodeValue

代码案例

<a href="http://www.baidu.com"
   target="_blank" title="百度" id="a1" class="link1">百度</a>


<script>
    // 核心DOM
    var a1 = document.getElementById("a1")
    // console.log(a1)
    console.log(a1.attributes); // 返回属性节点集合
    console.log(a1.attributes[1]); // 返回某个属性节点
    console.log(a1.attributes[1].nodeName) // 获得属性名
    console.log(a1.attributes[1].nodeValue) // 获得属性值
    console.log(a1.attributes[1].value) // 获得属性值
    a1.attributes[1].nodeValue="_self"  // 修改属性值
 </script>

修改属性值

　　核心 DOM 还为我们提供了直接访问和修改属性值得 API。

　　获得属性值：elem.getAttribute("属性名")

　　修改属性值：elem.setAttribute("属性名","值")

　　判断是否包含某个属性，返回布尔值：elem.hasAttribute("属性名")

　　移除属性：elem.removeAttribute("属性名")

案例代码

<a href="http://www.baidu.com"
   target="_blank" title="百度" id="a1" class="link1">百度</a>


<script>
    // 核心DOM
    var a1 = document.getElementById("a1")
    // console.log(a1)
    console.log(a1.attributes); // 返回属性节点集合
    console.log(a1.attributes[1]); // 返回某个属性节点
    console.log(a1.attributes[1].nodeName) // 获得属性名
    console.log(a1.attributes[1].nodeValue) // 获得属性值
    console.log(a1.attributes[1].value) // 获得属性值
    a1.attributes[1].nodeValue="_self"

    console.log(a1.getAttribute("title")) // 获取属性
    a1.setAttribute("title","百度一下")  // 修改属性
    console.log(a1.hasAttribute("id")) //判断是否有某一属性
    a1.removeAttribute("target") // 移除某一属性
    console.log(a1.attributes); // 返回属性节点集合
</script>

HTML DOM 提供了更加简化的操作属性 API

　　使用 HTML DOM 访问节点对象的属性。可以用 . 直接访问。

　　获取属性值：elem . 属性名

　　修改属性值：elem . 属性名 = 值

　　判断是否包含某个属性：elem . 属性名 == ""

　　移除属性：elem . 属性名 = ""

特殊：class 是 ES 标准中的保留字，使用 HTML DOM 访问时要使用 className

案例代码

结束！今天就到这里吧，累了，休息一下

状态属性

checked 案例代码

<input type="checkbox" id="check" checked>同意 <br>
<button id="btn" type="button">我是按钮</button>
<br>
<select name="" id="sel">
    <option value="北京">北京</option>
    <option value="天津">天津</option>
    <option value="上海">上海</option>
</select>

<script>
    // // 状态属性 checked disabled selected
    // // 返回 boolean值
    var check = document.getElementById("check");
    // // 核心 DOM  无法正确获取状态属性
    // // 判断复选框是否被选中
    // console.log(check.hasAttribute("checked"));
    // check.onclick = function () {
    //     console.log(check.hasAttribute("checked"));
    // }
    //

    // 使用 HTML DOM
    console.log(check.checked)  // true
    check.checked = false; // 修改
    check.onclick = function () {
        console.log(check.checked)
    }

</script>

disabled selected 案例代码

<input type="checkbox" id="check" checked>同意 <br>
<button id="btn" type="button" disabled>我是按钮</button>
<br>
<select name="" id="sel">
    <option value="北京">北京</option>
    <option value="天津" selected>天津</option>
    <option value="上海">上海</option>
</select>

<script>
    // // 状态属性 checked disabled selected
    // // 返回 boolean值
    var check = document.getElementById("check");
    // // 核心 DOM  无法正确获取状态属性
    // // 判断复选框是否被选中
    // console.log(check.hasAttribute("checked"));
    // check.onclick = function () {
    //     console.log(check.hasAttribute("checked"));
    // }
    //

    // // 使用 HTML DOM
    // console.log(check.checked)  // true
    // check.checked = false; // 修改
    // check.onclick = function () {
    //     console.log(check.checked)
    // }

    var btn = document.getElementById("btn");
    console.log(btn.disabled) // true表示不可用，false 表示可用

    var sel = document.getElementById("sel");
    console.log(btn.disabled) // true表示不可用，false 表示可用

    // 修改上海默认选中
    sel.querySelectorAll("option")[2].selected = true;
    // 获取当前用户选中哪一个
    console.log(sel.value)

</script>

好，结束了

JayveeWong

发布了118 篇原创文章 · 获赞 123 · 访问量 6万+

私信关注