638_DOM_Document对象_获取Element方法 and _DOM_Document对象_创建DOM对象

DOM_Document对象_获取Element方法

核心DOM模型：

Document：文档对象

　　1. 创建(获取)：在html dom模型中可以使用window对象来获取

　　　　1. window.document

　　　　2. document

　　2. 方法：

　　　　1. 获取Element对象：

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

　　　　　　2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组

　　　　　　3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组

　　　　　　4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组

　　　　2. 创建其他DOM对象：

　　　　　　createAttribute(name)
               　　 createComment()
                　　createElement()
                　　createTextNode()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--创建div标签赋值id 加入内容-->
        <div id="d1">div1</div>
        <div id="d2">div2</div>
        <div id="d3">div3</div>

    <!--class标签赋值id-->
        <div class="cls1">div4</div>
        <div class="cls1">div5</div>
    <!--input标签,输入框-->
        <input type="text" name="username">

        <script>
            /*
                Document：文档对象
                    1. 创建(获取)：在html dom模型中可以使用window对象来获取
　　　　                1. window.document
　　　　                2. document
　　                 2. 方法：
　　　　                1. 获取Element对象：
　　　　　　                 1.getElementById()：根据id属性值获取元素对象。id属性值一般唯一
                        　　2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
                        　　3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
                        　　4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
            */
            //根据元素名称获取元素对象。返回值是一个数组
            var div4 = document.getElementById("d");
            //获取数组长度弹窗显示
            //alert(div4,length);

            //根据Class属性值获取元素对象们。返回值是一个数组
            var div_cls = document.getElementsByClassName("cls1");
            //获取数组长度弹窗显示
            //alert(div_cls,length);

            //根据name属性值获取元素对象们。返回值是一个数组
            let use = document.getElementsByName("username");
            alert(use,length);

 　　　　　　//创建一个createElement元素
　　　　　　 var table_v1 = document.createElement("table"); 
　　　　　　//获取数组长度弹窗显示
　　　　　　  alert(table_v1); </script>
        </script>
</body>
</html>

 





 






            

            
posted @ 
2022-10-27 16:07 
ja不会va 
阅读(28) 
评论(0) 
 
收藏 
举报