7_JavaScript_Html對(duì)象DOM

Html文檔對(duì)象DOM

基本概念

  1. 每個(gè)載入瀏覽器的 HTML 文檔都會(huì)成為 Document 對(duì)象。
  • Document 對(duì)象使我們可以從腳本中對(duì) HTML 頁(yè)面中的所有元素進(jìn)行訪問(wèn)。
  • Document 對(duì)象是 Window 對(duì)象的一部分
  • 當(dāng)瀏覽器打開(kāi)一個(gè)HTML文檔時(shí)，瀏覽器解析HTML文檔的標(biāo)記，并創(chuàng)建表示這些標(biāo)記的對(duì)象，這些對(duì)象就是HTML文檔對(duì)象。
  • 文檔對(duì)象即Document 對(duì)象，指的是一回事。

DOM常用方法

  1. 獲取HTML文檔對(duì)象的方法
    • getElementById() 返回對(duì)擁有指定 id 的第一個(gè)對(duì)象的引用。
    • getElementsByName() 返回帶有指定名稱的對(duì)象集合。
    • getElementsByTagName() 返回帶有指定標(biāo)簽名的對(duì)象集合。
  • 其他方法
    • write() 向文檔寫 HTML 表達(dá)式 或 JavaScript 代碼。
    • 溫馨提示：文檔加載之后使用docunment.write()會(huì)覆蓋原文檔.
```
<body>
    <h4 id="bt" class="bt">學(xué)生信息</h4>
    學(xué)號(hào)：<input type="text" id="number" class="number" value="111111"><br>
    姓名：<input type="text" id="name" class="name" value="木木"><br>
    英語(yǔ)：<input type="text" id="englist" class="english" name="score" value="60"><br>
    數(shù)學(xué)：<input type="text" id="math" name="score" value=""><br>

    <script type="text/javascript">
        var BT = document.getElementById('bt');
        var Score = document.getElementsByName('score');
        var Input = document.getElementsByTagName('input')
        document.write(BT.innerHTML+'<br>');
        document.write(Score[0].value+'<br>');
        document.write(Input[0].value+'<br>');
    </script>
</body>
```

改變 HTML 元素的樣式

在 HTML DOM 中，Element 對(duì)象表示 HTML 元素。

HTML DOM 允許 JavaScript 改變 HTML 元素的樣式。

  1. 獲取元素的內(nèi)容和標(biāo)簽名稱
    • element.innerHTML 設(shè)置或返回元素的內(nèi)容。
    • element.tagName 返回元素的標(biāo)簽名。
  2. HTML屬性的獲取
    • element.id 設(shè)置或返回元素的 id。
    • element.className 設(shè)置或返回元素的 class 屬性。
    • element.title 設(shè)置或返回元素的 title 屬性。
    • ......document.write(BT.id+'<br>');``BT.innerHTML="lala"

  • 改變CSS樣式

    • 通過(guò)style屬性操作內(nèi)聯(lián)式
      • 需要將下劃線去掉并將第二個(gè)單詞首字母大寫，比如：
      • backgroundColor/backgroundImage/borderColormarginLeft......
        Inp[0].style.background='red'
    • 通過(guò)className
      • 先在樣式表里class的樣式，然后通過(guò)JS修改元素class

  • 操作HTML文檔對(duì)象的屬性

    • element.getAttribute() 返回元素節(jié)點(diǎn)的指定屬性值。
    • element.setAttribute() 把指定屬性設(shè)置或更改為指定值。
    • element.removeAttribute() 從元素中移除指定屬性。

創(chuàng)建HTML文檔對(duì)象

javascript中可以通過(guò)createElement()方法創(chuàng)建一個(gè)元素(節(jié)點(diǎn))。

  1. createElement() 創(chuàng)建元素節(jié)點(diǎn)。
  • element.appendChild() 向元素添加新的子節(jié)點(diǎn)，作為最后一個(gè)子節(jié)點(diǎn)。
  • element.removeChild() 從元素中移除子節(jié)點(diǎn)。
var img1 = document.createElement('img');
img1.src='xx';
var div1 = document.getElementById('div1')
div1.appendChild(img1);
ul1.removeChild(li3)好像沒(méi)用

DOM節(jié)點(diǎn)

將文檔結(jié)構(gòu)相像成一棵樹，每一個(gè)部分（元素，屬性，內(nèi)容）都可以看做一個(gè)節(jié)點(diǎn)。

根據(jù)一個(gè)節(jié)點(diǎn)可以通過(guò)關(guān)系找到其他節(jié)點(diǎn)

  • 節(jié)點(diǎn)的屬性：(名稱、類型、值)
    1. element.nodeName 返回元素的名稱。與element.tagName作用相同
      文本節(jié)點(diǎn)的名稱為:#text;文檔節(jié)點(diǎn)的名稱為:#document.
    • element.nodeType 返回元素的節(jié)點(diǎn)類型。
      • 如果節(jié)點(diǎn)是元素節(jié)點(diǎn)，則 nodeType 屬性將返回 1。
      • 如果節(jié)點(diǎn)是屬性節(jié)點(diǎn)，則 nodeType 屬性將返回 2。
      • 如果節(jié)點(diǎn)是文本節(jié)點(diǎn)，則 nodeType 屬性將返回 3。
    • element.nodeValue 設(shè)置或返回元素值。
      • 文本節(jié)點(diǎn)的nodeValue為文本內(nèi)容
      • 屬性節(jié)點(diǎn)的nodeValue為屬性值
      • 元素節(jié)點(diǎn)無(wú)nodeValue
  • 子元素相關(guān)(可以類別CSS中的虛擬類別選擇器)
    1. element.parentNode 返回元素的父節(jié)點(diǎn)。
    • element.childNodes 返回元素子節(jié)點(diǎn)的 NodeList。類似CSS中的子選擇器
    • element.children 返回元素的子元素,該屬性只返回元素節(jié)點(diǎn)。
    • element.firstChild和element.firstElementChild返回元素的首個(gè)子元素。類似CSS中的：e:first-child
    • element.lastChild 和element.lastElementChild返回元素的最后一個(gè)子元素。類似CSS中的： e:last-child
    function myFun1(){
        alert(div1.nodeName)
        alert(div1.tagName)
    }
    function myFun2(){
        alert(div1.nodeType)
    }
    function myFun3(){
        alert(div1.nodeValue)
        alert(input1.nodeValue)
    }

    function myFun4(){
        var ff=div1.parentNode.nodeName
        alert(ff)
    }
    function myFun5(){
        var ch=div1.childNodes
        alert(ch[2].nodeValue)
    }
  • 同級(jí)兄弟元素相關(guān)(可以類別CSS中的兄弟選擇器)
    1. element.previousSibling element.previousElementSibling 返回位于相同節(jié)點(diǎn)樹層級(jí)的前一個(gè)元素。
    • element.nextSibling element.nextElementSibling 返回位于相同節(jié)點(diǎn)樹層級(jí)的下一個(gè)節(jié)點(diǎn)。類似CSS中的直接相鄰選擇器: h1+h2
  • 屬性節(jié)點(diǎn)
    • element.attributes 返回元素屬性的 NamedNodeMap。
    • element.insertBefore() 在指定的已有的子節(jié)點(diǎn)之前插入新節(jié)點(diǎn)。
  • element.replaceChild() 替換元素中的子節(jié)點(diǎn)。
  • .......
function myFun1(){
             ul1.firstElementChild.style.background='red'
             ul1.lastElementChild.style.background='green'
        }
        function myFun2(){
             // ul1.firstElementChild.nextElementSibling.style.background='red'
             // ul1.lastElementChild.previousElementSibling.style.background='green'
              if(ul1.firstElementChild){
                ul1.firstElementChild.nextElementSibling.style.background='red'
             }else{
                ul1.firstChild.nextSibling.style.background='red'
             }
        }
        
        function myFun3(){
            alert(input1.attributes[0].nodeName)
            alert(input1.attributes[1].nodeName)
            alert(input1.attributes[2].nodeName)
        }

        function myFun4(){
            var li5=document.createElement('li')
            li5.innerHTML="列表元素insert"
            ul1.insertBefore(li5,ul1.children[1])
        }
        
        function myFun5(){
            var li5=document.createElement('li')
            li5.innerHTML="列表元素insert"
            ul1.replaceChild(li5,ul1.children[1])
        }

練習(xí)：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style type="text/css">
       div{
           margin: 15px auto;
           background: orange;
           width: 300px;
           height: 240px;
           text-align: center;
           padding: 15px;
       }
       input{
           margin: 10px 10px;
           padding: 5px;
       }
   </style>
</head>
<body>
   <div>
       <h3>計(jì)算圓的面積</h3>
        <label for="radius">半徑:</label>
        <input type="text" id="radius" ><br>
        <label for="area">面積:</label>
        <input type="text" id="area" ><br><br>
        <input type="button" id="js" value="計(jì)算" onclick="show()">
        <input type="button" id="cl" value="清空" onclick="cl()">
   </div>
   <script type="text/javascript">
       function area(r) {
           return Math.PI*r*r;
       }

       function show() {
           var radius = document.getElementById('radius').value;
           document.getElementById('area').value = area(radius)
       }

       function cl() {
           document.getElementById('radius').value = '';
           document.getElementById('area').value = '';
       }
   </script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style type="text/css">
   img{
           border-style: groove;
           border-width: 5px;
           border-color: orange;
           display:none;
       }
       input[type='button']{
           width: 60px;
           height: 60px;
           border-radius: 30px;
           outline: none;
       }
   </style>
</head>
<body>
   <input type="text" id="imgUrl" value=""> <br>
   <input type="button" value="播放" onclick="autoPlay()">
   <input type="button" value="添加圖片" onclick="addImage()"><br>
   <img src="" alt=""  height="300" id="img"><br>
   <script type="text/javascript">
       var imgArray = new Array();
       var index = 0;
       function autoPlay() {
           var imgObj = document.getElementById('img');
           imgObj.style.display = 'inline';
           if (imgArray.length <= 0) {
               imgObj.setAttribute('alt','木有圖片');
           }else {
               index = (index+1)%imgArray.length;
               var imgId = imgArray[index];
               imgObj.setAttribute('src',imgId);
           }
           setTimeout('autoPlay()',1000);
       }

       function addImage(){
           var imgUrl=document.getElementById('imgUrl').value;
           imageArr.push(imgUrl)
       }
   </script>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 節(jié)點(diǎn)層次 DOM 可以將任何 HTML 和 XML 文檔描繪成一個(gè)由多層節(jié)點(diǎn)構(gòu)成的結(jié)構(gòu)。節(jié)點(diǎn)分為幾種不同的類型，每...
    云之外閱讀 578評(píng)論 0贊 1
  • 本章內(nèi)容 理解包含不同層次節(jié)點(diǎn)的 DOM 使用不同的節(jié)點(diǎn)類型 克服瀏覽器兼容性問(wèn)題及各種陷阱 DOM 是針對(duì) HT...
    悶油瓶小張閱讀 764評(píng)論 0贊 1
  • Element 類型 除了 Document 類型之外，Element 類型就要算是 Web 編程中最常用的類型了...
    劼哥stone閱讀 703評(píng)論 0贊 3
  • 01 昨天，辦公室的董老師講了一個(gè)這樣的場(chǎng)面。在她樓下的麻將館里，有個(gè)女人對(duì)她老公左右開(kāi)弓，猛扇耳光。而那個(gè)老公，...
    凌云之燕閱讀 514評(píng)論 0贊 2
  • 1 先要說(shuō)一個(gè)悲傷的事情，昨晚洗臉不注意，咔一下，項(xiàng)鏈斷掉了，我拿起來(lái)看了半天，還是不相信它壞了。從收到它開(kāi)始，一...
    迷糊的小捕手閱讀 556評(píng)論 0贊 1

友情鏈接更多精彩內(nèi)容