首页 > 代码库 > DOM元素对象的属性和方法（2）

DOM元素对象的属性和方法（2）

2024-08-17 11:41:13   221人阅读

11、contentEditable

　　作用：设置或返回元素内容可否编辑布尔值，HTML5新增属性

<!DOCTYPE html>
<html>
<head>
    <title>cloneNode</title>
    <meta charset="utf-8">
</head>
<body>
    <ul id="one">
        <li>可编辑</li>
        <li>不可编辑</li>
    </ul>
    <script>
        var one=document.getElementById("one");
        var lis=one.getElementsByTagName("li");
        lis[0].contentEditable=true;
        console.log(lis[0].contentEditable);
        console.log(lis[1].contentEditable);
    </script>
</body>
</html>

结果：技术分享技术分享

12、dir

　　作用：设置或者返回元素文本方向，默认为空

<!DOCTYPE html>
<html>
<head>
    <title>cloneNode</title>
    <meta charset="utf-8">
    
</head>
<body id="one">
    <p dir="rtl">文本</p>
    <p dir="ltr">文本</p>
    <p>文本</p>
    <script>
        var p=document.getElementsByTagName("p");
        console.log(p[0].dir);
        console.log(p[1].dir);
        console.log(p[2].dir);
    </script>
</body>
</html>

结果：技术分享技术分享

13、firstChild

　　作用：返回元素的第一个子节点（注意是节点，不是元素）

<!DOCTYPE html>
<html>
<head>
    <title>cloneNode</title>
    <meta charset="utf-8">
</head>
<body>
<div id="one">
    文本节点
    <p>文本</p>
</div>
    <script>
        var one=document.getElementById("one");
        var first=one.firstChild;
        console.log(first.nodeValue);
    </script>
</body>
</html>

结果：技术分享技术分享

14、getAttribute

　　作用：返回指定的属性名的值

15、getAttributeNode

　　作用：返回指定的属性节点

16、getElementsByTagName

　　作用：返回指定标签名的后代元素集合

<!DOCTYPE html>
<html>
<head>
    <title>firstChild</title>
    <meta charset="utf-8">
</head>
<body>
<div id="one">
    <ul>
        <li>第一个li</li>
        <ul>
            <li>第二个li</li>
        </ul>
    </ul>
</div>
    <script>
        var one=document.getElementById("one");
        var lis=one.getElementsByTagName("li");
        console.log(lis.length);
    </script>
</body>
</html>

结果：技术分享技术分享

17、getFeature

　　作用：返回指定特征的执行APIs对象

18、getUserData

　　作用：返回一个元素中关联键值的对象

19、hasAttribute

　　作用：判断元素是否有指定属性，存在返回true，否则返回false

20、hasAttributes

　　作用：判断元素是否有属性，有返回true，否则返回false

21、hasChildNodes

　　作用：判断元素是否具有任何子节点（不只是元素），有返回true，否则返回false

<!DOCTYPE html>
<html>
<head>
    <title>hasChildNodes</title>
    <meta charset="utf-8">
</head>
<body>
<div id="one">
    文本
</div>
<div id="two"></div>
    <script>
        var one=document.getElementById("one");
        var two=document.getElementById("two");
        console.log("第一个DIV是否有子元素"+one.hasChildNodes());
        console.log("第二个DIV是否有子元素"+two.hasChildNodes());
    </script>
</body>
</html>

结果：技术分享

22、id

　　作用：设置或返回元素的id属性

DOM元素对象的属性和方法（2）


联系
我们