亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 145
粉絲 7
評論 7
訪問量 198840
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
JS核心知識：DOM操作和事件
李東亞1??3????12?
原創(chuàng)
1200人瀏覽過

隨堂知識總結(jié)：

一、DOM操作：

1、節(jié)點時DOM樹種的最小單元：節(jié)點是有類型的：元素、屬性、文本、文檔、注釋、片段等

  1. document:（window.document）獲取文檔；定義的快速入口:
  2. document.doctype:獲得文檔類型
  3. document.documentElement:獲取文檔種的根節(jié)點
  4. document.head:獲取head節(jié)點
  5. document.body:獲取body節(jié)點
  6. document.title:獲取head中的title節(jié)點
  7. document.links:獲取a鏈接的節(jié)點集合；

2、DOM操作選擇函數(shù)

  1. document.getElementsByTagName("元素標簽名"); //返回HTMLCollection集合
  2. document.getElementById("ID值"); //返回html代碼（元素）
  3. document.getElementsByName("name屬性值"); //返回Nodelist集合,節(jié)點也可以通過數(shù)組和item()方法訪問
  4. document.getElementsByClassName("class屬性值"); //返回HTMLCollection集合
  5. document.querySelector("Css選擇器"); //返回html代碼
  6. document.querySelectorAll("css選擇器"); //返回Nodelist集合

3、屬性操作：

  1. .innerText:操作元素中的文字
  2. .innerHTML:可以操作元素中的文字且可以添加html代碼
  3. .style.css屬性：可以操作css屬性值

4、HTMLCollection（HTML元素）集合和Nodelist(節(jié)點)集合可以通過for()循環(huán)遍歷，Nodeslist可以通過forEach()遍歷，而HTMLCollection不可以通過forEach()遍歷，可以通過Array.from()把HTMLCollection轉(zhuǎn)換成數(shù)組來遍歷
5、HTMLCollection（HTML元素）集合和Nodelist(節(jié)點)集合都可以通過數(shù)組方式訪問；也可以通過item()方法訪問，兩都有length()方法獲取長度（數(shù)量）；
6、節(jié)點集合操作函數(shù)：

  1. 節(jié)點集合.childNodes; //返回包含所有節(jié)點類型的集合
  2. 節(jié)點集合.children; //只包含元素節(jié)點類型的集合
  3. 節(jié)點集合.childElementCount; //統(tǒng)計元素節(jié)點的數(shù)量
  4. 節(jié)點集合.childNodes.length; //統(tǒng)計所有類型節(jié)點的數(shù)量

7、節(jié)點操作函數(shù)：

  1. 節(jié)點.nodeName; //返回元素標簽
  2. 節(jié)點.nodeType; //返回元素類型
  3. 節(jié)點.nodeValue; //返回元素值
  4. 節(jié)點集合.firstChild; //返回第一個節(jié)點
  5. 節(jié)點集合.firstElementChild; //返回第一個元素節(jié)點
  6. 節(jié)點集合.lastChild; //返回最后一個節(jié)點
  7. 節(jié)點集合.lastElementChild; //返回最后一個元素節(jié)點
  8. 節(jié)點.previousSibling; //返回當前節(jié)點的前一個節(jié)點
  9. 節(jié)點.nextSibling; //返回當前節(jié)點的前一個節(jié)點
  10. 節(jié)點.previousElementSibling; //返回當前節(jié)點的前一個元素節(jié)點
  11. 節(jié)點.nextElementSibling; //返回當前節(jié)點的前一個元素節(jié)點
  12. 節(jié)點.parentElement;//返回當前節(jié)點的父級元素;

8、DOM屬性操作，在JS中class是關(guān)鍵字所以使用className代替class屬性值，但由于class屬性操作經(jīng)常被使用，classList對象來操作class屬性值，更方便
classList對象中的方法：

  1. classList.add()增加值
  2. classList.remove()移除值
  3. classList.toggle()判斷，有此值則移除，無則添加
  4. classList.replace()替換

9、在操作HMTL自定義的屬性（例如：data-index）時，常用dataset對象來獲取其屬性值（例如：dataset.index）；如果自定義屬性是由兩個單詞通過-連接組成時；在獲取其屬性值，把-去掉，把第二個單詞字母大寫即可（例如：data-index-num，獲?。篸ataset.indexNum）
10、append()和appendChild()添加元素和節(jié)點；
11、在某個元素中子元素之前插入元素：
parentElement.insertBefore(element,element);在某個元素執(zhí)行插入操作，第一個元素為要插入的元素，第二個參數(shù)為以那個元素為參照

二、事件監(jiān)聽

1、addEventListener('事件'，function(){},false);事件監(jiān)聽函數(shù)，最后一個值false時為冒泡事件，為true為捕獲事件
2、常見的事件：
（1）輸入文本時：

  1. onchange內(nèi)容改變事件
  2. onfocus獲得焦點事件
  3. onblur失去焦點事件
  4. onkeydown鍵盤按鍵按下事件
  5. onkeypress釋放鍵盤按鍵事件

（2）鼠標事件

  1. onclick點擊事件
  2. ondbclick表示鼠標快速點擊了兩次。
  3. mouseover表示鼠標經(jīng)過。
  4. mouseout表示鼠標離開區(qū)域

3、new Event('事件')創(chuàng)建事件對象，dispatchEvent('事件對象');委派事件對象來觸發(fā)元素事件；
4、回調(diào)函數(shù)中事件對象和類型：

  1. ev.type; //監(jiān)聽事件類型
  2. ev.targe; //觸發(fā)事件元素
  3. ev.currentTarget; //綁定事件元素

5、事件委托把子級事件委托父級來觸發(fā)，主要通過觸犯事件的元素（ev.targe）經(jīng)行區(qū)分是那個子級元素觸發(fā)的,而非幫綁定事件的元素；
6、冒泡和捕獲事件的區(qū)別：

代碼練習

1.demo

  1.   <!DOCTYPE html>
  2.   <html lang="en">
  3.     <head>
  4.       <meta charset="UTF-8" />
  5.       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.       <title>獲取dom元素</title>
  7.     </head>
  8.     <body>
  9.       <ul id="list">
  10.         <li class="item" name="first">item1</li>
  11.         <li class="item">item2</li>
  12.         <li class="item">item3</li>
  13.         <li class="item active">item4</li>
  14.         <li class="item">item5</li>
  15.         <a href="#"></a>
  16.       </ul>
  17.     </body>
  18.   </html>
  19.   <script>
  20.     var cl = console.log.bind(console);
  21.     //標簽
  22.     var lis = document.getElementsByTagName("li"); //返回HTMLCollection集合
  23.     cl(lis);
  24.     //ID
  25.     var ul = document.getElementById("list"); //返回html代碼（元素）
  26.     cl(ul);
  27.     ul.style.fontSize = "18px";
  28.     //name
  29.     var li1 = document.getElementsByName("first"); //返回Nodelist集合,節(jié)點也可以通過數(shù)組和item()方法訪問
  30.     cl(li1[0]);
  31.     li1.item(0).innerText = "我是第一個元素"; //通過.innerText可以操作元素中的文字
  32.     li1.item(0).innerHTML = "<span style='color:red'>我是第二個元素</span>"; //通過.innerText可以操作元素中的文字且可以添加html代碼
  33.     //class
  34.     var lis = document.getElementsByClassName("item"); //返回HTMLCollection集合
  35.     cl(lis);
  36.     lis1 = Array.from(lis); //HTMLCollection類型無法使用forEach();可以通過Array.from()轉(zhuǎn)換成數(shù)組使用；
  37.     cl("轉(zhuǎn)換成數(shù)組", lis1);
  38.     cl(lis.length); //總數(shù)量
  39.     cl(lis[0]); //以數(shù)組的方式訪問HTMLCollection
  40.     cl(lis.item(1)); //以類數(shù)組對象中的item()的方法訪問HTMLCollection
  41.     //選中的元素和標簽可以通過的對象方法操作其屬性：.style操作樣式；
  42.     // CSS選擇器
  43.     var ul = document.querySelector("#list"); //返回html代碼
  44.     cl(ul);
  45.     var lis = document.querySelectorAll(".item"); //返回Nodelist集合
  46.     cl(lis);
  47.     lis.forEach(function (item) {
  48.       item.style.background = "lightgreen";
  49.     });
  50.     var first = document.querySelectorAll("#list>:nth-of-type(-n+2)");
  51.     var last = document.querySelectorAll("#list>:nth-of-type(n+4)");
  52.     cl(first);
  53.     cl(last);
  54.     cl(document.doctype); //獲取文檔類型
  55.     cl(document.documentElement); //獲取html文檔內(nèi)容不包含(文檔類型);
  56.     cl(window.document); //獲取html文檔所有內(nèi)容（包含文檔類型）;
  57.     cl(document.title); //獲取html文檔標題title .body獲取主體內(nèi)容部分，.head獲取頭部信息內(nèi)容;
  58.     cl(document.links); //獲取文檔鏈接返回HTMLCollection集合
  59.   </script>

2.demo2

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <body>
  9.     <ul id="fisrt">
  10.       <li>item01</li>
  11.       <li>item02</li>
  12.       <li>item03</li>
  13.       <li>item04</li>
  14.       <li>item05</li>
  15.     </ul>
  16.   </body>
  17.   <script>
  18.     var cl = console.log.bind(console);
  19.     /*js節(jié)點類型：
  20.       1.元素
  21.       2.屬性
  22.       3.文本
  23.       6.注釋
  24.       9.文檔
  25.       11.文檔片段
  26.       */
  27.     var ul = document.querySelector("ul");
  28.     /* var li = document.createElement("li");
  29.     li.innerHTML = "item6";
  30.     //append和appendChild區(qū)別在于，append可以添加多個節(jié)點，而appendchild只能添加一個節(jié)點且不能直接添加字符串；
  31.     //且不會重復(fù)添加一個元素
  32.     ul.append(li);
  33.     ul.appendChild(li);*/
  34.     // nodeslist
  35.     cl(ul);
  36.     var lis = document.querySelectorAll("li");
  37.     cl(lis);
  38.     cl(ul.childNodes); //返回包含所有節(jié)點類型的集合
  39.     cl(ul.children); //只包含元素節(jié)點類型的集合
  40.     cl(ul.childElementCount); //統(tǒng)計元素節(jié)點的數(shù)量
  41.     cl(ul.childNodes.length); //統(tǒng)計所有類型節(jié)點的數(shù)量
  42.     cl(ul.childNodes[0]);
  43.     cl(ul.childNodes[1].nodeName); //返回元素標簽
  44.     cl(ul.childNodes[1].nodeType); //返回元素類型
  45.     cl(ul.childNodes[1].nodeValue); //返回元素值
  46.     cl(ul.firstChild); //返回第一個節(jié)點
  47.     cl(ul.firstElementChild); //返回第一個元素節(jié)點
  48.     cl(ul.lastChild); //返回最后一個節(jié)點
  49.     cl(ul.lastElementChild); //返回最后一個元素節(jié)點
  50.     cl("返回前一個節(jié)點（previousSibling）和下一個節(jié)點(nextSibling)");
  51.     cl(ul.childNodes[3]); //返回當前節(jié)點
  52.     cl(ul.childNodes[3].previousSibling); //返回當前節(jié)點的前一個節(jié)點
  53.     cl(ul.childNodes[3].nextSibling); //返回當前節(jié)點的前一個節(jié)點
  54.     cl("^…………");
  55.     cl(ul.childNodes[3]); //返回當前節(jié)點
  56.     cl(ul.childNodes[3].previousElementSibling); //返回當前節(jié)點的前一個元素節(jié)點
  57.     cl(ul.childNodes[3].nextElementSibling); //返回當前節(jié)點的前一個元素節(jié)點
  58.   </script>
  59. </html>

3.demo3

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>節(jié)點中className和classList</title>
  7.     <style>
  8.       .red {
  9.         color: red;
  10.       }
  11.       .item {
  12.         background-color: lightskyblue;
  13.       }
  14.       .blue {
  15.         color: limegreen;
  16.       }
  17.     </style>
  18.   </head>
  19.   <body>
  20.     <ul id="first">
  21.       <li class="item">item1</li>
  22.       <li class="item">item2</li>
  23.       <li class="item">item3</li>
  24.       <li class="item">item4</li>
  25.       <li class="item">item5</li>
  26.       <li class="item">item6</li>
  27.     </ul>
  28.   </body>
  29.   <script>
  30.     var cl = console.log.bind(console);
  31.     var ul = document.querySelector("ul");
  32.     cl(ul.id); //輸出元素中的id值
  33.     cl(ul.children[0].className); //輸出節(jié)點的class值，在JS中class是關(guān)鍵字所以使用className代替class
  34.     cl(ul.children[1].classList); //返回的是DOMTokenList對象
  35.     /*
  36.     classList對象中的方法：
  37.     1.add()增加值
  38.     2.remove()移除值
  39.     3.toggle()判斷，有此值則移除，無則添加
  40.     4.replace()替換
  41.     */
  42.     ul.children[3].classList.add("red");
  43.     ul.children[4].classList.remove("item");
  44.     ul.children[3].classList.toggle("red"); //有則移除
  45.     ul.children[4].classList.toggle("red"); //無則添加
  46.     ul.children[2].classList.replace("item", "blue"); //把元素中的item替換成blue;
  47.   </script>
  48. </html>

4.demo4

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>data-屬性</title>
  7.   </head>
  8.   <body>
  9.     <!-- html5中可以使用自定義數(shù)據(jù)屬性保存標簽的附加信息,data-做為前綴 -->
  10.     <ul data-index="1">
  11.       <li data-index="1">item1</li>
  12.       <li data-index="2">item2</li>
  13.       <li data-index-num="three">item3</li>
  14.       <li data-index="4">item4</li>
  15.       <li data-index="5">item5</li>
  16.     </ul>
  17.   </body>
  18.   <script>
  19.     var cl = console.log.bind(console);
  20.     var ul = document.querySelector("ul");
  21.     cl(ul);
  22.     cl(ul.children);
  23.     //data-index獲取其屬性時去掉data即dataset.index；
  24.     cl(ul.children[0].dataset.index);
  25.     //如果屬性名data-index-num時將中間線去掉，第二個單詞字母大寫，例如：dataset.indexNum;
  26.     cl(ul.children[2].dataset.indexNum); //獲取其屬性值
  27.     ul.children[2].dataset.indexNum = "3"; //修改其屬性值
  28.   </script>
  29. </html>

5.demo5

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <body>
  9.     <!-- 事件觸犯和執(zhí)行都在元素上 -->
  10.     <span onclick="alert(this.innerText)">你好</span>
  11.     <br />
  12.     <!-- 事件觸犯在元素上，通過函數(shù)調(diào)用執(zhí)行JS中函數(shù)執(zhí)行 -->
  13.     <span onclick="show(this)">php中文網(wǎng)</span>
  14.     <p id="p">你好</p>
  15.     <span>種業(yè)圈</span>
  16.   </body>
  17.   <script>
  18.     function show(item) {
  19.       var text = item.innerText;
  20.       alert(text);
  21.     }
  22.     // 通過獲取元素綁定事件，并執(zhí)行
  23.     var p = document.querySelector("#p");
  24.     p.onclick = function () {
  25.       alert(this.nodeName);
  26.     };
  27.     //監(jiān)聽事件
  28.     var span = document.querySelector("body>span:last-of-type");
  29.     console.log(span);
  30.     span.addEventListener(
  31.       "click",
  32.       function (ev) {
  33.         alert(ev.target.innerText);
  34.       },
  35.       false
  36.     );
  37.     //創(chuàng)建委托事件來觸發(fā)
  38.     var ev = new Event("click"); //創(chuàng)建點擊事件對象
  39.     span.dispatchEvent(ev); //委派點擊事件來觸發(fā)span事件
  40.   </script>
  41. </html>
批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：dom與事件, 在全棧開發(fā)中的占有重要地位
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
關(guān)于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓，幫助PHP學習者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學習
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學習！
    全站2000+教程免費學