DOM

什么是DOM:
DOM樹:
查找元素

一. 什么是DOM: Document Object Model（文檔對(duì)象模型）

什么是: 專門操作網(wǎng)頁內(nèi)容的一套對(duì)象和函數(shù)的集合载矿。
何時(shí): 今后只要想操作網(wǎng)頁內(nèi)容币励，都必須用DOM

dom1.png

DOM標(biāo)準(zhǔn): W3C負(fù)責(zé)制定并維護(hù)的一套國際標(biāo)準(zhǔn)纠屋。幾乎所有瀏覽器100%兼容据忘。
4. 包括: 5件事: 增刪改查+事件綁定

二. DOM樹:

什么是: 專門在內(nèi)存中保存一個(gè)網(wǎng)頁的所有內(nèi)容的樹形結(jié)構(gòu)岖圈。
為什么: 因?yàn)榫W(wǎng)頁中的元素都是上下級(jí)包含關(guān)系讹语，而樹形結(jié)構(gòu)是最適合保存上下架包含關(guān)系的結(jié)構(gòu)。最直觀蜂科。
如何:

dom2.png

三. 查找元素: 4種:

強(qiáng)調(diào): 所有元素對(duì)象顽决，必須找到才能使用！沒有任何一個(gè)節(jié)點(diǎn)/元素可以直接使用导匣！

不需要查找就可快速獲得的元素: 4種:
(1). 樹根節(jié)點(diǎn)對(duì)象: document對(duì)象
(2). <html>: document.documentElement
(3). <head>: document.head
(4). <body>: document.body
總結(jié): DOM 4步:
1. 先查找觸發(fā)事件的元素
2. 再為元素綁定事件處理函數(shù)
3. 查找要修改的元素
4. 修改元素

總結(jié): DOM 5件事: 增刪改查+事件綁定:
//不要背才菠！用到時(shí)，來查找贡定，復(fù)制粘貼就行了赋访！
1. 查找元素: 4種
(1). 不需要查找就可直接獲得的元素對(duì)象: 4種:
document 根節(jié)點(diǎn) document
document.documentElement —— <html>
document.head —— <head>
document.body —— <body>
1. 查找 2. 修改

一. 查找:

1. 按節(jié)點(diǎn)間關(guān)系查找:

(1). 何時(shí): 如果我們已經(jīng)提前獲得了一個(gè)元素，想找它周圍附近的關(guān)系比較緊密的元素時(shí)缓待，都用按節(jié)點(diǎn)間關(guān)系查找蚓耽。
(2). 節(jié)點(diǎn)樹:
a. 什么是: 包含所有網(wǎng)頁內(nèi)容的完整樹結(jié)構(gòu)。
b. 2大類關(guān)系: 6個(gè)屬性:
**1). 父子關(guān)系: 4個(gè)屬性: **
i. 獲得一個(gè)元素的父元素: 元素對(duì)象.parentNode父節(jié)點(diǎn)對(duì)象
ii. 獲得一個(gè)元素下的所有直接子元素: 元素對(duì)象.childNodes子節(jié)點(diǎn)對(duì)象們
iii. 獲得一個(gè)元素下的第一個(gè)直接子元素: 元素對(duì)象.firstChild
第一個(gè)孩子
iv. 獲得一個(gè)元素下的最后一個(gè)直接子元素: 元素對(duì)象.lastChild
最后一個(gè)孩子
2). 兄弟關(guān)系: 2個(gè)屬性
i. 獲得當(dāng)前元素的前一個(gè)兄弟元素: 元素對(duì)象.previousSibling
前一個(gè) 兄弟
ii. 獲得當(dāng)前元素的后一個(gè)兄弟元素: 元素對(duì)象.nextSibling
后一個(gè)兄弟
c. 問題: 節(jié)點(diǎn)樹會(huì)把看不見的空字符(空格旋炒、換行步悠、Tab)也看成是DOM樹上的節(jié)點(diǎn)對(duì)象。但是瘫镇，開發(fā)時(shí)我們從不關(guān)心看不見的空節(jié)點(diǎn)對(duì)象鼎兽，只關(guān)心可以看見的元素節(jié)點(diǎn)對(duì)象芹壕。所以，節(jié)點(diǎn)樹最大的缺點(diǎn)是干擾我們的查找接奈！所以，將來節(jié)點(diǎn)樹幾乎不用通孽！
**(3). 元素樹: **
a. 什么是: 只包含元素節(jié)點(diǎn)對(duì)象的樹結(jié)構(gòu)序宦。
b. 好處: 沒有多余的對(duì)象干擾查找結(jié)構(gòu)。
c. 2大類關(guān)系: 6個(gè)屬性
1). 父子關(guān)系: 4個(gè)屬性
i. 獲得一個(gè)元素的父元素: 元素對(duì)象.parentElement
父元素
ii. 獲得一個(gè)元素的所有直接子元素: 元素對(duì)象.children
孩子們
返回: 類數(shù)組對(duì)象背苦，其中包含這個(gè)元素的所有直接子元素對(duì)象
iii. 獲得一個(gè)元素下第一個(gè)直接子元素:
元素對(duì)象.firstElementChild
第一個(gè) 元素孩子
iv. 獲得一個(gè)元素下最后一個(gè)直接子元素
元素對(duì)象.lastElementChild
最后一個(gè)元素孩子
2). 兄弟關(guān)系: 2個(gè)屬性:
i. 獲得當(dāng)前元素的前一個(gè)兄弟元素: 元素對(duì)象.previousElementSibling 前一個(gè) 元素兄弟
ii. 獲得當(dāng)前元素的后一個(gè)兄弟元素: 元素對(duì)象.nextElementSibling
后一個(gè)元素兄弟

dom3.png

(4). 示例: 使用元素樹關(guān)系互捌，查找想要的元素
1_domTree.html

<!DOCTYPE HTML>
<html>
  <head>
    <title>DOM Tree</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <span id="s1">Hello</span>
    <h1>標(biāo)題一</h1>
    <script>
      //輸出DOM樹結(jié)構(gòu)
      console.log(document);
      console.log(document.documentElement);
      console.log(document.head);
      console.log(document.body);
      //輸出一個(gè)對(duì)象自己身上的屬性結(jié)構(gòu): 
      console.dir(document);
      console.dir(document.documentElement);
      console.dir(document.head);
      console.dir(document.body);
      //想獲得body下所有直接子元素:
      //錯(cuò)誤:
      // var childNodes=document.body.childNodes;
      // console.log(childNodes);
      //正確: 
      var children=document.body.children;
      console.log(children);
      //獲得body下第一個(gè)直接子元素: span
      //錯(cuò)誤: 
      // var span=document.body.firstChild;
      //正確: 
      var span=document.body.firstElementChild;
      console.log(span);
      //想獲得h1
      //錯(cuò)誤: 
      // var h1=span.nextSibling;
      //正確: 
      var h1=span.nextElementSibling;
            //children[1]
      console.log(h1);
    </script>
  </body>
</html>

運(yùn)行結(jié)果:
[圖片上傳失敗...(image-6a66ab-1627540705608)]

2. 按HTML特征查找：
(1). 問題: 如果要找的元素距離當(dāng)前的元素比較遠(yuǎn)，或藏的層級(jí)很深行剂，如果用節(jié)點(diǎn)間關(guān)系查找秕噪，步驟很繁瑣
(2). 解決: 今后，還可以按元素身上的HTML特征來查找任意位置的元素.
(3). 包括: 4個(gè)函數(shù)
a. 按id名查找一個(gè)元素對(duì)象:
1). var 一個(gè)元素對(duì)象=document.getElementById("id名");
在整個(gè)網(wǎng)頁中查找元素
按id名
2). 返回值:
i. 如果找到指定id名的元素厚宰，則返回這個(gè)元素的對(duì)象
ii. 如果沒找到指定id名的元素腌巾，則返回null
3). 強(qiáng)調(diào):
i. .前必須是document
ii. 因?yàn)樽⒍ㄖ荒芊祷匾粋€(gè)元素，所以铲觉，方法名中的Element是單數(shù)澈蝙，沒有s結(jié)尾。
4). 問題: 一次注定只能查找一個(gè)元素
b. 按標(biāo)簽名查找多個(gè)元素:
1). var 類數(shù)組對(duì)象=任意父元素.getElementsByTagName("標(biāo)簽名")
在任意父元素下查找元素們
按標(biāo)簽名
2). 返回值:
i. 如果找到指定標(biāo)簽名稱的元素撵幽，就會(huì)放在一個(gè)類數(shù)組對(duì)象中返回灯荧。
ii. 如果沒找到指定標(biāo)簽名稱的元素，就返回空類數(shù)組對(duì)象:
{ length:0 } 不同于null
3). 強(qiáng)調(diào):
i. .前可以寫任意一個(gè)父元素盐杂，表示只在這個(gè)父元素內(nèi)查找符合要求的元素逗载。選擇合適的父元素縮小查找范圍，有助于提高查找速度链烈！當(dāng)然厉斟，如果確實(shí)需要在整個(gè)網(wǎng)頁范圍查找元素，.前也可以寫document测垛。
ii. 因?yàn)榘礃?biāo)簽名查找完全有可能找到多個(gè)元素捏膨，所以，函數(shù)名中Elements是復(fù)數(shù)形式食侮，s結(jié)尾号涯，表示多個(gè)。
iii. 不但在直接子元素中查找锯七，而且還會(huì)在所有后代中查找符合要求的元素链快。
iv. 如果只找到一個(gè)符合要求的元素，也會(huì)返回一個(gè)類數(shù)組對(duì)象眉尸，然后域蜗，把唯一找到的元素巨双，放在類數(shù)組對(duì)象中第一個(gè)[0]位置的元素。又因?yàn)槊够觯覀冏罱K要操作的是元素對(duì)象筑累，不是類數(shù)組對(duì)象，所以丝蹭，如果想獲得找到的唯一的一個(gè)元素對(duì)象慢宗，必須手工加[0]才能取出0位置的一個(gè)元素對(duì)象來繼續(xù)操作。

dom4.png

c. 按class名查找多個(gè)元素:
1). var 類數(shù)組對(duì)象=任意父元素.getElementsByClassName("class名")
在任意父元素下獲取多個(gè)元素
按class名
2). 返回值:
i. 如果找到指定class名的元素奔穿，就會(huì)放在一個(gè)類數(shù)組對(duì)象中返回镜沽。
ii. 如果沒找到指定class名的元素，就返回空類數(shù)組對(duì)象:
{ length:0 } 不同于null
3). 強(qiáng)調(diào):
i. .前可以寫任意一個(gè)父元素贱田，表示只在這個(gè)父元素內(nèi)查找符合要求的元素缅茉。選擇合適的父元素縮小查找范圍，有助于提高查找速度男摧！當(dāng)然蔬墩，如果確實(shí)需要在整個(gè)網(wǎng)頁范圍查找元素，.前也可以寫document耗拓。
ii. 因?yàn)榘碿lass名查找完全有可能找到多個(gè)元素筹我，所以，函數(shù)名中Elements是復(fù)數(shù)形式帆离，s結(jié)尾蔬蕊，表示多個(gè)。
iii. 不但在直接子元素中查找哥谷，而且還會(huì)在所有后代中查找符合要求的元素岸夯。
iv. 如果只找到一個(gè)符合要求的元素，也會(huì)返回一個(gè)類數(shù)組對(duì)象们妥，必須手工加[0]才能取出0位置的一個(gè)元素對(duì)象來繼續(xù)操作猜扮。
v. 如果一個(gè)元素同時(shí)被多個(gè)class修飾，則只需要其中任意一個(gè)class监婶，就可找到這個(gè)元素旅赢。
d. 按name名查找多個(gè)元素:
1). 何時(shí): 今后如果查找?guī)в衝ame名的表單元素，都用按name名查找
2). 如何:
var 類數(shù)組對(duì)象=document.getElementsByName("name名")
在整個(gè)頁面中查找多個(gè)元素
按Name名
3). 返回值:
i. 如果找到指定name名的元素惑惶，就會(huì)放在一個(gè)類數(shù)組對(duì)象中返回煮盼。
ii. 如果沒找到指定name名的元素，就返回空類數(shù)組對(duì)象:
{ length:0 } 不同于null
4). 強(qiáng)調(diào):
i. .前必須寫document带污。
ii. 因?yàn)榘磏ame名查找完全有可能找到多個(gè)元素僵控，所以，函數(shù)名中Elements是復(fù)數(shù)形式鱼冀，s結(jié)尾报破，表示多個(gè)悠就。
iii. 如果只找到一個(gè)符合要求的元素，也會(huì)返回一個(gè)類數(shù)組對(duì)象充易，必須手工加[0]才能取出0位置的一個(gè)元素對(duì)象來繼續(xù)操作梗脾。
(4). 示例: 使用按HTML特征查找獲取想要的元素

2_iterator.html
<!DOCTYPE HTML>

<html>

  <head>

    <title>遍歷節(jié)點(diǎn)樹</title>

    <meta charset="utf-8"/>

  </head>

  <body>

    <span>Hello World !</span>

    <ul id="nav">

      <li class="item parent">電影</li>

      <li class="item parent">綜藝

        <ul>

          <li class="item child active">跑男</li>

          <li class="item child">爸爸</li>

          <li class="item child">極限</li>

        </ul>

      </li>

      <li class="item parent">劇集</li>

    </ul> 

    <form>

      用戶名:<input name="uname"><br/>

      性別:<label><input type="radio" name="sex" value="1">男</label>

      <label><input type="radio" name="sex" value="0">女</label>

    </form>

    <script>

      //查找id為nav的ul

      var ulNav=document.getElementById("nav");

      console.log(ulNav);

      //查找id為navy的元素(不存在)

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

      console.log(navy);

      //查找ulNav元素下所有l(wèi)i元素

      var lis=ulNav.getElementsByTagName("li");

      console.log(lis);

      //查找ulNav下唯一內(nèi)嵌的一個(gè)ul

      //錯(cuò)誤: 得不到ul元素對(duì)象，只能得到一個(gè)大的類數(shù)組對(duì)象

      // var ul=ulNav.getElementsByTagName("ul");

      var ul=ulNav.getElementsByTagName("ul")[0];

      console.log(ul);

      //查找ulNav下的td元素(不存在)

      var tds=ulNav.getElementsByTagName("td");

      console.log(tds);

      //查找ulNav下所有class為child的元素

      var children=ulNav.getElementsByClassName("child");

      console.log(children);

      //只查找ulNav下一個(gè)class為active的元素

      //錯(cuò)誤: 

      // var active=ulNav.getElementsByClassName("active")

      var active=

        ulNav.getElementsByClassName("active")[0];

      console.log(active);

      //查找name名為sex的所有表單元素

      var radios=document.getElementsByName('sex');

      console.log(radios);

      //查找name名為uname的一個(gè)文本框?qū)ο?
      //錯(cuò)誤: 

      // var txt=document.getElementsByName("uname");

      var txt=document.getElementsByName("uname")[0];

      console.log(txt);

    </script>

  </body>

</html>

運(yùn)行結(jié)果:

333.png

3. 按選擇器查找:

(1). 問題: 如果元素藏的很深盹靴，無法用一個(gè)條件一次性找到藐唠，則用以上兩種方式查找，代碼會(huì)很繁瑣鹉究。
(2). 解決: 今后，只要無法憑借一個(gè)查詢條件就能直接獲得元素踪宠，都可以用選擇器查找自赔。
(3). 如何: 2個(gè)函數(shù)
a. 只查找一個(gè)符合要求的元素
1). var 一個(gè)元素對(duì)象=任意父元素.querySelector("任意css3選擇器");
在任意父元素下查找元素
按選擇器
2). 返回值:
i. 如果找到符合要求的元素，就返回一個(gè)元素對(duì)象
ii. 如果沒找到返回null
3). 強(qiáng)調(diào):
i. 可以用任意父元素作為.前的主語用來縮小查找范圍柳琢。當(dāng)然也可以用document绍妨。
ii. 不止查找直接子元素，而且在所有后代中查找柬脸。
b. 查找多個(gè)符合要求的元素:
1). var 類數(shù)組對(duì)象=任意父元素.querySelectorAll("任意css3選擇器")
在任意父元素下查找所有符合要求的元素
按選擇器
2). 返回值:
i. 如果找到符合要求的元素他去，則返回一個(gè)類數(shù)組對(duì)象
ii. 如果沒找到符合要求的元素，則返回空類數(shù)組對(duì)象: { length:0 }
3). 強(qiáng)調(diào):
i. 可以用任意父元素作為.前的主語用來縮小查找范圍倒堕。當(dāng)然也可以用document灾测。
ii. 不止查找直接子元素，而且在所有后代中查找垦巴。

4. 示例: 購物車效果

(1). 所有DOM效果媳搪，都可以標(biāo)準(zhǔn)的DOM4步來實(shí)現(xiàn):
a. 先查找觸發(fā)事件的元素
b. 為元素綁定事件處理函數(shù)
c. 再查找要修改的元素
d. 修改元素
(2). 點(diǎn)按鈕，修改數(shù)量
a. 先查找觸發(fā)事件的元素: 本例中查找table下所有button元素
b. 為元素綁定事件處理函數(shù):
1). 什么是事件: 瀏覽器自動(dòng)觸發(fā)的或用戶手工觸發(fā)的頁面中內(nèi)容或狀態(tài)的改變骤宣。
2). 什么是事件處理函數(shù): 當(dāng)事件發(fā)生時(shí)秦爆，我們希望自動(dòng)執(zhí)行的一個(gè)個(gè)任務(wù)函數(shù)。
3). 何時(shí): 今后憔披，只要希望每當(dāng)元素上發(fā)生一個(gè)事件時(shí)等限，都能自動(dòng)執(zhí)行一項(xiàng)操作，都用事件處理函數(shù)
4). 如何: 都要提前將一個(gè)函數(shù)芬膝，保存到元素對(duì)象身上的一個(gè)專門的事件屬性上望门。——事件綁定:2種
i. 在HTML中: 2步
?先在<script>中定義一個(gè)函數(shù)(也可以放在<body>結(jié)尾)
?再在<body>中HTML元素上為元素添加事件屬性锰霜，并將函數(shù)調(diào)用語句保存在事件屬性上怒允。
<元素 on事件名="函數(shù)名()">

111.png

?問題: 因?yàn)橹荒苁止ぬ砑樱詷O其不便于維護(hù)锈遥。
ii. 在js中綁定:
?先在js中查找到要觸發(fā)事件的元素
?再為元素對(duì)象的事件屬性賦值一個(gè)事件出路函數(shù)
元素對(duì)象.on事件名=function(){ ... }
?優(yōu)點(diǎn): 可以用程序批量自動(dòng)完成纫事！

dom5.png

5). 結(jié)果: 每當(dāng)瀏覽器偵測到這個(gè)元素上發(fā)生了一個(gè)事件/改變時(shí)勘畔，都會(huì)自動(dòng)在這個(gè)元素身上查找與當(dāng)前事件匹配的事件屬性。然后丽惶，自動(dòng)調(diào)用這個(gè)事件屬性上提前保存的事件處理函數(shù)炫七。
6). 問題: 在事件處理函數(shù)中，想獲取當(dāng)前觸發(fā)事件的元素本身钾唬。如果使用事件處理函數(shù)外的全局變量万哪，不靠譜。因?yàn)槭录幚砗瘮?shù)是在將來單擊時(shí)才觸發(fā)執(zhí)行抡秆，而在元素被單擊之前奕巍，全局遍歷可能早就發(fā)生變化了！
7). 解決: 今后儒士，只要想在事件處理函數(shù)內(nèi)的止，自動(dòng)獲得正在觸發(fā)事件的當(dāng)前元素對(duì)象，可用this關(guān)鍵字着撩！而不要用全局變量诅福！

dom6.png

8). 擴(kuò)展: 為什么改成let不好:
c. 再查找要修改的元素: （要放在事件處理函數(shù)內(nèi)）
本例中: 查找當(dāng)前按鈕的爹的第二個(gè)孩子span

dom7.png

d. 修改span元素的內(nèi)容:
1). 先獲取span元素的內(nèi)容，轉(zhuǎn)為整數(shù)
2). 修改span元素的內(nèi)容:

如果當(dāng)前按鈕的內(nèi)容是+
就將整數(shù)+1
否則如果當(dāng)前按鈕的內(nèi)容是-拖叙，并且整數(shù)的還值>1
才能整數(shù)-1
3). 最后氓润，將計(jì)算出的新值再放回span的內(nèi)容中
e. 示例: 實(shí)現(xiàn)點(diǎn)擊按鈕修改數(shù)量:
shoppingCart_0.html
(3). 數(shù)量修改，計(jì)算小計(jì)
a. 查找觸發(fā)事件的元素——已完成
b. 綁定事件處理函數(shù)——已完成
c. 查找要修改的元素——要寫在事件處理函數(shù)中
d. 修改元素——要寫在事件處理函數(shù)中

dom9.png

(4). 小計(jì)修改薯鳍，計(jì)算總價(jià)
a. 查找觸發(fā)事件的元素——已完成
b. 綁定事件處理函數(shù)——已完成
c. 查找要修改的元素——要寫在事件處理函數(shù)中
d. 修改元素——要寫在事件處理函數(shù)中

xom11.png

e. 示例: 實(shí)現(xiàn)小計(jì)變化咖气，計(jì)算總價(jià):
shoppingCart.html

<!DOCTYPE HTML>
<html>
<head>
  <title>使用Selector API實(shí)現(xiàn)購物車客戶端計(jì)算</title>
  <meta charset="utf-8" />
  <style>
    table {
      width: 600px;
      text-align: center;
      border-collapse: collapse;
    }
    td,
    th {
      border: 1px solid black
    }
    td[colspan="3"] {
      text-align: right;
    }
    /*想讓tbody下每行最后一個(gè)td背景變?yōu)榉凵?/
    tbody td:last-child{
      background-color:pink
    }
    /*想讓tfoot下最后一個(gè)td背景變?yōu)辄S色*/
    tfoot td:last-child{
      background-color:yellow
    }
  </style>
</head>
<body>
  <table id="data">
    <thead>
      <tr>
        <th>商品名稱</th>
        <th>單價(jià)</th>
        <th>數(shù)量</th>
        <th>小計(jì)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>iPhone6</td>
        <td>￥4488.00</td>
        <td>
          <button>-</button>
          <span>1</span>
          <button>+</button>
        </td>
        <td>￥4488.00</td>
      </tr>
      <tr>
        <td>iPhone6 plus</td>
        <td>￥5288.00</td>
        <td>
          <button>-</button>
          <span>1</span>
          <button>+</button>
        </td>
        <td>￥5288.00</td>
      </tr>
      <tr>
        <td>iPad Air 2</td>
        <td>￥4288.00</td>
        <td>
          <button>-</button>
          <span>1</span>
          <button>+</button>
        </td>
        <td>￥4288.00</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="3">Total: </td>
        <td>￥14064.00</td>
      </tr>
    </tfoot>
  </table>
  <script>
    //DOM 4步: 
    //1. 查找觸發(fā)事件的元素: 
    //本例中：查找table下的所有button元素
    //1.1 先查找id為data的table
    var table=document.getElementById("data");
    //1.2 再查找table下所有button元素
    var buttons=table.getElementsByTagName("button");
    console.log(buttons);
    //2. 為元素綁定單擊事件:
    //遍歷查找結(jié)果buttons中每個(gè)按鈕對(duì)象
    for(var button of buttons){
      //每遍歷一個(gè)按鈕對(duì)象button，就為當(dāng)前按鈕賦值一個(gè)事件處理函數(shù)
      button.onclick=function(){
        //希望點(diǎn)哪個(gè)按鈕挖滤，讓哪個(gè)按鈕的內(nèi)容變小花
        //錯(cuò)誤:全局變量button采章，在循環(huán)結(jié)束后已經(jīng)指向最后一個(gè)按鈕
        // button.innerHTML="?";
        //正確: 
        // this.innerHTML="?";
        //3. 查找要修改的元素
        //本例中: 查找當(dāng)前按鈕的爹的第二個(gè)孩子
        var span=this.parentElement.children[1];
        //4. 修改元素
        //4.1 先獲取span元素中的舊內(nèi)容，轉(zhuǎn)為數(shù)字
        var n=parseInt(span.innerHTML);
        //4.2 再對(duì)數(shù)字+1或-1
        //如果當(dāng)前按鈕的內(nèi)容是+
        if(this.innerHTML=="+"){
          n++;//就n++;
        }else if(n>1){
        //否則如果當(dāng)前按鈕的內(nèi)容是-壶辜，并且n的值還>1
          n--;//才n--;
        }
        //4.3 再將計(jì)算出來的新數(shù)字放回span元素的內(nèi)容中
        span.innerHTML=n;
        /*功能二, 數(shù)量修改悯舟，計(jì)算小計(jì)*/
        //3. 查找要修改的元素
        //本例中：查找當(dāng)前按鈕的爹的下一個(gè)兄弟
        var tdSub=this.parentElement.nextElementSibling
        //4. 修改元素: 
        //4.1 先獲得單價(jià)
        var price=parseFloat(
          this //當(dāng)前按鈕
          .parentElement //當(dāng)前按鈕所在td
          .previousElementSibling //當(dāng)前td的前一個(gè)兄弟td
          .innerHTML //前一個(gè)td的內(nèi)容
          .slice(1) //選取除了開頭￥以外的剩余字符串
        );
        //4.2 單價(jià)*數(shù)量算出小計(jì)
        var sub=price*n;
        //4.3 將小計(jì)放入小計(jì)單元格的內(nèi)容中
        tdSub.innerHTML=`￥${sub.toFixed(2)}`;
        /*功能三: 修改小計(jì)，計(jì)算總計(jì)*/
        //3. 查找要修改的元素
        //本例中: 最終要修改tfoot中最后一個(gè)總價(jià)單元格的內(nèi)容
        var tdTotal=document.querySelector(
          "tfoot td:last-child"
        );
        console.log(tdTotal);
        //4. 修改元素
        //4.1 先獲得tbody中每行最后一個(gè)小計(jì)td
        var tds=document.querySelectorAll(
          "tbody td:last-child"
        )
        console.log(tds);
        //4.2 遍歷查找結(jié)果中每個(gè)小計(jì)td
        //先定義一個(gè)變量total=0砸民，準(zhǔn)備臨時(shí)保存累加的總價(jià)
        var total=0;
        for(var td of tds){
          //每遍歷一個(gè)td,就獲得當(dāng)前td的內(nèi)容抵怎，去掉￥，轉(zhuǎn)數(shù)字后累加成總價(jià)
          total+=parseFloat(td.innerHTML.slice(1));
        }
        //4.3 將總價(jià)放入到tfoot中最后一個(gè)總價(jià)單元格中岭参。
        tdTotal.innerHTML=`￥${total.toFixed(2)}`;
      }
    }
  </script>
</body>
</html>

運(yùn)行結(jié)果:

dom12.png

二. 修改: 3種東西: 內(nèi)容反惕，屬性，樣式

1. 內(nèi)容: 3種

(1). 獲取或修改元素開始標(biāo)簽到結(jié)束標(biāo)簽之間的原始的HTML內(nèi)容
元素.innerHTML
內(nèi)部 HTML
(2). 獲取或修改元素開始標(biāo)簽到結(jié)束標(biāo)簽之間的純文本內(nèi)容:
a. 元素.textContent
文本內(nèi)容
b. 獲取時(shí): 比innerHTML多做2件事:
1). 去掉了內(nèi)嵌的標(biāo)簽
2). 將特殊符號(hào)翻譯為正文演侯。
c. 修改時(shí):
1). .innerHTML姿染，會(huì)先將內(nèi)容交給瀏覽器解析，然后顯示解析后的可以給人看的結(jié)果
2). .textContent，不會(huì)將內(nèi)容交給瀏覽器解析悬赏，而是無論多難看狡汉，都原樣顯示！
d. 總結(jié): 建議:
1). 如果要操作的內(nèi)容中包含HTML元素或特殊符號(hào)闽颇，首先innerHTML
2). 如果要操作的內(nèi)容中不包含HTML元素或特殊符號(hào)盾戴，則innerHTML和textContent都行！
(3). 獲取和修改表單元素的值:
a. 問題: 大部分表單元素兵多，比如input尖啡，都是單標(biāo)記，沒有結(jié)束標(biāo)簽剩膘，所以無法使用innerHTML或textContent獲取或修改元素的內(nèi)容
b. 解決: 今后衅斩，只要先獲取或修改任何一個(gè)表單元素的值，統(tǒng)一都用.value屬性怠褐。
(4). 示例: 獲取和修改各種元素的內(nèi)容畏梆，比較差別:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h3 id="msg1">來自<<<a href="#">新華社</a>>>的消息</h3>
  <h3 id="msg2"></h3>
  <h3 id="msg3"></h3>
  <input id="txt"><button id="btn">百度一下</button>
  <script>
    //用兩種方式獲取msg1的內(nèi)容
    var msg1=document.getElementById("msg1");
    console.log(msg1.innerHTML);
    console.log(msg1.textContent);
    //分別給兩個(gè)h3賦值相同帶有內(nèi)嵌HTML標(biāo)簽的內(nèi)容: 
    var msg2=document.getElementById("msg2");
    var msg3=document.getElementById("msg3");
    msg2.innerHTML=`來自<<<a href="#">新華社</a>>>的消息`;
    msg3.textContent=`來自<<<a href="#">新華社</a>>>的消息`;
    //想點(diǎn)擊按鈕，就能獲得文本款中的內(nèi)容惫搏，執(zhí)行搜索操作
    var btn=document.getElementById("btn");
    btn.onclick=function(){
      var txt=document.getElementById("txt");
      console.log(`搜索${txt.value}相關(guān)的內(nèi)容...`);
    }
  </script>
</body>
</html>

運(yùn)行結(jié)果:

dom14.png

(5). 示例: 實(shí)現(xiàn)開關(guān)門效果：
0_door.html

<!DOCTYPE HTML>
<html>
<head>
  <title>讀取并修改元素的內(nèi)容</title>
  <meta charset="utf-8" />
  <style>
    div {
      float: left;
      height: 100px;
      line-height: 100px;
    }
    #d1,
    #d3 {
      background-color: #ccff00;
    }
    #d2 {
      cursor: pointer;
      background-color: #ffcc00;
    }
  </style>
</head>

<body>
  <div id="d1">樹形列表</div>
  <div id="d2">&lt;&lt;</div>
  <div id="d3">內(nèi)容的主體</div>
  <script>
    //DOM 4步
    //1. 查找觸發(fā)事件的元素
    //本例中: 查找id為d2的div
    var d2=document.getElementById("d2");
    //2. 綁定事件處理函數(shù)
    d2.onclick=function(){
      //3. 查找要修改的元素
      //本例中: 查找id為d1的div
      var d1=document.getElementById("d1");
      //4. 修改元素
      //如果當(dāng)前d2的箭頭<<，說明當(dāng)前d1是開著的
      if(this.innerHTML=="&lt;&lt;"){
        //就把d1關(guān)上(隱藏)
        //HTML中手工隱藏: 
        //<元素 style="display:none">
        //js中:
        d1.style.display="none";
        //將當(dāng)前d2的箭頭改為>>
        this.innerHTML="&gt;&gt;"
      }else{//否則當(dāng)前d2的箭頭>>蚕涤，說明當(dāng)前d1是關(guān)著的
        //就把d1打開
        //HTML中手工顯示:
        //<元素 style="display:block">
        //js中: 
        d1.style.display="block";
        //將當(dāng)前d2的箭頭改為<<
        this.innerHTML="&lt;&lt;";
      }
    }
  </script>
</body>
</html>

運(yùn)行結(jié)果：

kaiguanmen1.png

kaiguanmen2.png

2. 屬性: 3種

(1). 字符串類型的HTML標(biāo)準(zhǔn)屬性
a. 什么是: HTML標(biāo)準(zhǔn)中規(guī)定的筐赔，屬性值為字符串類型的屬性:
b. 比如: name, class, id, title, href, src, ...
c. 如何: 2種:
1). 舊DOM中的核心函數(shù):4個(gè)
i. 獲取一個(gè)屬性的值: 元素.getAttribute("屬性名")
獲取屬性值
ii. 修改一個(gè)屬性的值: 元素.setAttribute("屬性名", "屬性值")
修改屬性值
iii. 判斷一個(gè)元素是否包含某個(gè)屬性: 元素.hasAttribute("屬性名")
是否有這個(gè)屬性
iv. 移除一個(gè)元素上的某個(gè)屬性: 元素.removeAttribute("屬性名")
移除屬性
2). 新HTML DOM中提供了一組簡寫:
i. 前提: HTML DOM中已經(jīng)將所有字符串類型的HTML標(biāo)準(zhǔn)屬性提前保存在了內(nèi)存中元素對(duì)象身上。只不過暫時(shí)沒有用的屬性值默認(rèn)為空字符串""
ii. 如何用HTML DOM實(shí)現(xiàn)以上四個(gè)功能：
?獲取一個(gè)屬性的值: 元素.屬性名
? 修改一個(gè)屬性的值: 元素.屬性名=屬性值
?判斷元素是否包含某個(gè)屬性: 元素.屬性名!==""
?移除一個(gè)屬性: 元素.屬性名=""
3). 示例: 分別使用核心DOM和HTML DOM操作元素的屬性:
1_attribute.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <a id="a1" >go to tmooc</a>
  <script>
    var a1=document.getElementById("a1");
    //舊核心DOM 4個(gè)函數(shù)
    // //想獲得a1的href屬性值
    // console.log(a1.getAttribute("href"));
    // //想修改a1的target屬性值
    // a1.setAttribute("target","_blank");
    // //想判斷a1中是否包含id屬性
    // console.log(a1.hasAttribute("id"));//true
    // //想移除a1的id屬性
    // a1.removeAttribute("id");
    // //再次判斷a1中是否包含id屬性
    // console.log(a1.hasAttribute("id"));//false

    //新HTML DOM
    console.dir(a1);
    //想獲得a1的href屬性值
    console.log(a1.href);
    //想修改a1的target屬性值
    a1.target="_blank";
    //想判斷a1中是否包含id屬性
    console.log(a1.id!=="");//true
    //想移除a1的id屬性
    a1.id="";
    //再次判斷a1中是否包含id屬性
    console.log(a1.id!=="");//false  
    console.log(a1);
  </script>
</body>
</html>

運(yùn)行結(jié)果:

dom屬性.png

總結(jié): DOM4步

查找觸發(fā)事件的元素
2. 綁定事件處理函數(shù)
3.查找要修改的元素
修改元素
總結(jié): DOM 5件事: 增刪改查+事件綁定:
//不要背揖铜！用到時(shí)茴丰，來查找，復(fù)制粘貼就行了天吓！
1. 查找元素: 4種
(1). 不需要查找就可直接獲得的元素對(duì)象: 4種:
document 根節(jié)點(diǎn) document
document.documentElement —— <html>
document.head —— <head>
document.body —— <body>
(2). 如果已經(jīng)獲得一個(gè)元素對(duì)象贿肩，找周圍附近的元素對(duì)象時(shí)，就用按節(jié)點(diǎn)間關(guān)系查找：2大類關(guān)系龄寞，6個(gè)屬性
a. 父子關(guān)系: 4種
1). 元素的父元素: 元素.parentElement
2). 元素下的所有直接子元素: 元素.children
3). 元素下的第一個(gè)直接子元素: 元素.firstElementChild
4). 元素下的最后一個(gè)直接子元素: 元素.lastElementChild
b. 兄弟關(guān)系: 2種
1). 元素的前一個(gè)兄弟: 元素.previousElementSibling
2). 元素的后一個(gè)兄弟: 元素.nextElementSibling (3). 如果用一個(gè)特征就能找到想要的元素汰规，就用按HTML特征查找：4個(gè)方法:
a. 按id查找:
var 一個(gè)元素對(duì)象=document.getElementById("id名");
b. 按標(biāo)簽名查找:
var 類數(shù)組對(duì)象=任意父元素.getElementsByTagName("標(biāo)簽名")、
c. 按class名查找:
var 類數(shù)組對(duì)象=任意父元素.getElementsByClassName("class名")
d. 按name名查找表單元素:
var 類數(shù)組對(duì)象=document.getElementsByName("name名")
(4). 如果通過復(fù)雜的查找條件物邑，才能找到想要的元素時(shí)溜哮，就用按選擇器查找: 2個(gè)方法
a. 只查找一個(gè)符合條件的元素:
var 一個(gè)元素=任意父元素.querySelector("任意選擇器")
b. 查找多個(gè)符合條件的元素:
var 類數(shù)組對(duì)象=任意父元素.querySelectorAll("任意選擇器")

總結(jié): 查找函數(shù)的返回值規(guī)律: 3種

1. 如果原函數(shù)返回的是下標(biāo)位置i，則如果找不到-1

2. 如果原函數(shù)返回的是一個(gè)數(shù)組或一個(gè)對(duì)象色解，則如果找不到返回null

3. 如果原函數(shù)返回的是類數(shù)組對(duì)象茂嗓，則如果找不到，返回空類數(shù)組對(duì)象: {length:0 }

2. 修改元素: 3種東西可修改
(1). 修改內(nèi)容: 3種內(nèi)容可修改:
a. 獲取或修改元素的HTML內(nèi)容:
元素.innerHTML
b. 獲取或修改元素的純文本內(nèi)容:
元素.textContent
c. 獲取或修改表單元素的值:
表單元素.value
(2). 修改屬性: 3種
a. 字符串類型的HTML標(biāo)準(zhǔn)屬性: 2種:
1). 舊核心DOM: 4個(gè)函數(shù)
i. 元素.getAttribute("屬性名");
ii. 元素.setAttribute("屬性名", "屬性值")
iii. var bool=元素.hasAttribute("屬性名")
iv. 元素.removeAttribute("屬性名")
優(yōu)點(diǎn): 萬能, 缺點(diǎn): 繁瑣
2). 新HTML DOM:
i. 元素.屬性名
ii. 元素.屬性名="屬性值"
iii. 元素.屬性名!==""
i. 元素.屬性名=""
優(yōu)點(diǎn): 簡單, 缺點(diǎn): 不萬能
總結(jié): this 6種:
2. new Fun() this->new正在創(chuàng)建的新對(duì)象
3. 類型名.prototype.共有方法=function(){... }
this->將來誰調(diào)用這個(gè)函數(shù)科阎，就指誰
將來調(diào)用這個(gè)函數(shù)的.前的某個(gè)子對(duì)象
4. fun() 和回調(diào)函數(shù) 和匿名函數(shù)自調(diào) this->默認(rèn)指window

訪問器屬性中的this指訪問器屬性所在的當(dāng)前對(duì)象
6. 在DOM的事件處理函數(shù)內(nèi)的this->當(dāng)前正在觸發(fā)事件的DOM元素對(duì)象

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末述吸，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子锣笨，更是在濱河造成了極大的恐慌蝌矛，老刑警劉巖道批，帶你破解...
沈念sama閱讀 216,544評(píng)論 6贊 501
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異朴读，居然都是意外死亡屹徘，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,430評(píng)論 3贊 392
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門衅金，熙熙樓的掌柜王于貴愁眉苦臉地迎上來噪伊，“玉大人，你說我怎么就攤上這事氮唯〖担” “怎么了？”我有些...
開封第一講書人閱讀 162,764評(píng)論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵惩琉，是天一觀的道長豆励。經(jīng)常有香客問我，道長瞒渠，這世上最難降的妖魔是什么良蒸？我笑而不...
開封第一講書人閱讀 58,193評(píng)論 1贊 292
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮伍玖，結(jié)果婚禮上嫩痰，老公的妹妹穿的比我還像新娘。我一直安慰自己窍箍，他們只是感情好串纺，可當(dāng)我...
茶點(diǎn)故事閱讀 67,216評(píng)論 6贊 388
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著椰棘，像睡著了一般纺棺。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上邪狞，一...
開封第一講書人閱讀 51,182評(píng)論 1贊 299
城市分裂傳說
那天祷蝌，我揣著相機(jī)與錄音，去河邊找鬼帆卓。笑死杆逗，一個(gè)胖子當(dāng)著我的面吹牛双吆，可吹牛的內(nèi)容都是我干的艳馒。我是一名探鬼主播辆童，決...
沈念sama閱讀 40,063評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼啃炸，長吁一口氣：“原來是場噩夢啊……” “哼拙徽！你這毒婦竟也來了磨隘？” 一聲冷哼從身側(cè)響起蒸其，我...
開封第一講書人閱讀 38,917評(píng)論 0贊 274
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤侵歇，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后癣疟，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體挣柬，經(jīng)...
沈念sama閱讀 45,329評(píng)論 1贊 310
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,543評(píng)論 2贊 332
?白月光啟示錄
正文我和宋清朗相戀三年睛挚，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了邪蛔。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 39,722評(píng)論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡扎狱，死狀恐怖侧到，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情淤击，我是刑警寧澤匠抗，帶...
沈念sama閱讀 35,425評(píng)論 5贊 343
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站污抬，受9級(jí)特大地震影響汞贸，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜印机，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,019評(píng)論 3贊 326
男人毒藥：我在死后第九天來索命
文/蒙蒙一矢腻、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧射赛，春花似錦多柑、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,671評(píng)論 0贊 22
一樁弒父案顷蟆，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽诫隅。三九已至腐魂，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間逐纬，已是汗流浹背蛔屹。一陣腳步聲響...
開封第一講書人閱讀 32,825評(píng)論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留豁生，地道東北人兔毒。一個(gè)月前我還...
沈念sama閱讀 47,729評(píng)論 2贊 368
代替公主和親
正文我出身青樓，卻偏偏與公主長得像甸箱，于是被迫代替她去往敵國和親育叁。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,614評(píng)論 2贊 353

DOM

一. 什么是DOM: Document Object Model（文檔 對(duì)象 模型）

二. DOM樹:

三. 查找元素: 4種:

一. 查找:

1. 按節(jié)點(diǎn)間關(guān)系查找:

3. 按選擇器查找:

4. 示例: 購物車效果

二. 修改: 3種東西: 內(nèi)容反惕，屬性，樣式

1. 內(nèi)容: 3種

2. 屬性: 3種

總結(jié): DOM4步

總結(jié): 查找函數(shù)的返回值規(guī)律: 3種

推薦閱讀更多精彩內(nèi)容

一. 什么是DOM: Document Object Model（文檔對(duì)象模型）