DOM_概念和DOM_Document对象_获取Element方法

DOM概念： Document Object Model 文档对象模型

　　将标记语言文档的各个组成部分，封装为对象，可以使用这些对象，对标记语言文档进行CRUD的动态操作

w3c DOM - 针对任何结构化文档的标准

　　Document：元素对象

　　Element：元素对象

　　Attribute：属性对象

　　Text：文本对象

　　comment：注释对象

Node：结点对象，其他5个的父对象

xml DOM - 针对xml文档标准模型

HTML DOM - 针对HTML文档标准模型

DOM_Document对象_获取Element方法

获取Element对象：

　　getElementById()；根据id属性值获取元素对象。id属性值一般唯一

　　getElementsByTagName(); 根据元素名称获取元素对象们，返回一个数组

　　getElementsByClassName 根据Class属性值获取元素对象们，返回值是一个数组

　　getElementsByName　　根据name属性值获取元素对象，返回是一个数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
    <div class="cls1">div4</div>
    <div class="cls1">div5</div>
    <input type="text" name="username">

<script>
        var divs = document.getElementsByTagName("div");
        // alert(divs.length);
        var div_cls = document.getElementsByClassName("cls1");
        // alert(div_cls.length)
        var elementsByName = document.getElementsByName("username");
        alert(elementsByName.length)
    
</script>
</body>
</html>

posted on 2022-08-04 10:14 淤泥不染阅读(57) 评论(0) 收藏举报