document對象

時間 2019-11-11

標籤 document 對象简体版

原文原文鏈接

一.write方法和getElementById方法 javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>doucment對象</title>
</head>
<body>
    <input type="text" id="nameid" value="公子世無雙" />
    <script type="text/javascript">
    //document對象表示整個文檔
    //write()方法:1)向頁面輸出變量(值)
    var str = "陌上人如玉!";
    document.write(str);
    //向頁面輸出html代碼
    document.write("<hr/>");

    //使用getElementById獲得input標籤
    var input1 = document.getElementById("nameid");
    //獲得input裏面的value值
    alert(input1.value);
    //設置input裏面的value值
    input1.value = "大江東去浪淘盡";
    </script>
</body>
</html>

2.getElementsByName方法html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document對象二</title>
</head>
<body>
    <input type="text" name="name1" value="人生處處知何似"><br/>
    <input type="text" name="name1" value="應是飛鴻踏雪泥"><br/>
    <input type="text" name="name1" value="泥上偶爾染指爪"><br/>
    <input type="text" name="name1" value="鴻飛那復計東西"><br/>
    <script type="text/javascript">
    //getElementsByName()經過標籤的name的屬性值獲得標籤
    //-返回的是一個集合(數組)
    
    //使用getElementsByName獲得input標籤
    var inputs = document.getElementsByName("name1");
    alert(inputs.length);
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document對象二</title>
</head>
<body>
    <input type="text" name="name1" value="人生處處知何似"><br/>
    <input type="text" name="name1" value="應是飛鴻踏雪泥"><br/>
    <input type="text" name="name1" value="泥上偶爾染指爪"><br/>
    <input type="text" name="name1" value="鴻飛那復計東西"><br/>
    <script type="text/javascript">
    //getElementsByName()經過標籤的name的屬性值獲得標籤
    //-返回的是一個集合(數組)
    
    //使用getElementsByName獲得input標籤
    var inputs = document.getElementsByName("name1");
    //遍歷數組
    for(var i = 0;i<inputs.length;i++)
    {
        //每次循環獲得input對象,賦值到input1裏面
        var input1 = inputs[i];
        alert(input1.value);
    }
    </script>
</body>
</html>

因爲inputs接收的是一個集合,故而在循環中依次打印了四個元素java

3.getElementsByTagName():返回帶有指定標籤名的對象集合-->即經過標籤獲得元素數組

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document對象三</title>
</head>
<body>
    <input type="text" name="name1" value="千山鳥飛絕"><br/>
    <input type="text" name="name1" value="萬徑人蹤滅"><br/>
    <input type="text" name="name1" value="孤舟蓑笠翁"><br/>
    <input type="text" name="name1" value="獨釣寒江雪"><br/> 
    <script type="text/javascript">
    var inputs1 = document.getElementsByTagName("input");
    //遍歷數組,獲得每一個input標籤
    for(var i=0;i<inputs1.length;i++)
    {
        var result = inputs1[i];
        alert(result.value);
    }
    </script>
</body>
</html>

4.經過具體的數組下標獲得value值spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document對象四</title>
</head>
<body>
    <!-- getElementsByName與getElementsByTagName返回的是元素數組,能夠經過具體的元素下標獲得具體的value值 -->
    <input type="text" name="aidou" value="秋水時至">
    <script type="text/javascript">
     //經過name名獲得元素
     var result1 = document.getElementsByName("aidou")[0];
     document.write("<br/>"+result1.value+"<br/>");
     //經過標籤名獲得元素
     var result2 = document.getElementsByTagName("input")[0];
     document.write(result2.value);
    </script>
</body>
</html>

1. JavaScript_Window對象和Document對象
2. DOM對象之document對象
3. document對象
4. document 對象
5. javascript.dom-document對象
6. Document對象
7. Document 對象
8. JavaScript Document 對象
9. jsDOM對象 document
10. Window及document對象
更多相關文章...
• XML DOM - Document 對象 - XML DOM 教程
• XSLT document() 函數 - XSLT 教程
• RxJava操作符（一）Creating Observables
• RxJava操作符（九）Connectable Observable Operators

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。