DOM_Document对象获取Element方法以及创建DOM对象

DOM_Document对象获取Element方法

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对象：

　　3、属性

<!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>

    /*
        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属性值获取元素对象们，返回值是一个数组。
        　　3、属性
     */

    //getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组。
    var divs = document.getElementsByTagName("div");
    alert(divs.length);
    //getElementsByClassName()：根据Class属性值获取元素对象们。返回值是一个数组。
    var div_cls = document.getElementsByClassName("cls1");
    alert(div_cls.length);
    //getElementsByName()：根据name属性值获取元素对象们，返回值是一个数组。
    var ele_username = document.getElementsByName("username");
    alert(ele_username.length);

</script>
</body>
</html>

 

 

 

 

 

 

 

 

创建DOM对象

创建其他DOM对象：

　　1、createAttribute(name)

　　2、createComment()

　　3、createElement()

　　4、createTextNode()

<!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>

    /*
        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对象：
                  1、createAttribute(name)
                　2、createComment()
                　3、createElement()
                　4、createTextNode()
        　　3、属性
     */


    //getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组。
    var divs = document.getElementsByTagName("div");
    alert(divs.length);
    //getElementsByClassName()：根据Class属性值获取元素对象们。返回值是一个数组。
    var div_cls = document.getElementsByClassName("cls1");
    alert(div_cls.length);
    //getElementsByName()：根据name属性值获取元素对象们，返回值是一个数组。
    var ele_username = document.getElementsByName("username");
    alert(ele_username.length);

    var table = document.createElement("table");
    alert(table);

</script>
</body>
</html>

 

posted @ 2022-08-03 17:05  xjw12345  阅读(497)  评论(0)    收藏  举报