dom對象是什麼--樂字節大數據

時間 2020-06-29

標籤 dom 對象什麼字節數據欄目 HTML 简体版

原文原文鏈接

DOM對象

DOM：Document Object Model 文檔對象模型javascript

要實現頁面的動態交互效果，bom 操做遠遠不夠，須要操做 html 纔是核心。如何操做 htm，就是 DOM。簡單的說，dom 提供了用程序動態控制 html 接口。DOM即文檔對象模型描繪了一個層次化的節點樹，運行開發人員添加、移除和修改頁面的某一部分。dom 處於javascript 的核心地位上。html

每一個載入瀏覽器的 HTML 文檔都會成爲 Document 對象。Document 對象使咱們能夠從腳本中對 HTML 頁面中的全部元素進行訪問。Document 對象是 Window 對象的一部分，可經過 window.document 屬性對其進行訪問。 java

節點

加載 HTML 頁面時，Web 瀏覽器生成一個樹型結構，用來表示頁面內部結構。DOM 將這種樹型結構理解爲由節點組成，組成一個節點樹。對於頁面中的元素，能夠解析成如下幾種類型的節點：ios

節點類型	HTML內容	例如
文檔節點	文檔自己	整個文檔 document
元素節點	全部的HTML元素	<a>、<div>、<p>
屬性節點	HTML元素內的屬性	id、href、name、class
文本節點	元素內的文本	hello
註釋節點	HTML中的註釋	<!-- -->

html --> 文檔節點數組

div --> 元素節點瀏覽器

title --> 屬性節點app

測試 Div --> 文本節點dom

<html>
    <head>
        <title>樹!樹!處處都是樹!</title>
    </head>
    <body>
      <div title="屬性節點">測試 Div</div>
    </body>
</html>

操做元素的節點

當HTML文檔在被解析爲一顆DOM樹之後，裏面的每個節點均可以看作是一個一個的對象，咱們稱爲DOM對象，對於這些對象，咱們能夠進行各式各樣的操做，查找到某一個或者一類節點對象，能夠建立某種節點對象，能夠在某個位置添加節點對象，甚至能夠動態地刪除節點對象，這些操做可使咱們的頁面看起來有動態的效果，後期結合事件使用，就能讓咱們的頁面在特定時機、特定的事件下執行特定的變換。ide

獲取節點

在進行增、刪、改的操做時，都須要指定到一個位置，或者找到一個目標，此時咱們就能夠經過Document對象提供的方法，查找、定位某個對象（也就是咱們說的節點）。函數

注意：操做 dom 必須等節點初始化完畢後，才能執行。

處理方式兩種:

（1）把 script 調用標籤移到html末尾便可；

（2）使用onload事件來處理JS，等待html 加載完畢再加載 onload 事件裏的 JS。

window.onload = function () { //預加載 html 後執行};

獲取方式以下：

方法	描述
getElementById()	根據id獲取dom對象，若是id重複，那麼以第一個爲準
getElementsByTagName()	根據標籤名獲取dom對象數組
getElementsByClassName()	根據樣式名獲取dom對象數組
getElementsByName()	根據name屬性值獲取dom對象數組，經常使用於多選獲取值

<body>
    <p id="p1" class="para">這是一個段落<span>文本</span></p>
    <p id="p1" class="para">這又是一個段落</p>
    <input type="text" name="txt" />
    <input type="checkbox" name="hobby" value="游泳" />游泳
    <input type="checkbox" name="hobby" value="籃球" />籃球
    <input type="checkbox" name="hobby" value="足球" />足球
    <hr />
    <a href="javascript:void(0)" onclick="testById()">按照id獲取</a>
    <a href="javascript:void(0)" onclick="testByName()">按照name獲取</a>
    <a href="javascript:void(0)" onclick="testByTagName()">按照標籤名獲取</a>
    <a href="javascript:void(0);" onclick="testByClass();">按照class獲取</a>
</body>

說明：href="javascript:void(0)"：僞協議，表示不執行跳轉，而執行指定的點擊事件。

<script type="text/javascript">
    // 按照id獲取元素
    function testById() {
        // 返回單個對象
        var p = document.getElementById("p1");
        console.log(p);
        // 表示獲取元素開始標籤和結束標籤之間的html結構
        console.log(p.innerHTML);           
        console.log(p.innerText); // 表示獲取標籤之間的普通文本
    }

    // 按照name獲取元素
    function testByName() {
        // 對象數組
        var ho = document.getElementsByName("hobby");
        console.log(ho);
        for(var i = 0; i <= ho.length - 1; i++) {
            console.log(ho[i].value);
        }
    }

    // 按照標籤名獲取元素
    function testByTagName() {
        // 對象數組
        var inputArr = document.getElementsByTagName("input");
        for(var i = 0; i < inputArr.length; i++) {
            if(inputArr[i].type == "text") {
                console.log("text類型");
            } else if(inputArr[i].type == "checkbox") {
                if(inputArr[i].checked) {
                    console.log(inputArr[i].value);
                }
            }
        }
    }

    // 按照class屬性獲取元素
    function testByClass() {
        // 對象數組
        var ps = document.getElementsByClassName("para");
        console.log(ps[0].innerHTML);
        ps[0].innerHTML += "這是一段新的文本";
    }
</script>

建立節點和插入節點

不少時候咱們想要在某個位置插入一個新的節點，此時咱們首先須要有一個節點存在，能夠經過如下幾種方式建立新節點。

建立節點

方法	描述
createElement()	建立一個新的節點，須要傳入節點的標籤名稱，返回建立的元素對象
createTextNode()	建立一個文本節點，能夠傳入文本內容
innerHTML	也能達到建立節點的效果，直接添加到指定位置了

插入節點

方法	描述
write()	將任意的字符串插入到文檔中
appendChild()	向元素中添加新的子節點，做爲最後一個子節點
insertBefore()	向指定的已有的節點以前插入新的節點newItem：要插入的節點exsitingItem：參考節點須要參考父節點

<button onclick="add()">添加段落</button>
<div id="container"></div>

<script type="text/javascript">
    function add(){
        var container = document.getElementById('container')
        var paragraph = document.createElement('p');
        var txt = document.createTextNode('hello')
        paragraph.appendChild(txt)
        container.appendChild(paragraph)
}
</script>

添加 "段落、圖片、文本框、選項"

<body>
    <button onclick="addPara();">添加段落</button>
    <button onclick="addImg();">添加圖片</button>
    <button onclick="addTxt();">添加文本框</button>
    <button onclick="addOptions()">添加選項</button> 
    <select name="music">
        <option value="-1">你心內的一首歌</option>
        <option value="0">南山南</option>
        <option value="1">喜歡你</option>
    </select>
    <hr />
    <div id = "container"></div>
</body>

<script type="text/javascript"> 
    // 添加p節點
    function addPara(){
        // 獲取容器
        var container =document.getElementById("container");
        // 建立段落<p></p>
        var p =document.createElement('p');     
        // 第一種方式
        // 建立文本節點
        var txt=document.createTextNode("之後的你會感謝如今努力的你");
        // 將txt節點追加到p節點中
        p.appendChild(txt);
        // 將p節點追加到container節點中
        container.appendChild(p);       
        /*
        // 第二種方式
        // 向p節點中添加內容
        p.innerHTML = "之後的你會感謝如今努力的你";
        // 將p節點追加到container節點中
        container.appendChild(p);
        */  
        /*
        // 第三種方式
        // 將字符串類型的p標籤內容添加到container中，不會添加屢次
        var str = "<p>之後的你會感謝如今努力的你</p>";
        container.innerHTML = str;
        */
    }   

    // 添加圖片
    function addImg(){
        // 建立圖片
        var img = document.createElement("img") ;           
        /*
        // 設置屬性第一種方式
        // 設置img標籤的src屬性
        // img.src ="http://www.baidu.com/img/bd_logo1.png";
        */      
        // 設置屬性第二種方式
        // setAttribute() 方法添加指定的屬性，併爲其賦指定的值。
        // 設置img的src屬性
        img.setAttribute('src','http://www.baidu.com/img/bd_logo1.png');
        img.style.width = '300px';      
        img.style.height = '200px';         
        // 獲取容器
        var container =document.getElementById("container");
        // 將img節點追加到container中。
        container.appendChild(img);
    }   

    // 添加文本框
    function addTxt(){
        // 建立文本框
        var txt =document.createElement("input");   
        /*
        // 設置類型第一種方式
        txt.type = "text"; 
        txt.value = "添加成功";
        */
        // 設置類型第二種方式
        txt.setAttribute('type', 'text');
        txt.setAttribute('value', '添加成功');
        /*
         * txt.type = 'password'
         * txt.value = '123'
         */
        // 獲取容器
        var container =document.getElementById("container");
        // 將txt節點追加到container中。
        container.appendChild(txt);
    }

    // 添加下拉框的選項         
    function addOptions(){
        // 第一種方式
        /*
        // 建立下拉項
        var option = document.createElement("option") ;
        option.value = "2" ;
        option.text = "油菜花" ;
        // 獲取下拉框
        var sel = document.getElementsByTagName("select")[0];
        // 添加 下拉項 
        sel.appendChild(option);
        */                  
        // 第二種方式:
        var option = document.createElement("option") ;
        option.value = "2" ;
        option.text = "不應" ;
        // 獲取下拉框
        var sel = document.getElementsByTagName("select")[0];
        // 添加下拉項
        sel.options.add(option);        
        // 第三種方式: 添加下拉項
        var sel = document.getElementsByTagName("select")[0];
        sel.innerHTML += "<option value = '2'>英雄</option>" ;
    }           
</script>

間接查找節點

**方法\	屬性**	描述
childNodes	返回元素的一個子節點的數組
firstChild	返回元素的第一個子節點
lastChild	返回元素的最後一個子節點
nextSibling	返回元素的下一個兄弟節點
parentNode	返回元素的父節點
previousSibling	返回元素的上一個兄弟節點

刪除節點

**方法\	屬性**	描述
removeChild()	從元素中移除子節點

<script type="text/javascript">
    function delNode(){
        var programmer =document.getElementById("programmer");
        // 從父元素中刪除節點，獲取要刪除對象的父元素，而後從父元素中刪除該對象
        programmer.parentNode.removeChild(programmer);
    }
</script>
<body>
    <span id="programmer">程序猿</span>
    <a href="javascript:void(0)" onclick="delNode();">刪除</a>
</body>

表單

表單是咱們頁面向後臺傳輸數據的一種很是常見的方式，在進行數據發送（請求發出）以前，咱們應該如今頁面進行一系列數據合法性的驗證，節省沒必要要的錯誤數據的傳輸，以及提升用戶的體驗度。

獲取表單

前兩種經常使用

一、document.表單名稱
二、document.getElementById(表單 id);
三、document.forms[表單名稱]
四、document.forms[索引]; //從 0 開始

例如：

<body>
    <form id='myform' name="myform" action="" method="post"></form>
    <form id='myform2' name="myform2" action="" method="post"></form>
</body>
<script>
    //四種方式
    var form =document.getElementById("myform");
    form =document.myform;
    form =document.forms["myform"];
    form =document.forms[0];
    console.log(form);
</script>

獲取表單元素

獲取input元素

如 text password hidden textarea等，前兩種經常使用。

1)、經過 id 獲取：document.getElementById(元素 id);
2)、經過 form.名稱形式獲取: myform.元素名稱;    name屬性值
3)、經過 name 獲取 :document.getElementsByName(name屬性值)[索引] // 從0開始
4)、經過 tagName 數組 :document.getElementsByTagName('input')[索引] // 從0開始

<body>
    <form id='myform' name="myform" action="" method="get">     
        姓名:<input type="text" id="uname" name="uname" value="zs"/><br />
        密碼:<input type="password" id="upwd" name="upwd" value="1234"/><br />
        <input type="hidden" id="uno" name="uno" value="隱藏域" />
        我的說明:<textarea name="intro"></textarea>
        <button type="button" onclick="getTxt();" >獲取元素內容</button>
    </form>
</body>
<script>
    function getTxt(){
        var uno = document.getElementById("uno");
        var uname = myform.uname;
        console.log(uname + "--------");
        var upwd = document.getElementsByTagName('input')[1] ;
        var intro = document.getElementsByName("intro")[0];             
        console.log(uno.value +"，"+ uname.value +"，"+ upwd.value +"，"+ intro.value);
    }
</script>

獲取單選按鈕

前提：將一組單選按鈕設置相同的name屬性值

(1)獲取單選按鈕組：

document.getElementsByName("name屬性值");

(2)遍歷每一個單選按鈕，並查看單選按鈕元素的checked屬性

若屬性值爲true表示被選中，不然未被選中

選中狀態設定： checked='checked' 或 checked='true' 或 checked

未選中狀態設定：沒有checked屬性或 checked='false'

<form action="" name="myform">
    <input type="text" name="inputName" value="aaa" />
    <input type="radio" name="rad" value="1" /> 1
    <input type="radio" name="rad" value="2"  /> 2
</form>

<script type="text/javascript">
    var radios = document.getElementsByName('rad');
    //radios[0].checked = 'checked'
    for(var i = 0; i<radios.length; i++){
        console.log(radios[i].checked + '---' + radios[i].value)
    }
</script>

獲取多選按鈕

操做方式與單選同理，不一樣之處在於能夠多選

var ufav = document.getElementsByName("ufav");
var favstr = "";
    for (i = 0;i < ufav.length; i++){
        if(ufav[i].checked){
            favstr += ufav[i].value+",";
        }
    }
favstr = favstr.substr(0,favstr.length-1);

獲取下拉選項

（1）獲取 select 對象：

var ufrom = document.getElementById("ufrom");

（2）獲取選中項的索引：

var idx = ufrom.selectedIndex;

（3）獲取選中項 options 的 value屬性值：

var val = ufrom.options[idx].value;

注意：當經過options獲取選中項的value屬性值時，

若沒有value屬性，則取option標籤的內容

若存在value屬性，則取value屬性的值

（4）獲取選中項 options 的 text：

var txt = ufrom.options[idx].text;

選中狀態設定：selected='selected'、selected=true、selected

未選中狀態設定：不設selected屬性

<body onload="init()">
    <form id='myform' name="myform" action="" method="">        
        來自:
        <select id="ufrom" name="ufrom">
            <option value="-1" >請選擇</option>
            <option value="0" selected="selected">北京</option>
            <option value="1">上海</option>
        </select><br />
        <button type="button" id="sub" name="sub">提交</button>
    </form>
</body>
<script>
    function init () {
        var sub = document.getElementById("sub");
        sub.onclick = function () {
            //獲取select對象
            var ufrom = document.getElementById("ufrom");
            console.log("表單對象：" + ufrom);
            //獲取選中的索引
            var idx = ufrom.selectedIndex;
            console.log("選中項的索引值：" + idx);
            //獲取選中項的value值
            var val = ufrom.options[idx].value;
            console.log("選中項的value屬性值：" + val);
            //獲取選中項的text
            var txt = ufrom.options[idx].text;
            console.log("選中項的text：" + txt);
        }
    }
</script>

提交表單

（1）使用普通button按鈕+onclick事件+事件中編寫代碼:

獲取表單.submit();

（2）使用submit按鈕 + onclick="return 函數()" +函數編寫代碼:

最後必須返回：return true|false;

（3）使用submit按鈕/圖片提交按鈕 + 表單onsubmit="return 函數();" +函數編寫代碼:

最後必須返回：return true|false;

<form id='myform1' name="myform2" action="#" method="get" onsubmit="return onsub();">   
    <input  name="test"  id="uname"/><span id="msg"></span><br />
    <!--經過js事件：sub()提交表單-->
    <input type="button" onclick="sub();" value="提交表單1" />
    <input type="submit" onclick="return sub2();" value="提交表單2" />
    <input type="submit" value="提交onsubmit" /><br />
    <input type="image" src="img/u=71331624,2965806045&fm=23&gp=0.jpg" 
                  width="60px" height="40px" />
</form>
<script type="text/javascript">     
    // input的type=button，調用submit()方法提交
    function sub(){
        document.myform2.submit();
    }
    // 進行校驗，返回值爲true才能提交
    function sub2(){
        var uname = document.getElementById("uname");
        var val  = uname.value;
        if(val.length>0){
            return true; // 提交
        }
        document.getElementById("msg").innerHTML = "不能空着啊！！！";
        document.getElementById("msg").style.color="red";
        return false;  // 不提交
    }
    // onsubmit事件提交
    function onsub () {
        var uname = document.getElementById("uname");
        var val  = uname.value;
        if(val.length>0){
            return true; // 提交
        }
        document.getElementById("msg").innerHTML = "填寫點兒東西唄！(ˉ▽￣～) 切~~";
        document.getElementById("msg").style.color="red";
        return false; // 不提交
    }
</script>

表單校驗

<form id='myform' name="myform">
 姓名:<input type="text" id="uname" name="uname" /><br />
 密碼:<input type="password" id="upwd" name="upwd" /><br />
 年齡:<input type="radio" name="uage" value="0" checked="checked"/>小屁孩
      <input type="radio" name="uage" value="1"/>你懂得 <br />
 愛好:<input type="checkbox" name="ufav" value="籃球"/>籃球
      <input type="checkbox" name="ufav" value="爬牀"/>爬牀
      <input type="checkbox" name="ufav" value="代碼"/>代碼<br />
 來自:<select id="ufrom" name="ufrom">
          <option value="-1" selected="selected">請選擇</option>
          <option value="0">北京</option>
          <option value="1">上海</option>
      </select><br />
      <div id="validate" style="color: red;"></div>
      <button type="submit" onclick="return checkForm();">提交</button>
      <button type="reset" onclick="resetForm();">重置</button>
</form>

/**
  要求：
    一、驗證用戶名
      1)不能爲空
      2)長度爲 6-12 位
    二、驗證密碼
      1)不能爲空 *
      2)長度爲 6-12 位
      3)不能包含用戶名
    三、年齡: 必須選擇 你懂得
    四、愛好: 必須選擇一項
    五、來自: 必須選擇一項
    知足以上條件
        一、彈出全部的內容
        二、提交表單
    不然
        一、說明錯誤緣由
        二、不能提交表單
*/

// 經過id屬性值獲得dom對象
function $(id) {
    return document.getElementById(id);
}
// 重置表單全部元素 注意函數不能命名爲 clear reset 等
function resetForm(){
    // 獲取說明 div
    var validate =$('validate');
    validate.innerHTML ="";
}
// 表單校驗
function checkForm () {
    var flag =true;
    // 獲取說明 div
    var validate = $('validate');
    validate.innerHTML ="";
    // 一、驗證用戶名
    // 1)、獲取用戶名的值
    var uname = $('uname').value;
    // 1)不能爲空 -->後期正則處理
    // 2)長度爲 6-12 位
    if("" === uname || uname.length == 0 ){
        validate.innerHTML += "*用戶名不能爲空</br>";
        flag = false;
    }else if(uname.length < 6 || uname.length > 12){
        validate.innerHTML += "*用戶名長度在 6-12 位</br>";
        flag = false;
    }
    // 二、驗證密碼
    var upwd = $('upwd').value;
    // 1)不能爲空
    // 2)長度爲 6-12 位
    // 3)不能包含用戶名
    if("" === upwd || upwd.length == 0 ){
        validate.innerHTML += "*密碼不能爲空</br>";
        flag = false;
    } else if(upwd.length < 6 ||upwd.length > 12){
        validate.innerHTML += "*密碼長度在 6-12 位</br>";
        flag = false;
    } else if(uname.length > 0 && upwd.indexOf(uname) >= 0){
        validate.innerHTML += "*密碼中不能出現用戶名</br>";
        flag = false;
    }
    // 三、年齡: 必須選擇 你懂得
    var ageGroup = document.getElementsByName("uage");
    var age ;
    for (var i = 0; i < ageGroup.length; i++) {
        if(ageGroup[i].checked){
            age = ageGroup[i].value;
        }
    }
    if(age == 0){
        flag = false;
        validate.innerHTML += "*小屁孩，媽媽喊你回家</br>";
    }
    // 四、愛好: 必須選擇一項
    var ufav = document.getElementsByName("ufav");
    var favstr = "";
    for (i = 0;i < ufav.length; i++){
        if(ufav[i].checked){
            favstr += ufav[i].value + ",";
        }
    }
    favstr = favstr.substr(0,favstr.length-1);
    if(favstr.length < 1){
        flag = false;
        validate.innerHTML += "*人生真無趣</br>";
    }
    // 五、來自
    var ufrom = $('ufrom');
    var idx = ufrom.selectedIndex ;
    var val = ufrom.options[idx].value;
    var valTxt = ufrom.options[idx].text;
    if(-1 == val){
        flag = false;
        validate.innerHTML += "*你來自火星嗎?</br>";
    }
    // 知足以上條件 彈出內容
    if(flag){
        var str = "";
        str += "您的姓名是:" + uname + "\n";
        str += "您的密碼是:" + upwd + "\n";
        str += "您的年齡是:" + "能夠贏取白富美了" + "\n";
        str += "您的愛好是:" + favstr + "\n";
        str += "您來自於:" + valTxt + "\n";
        alert(str);
        // 設置表單提交的地址
        myform.action="http://www.baidu.com";
        // 提交表單
        myform.submit();
        return false;
    } else {
        return false;
    }