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

搜索
博主信息
博文 18
粉絲 0
評論 0
訪問量 14938
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
210406 類數(shù)組 獲取遍歷DOM元素 向元素添加文本 獲取元素的自定義屬性值 DOM元素增刪改查 CSS樣式操作
xyphpblog
原創(chuàng)
812人瀏覽過

1. 類數(shù)組

  • 本身是對象
  • 有l(wèi)ength屬性
  • 有遞增的索引

類數(shù)組可以轉(zhuǎn)為數(shù)組并使用數(shù)組的方法操作

  1.         //結(jié)構(gòu)類似數(shù)組，但是對象
  2.         const color = {
  3.             0: "white",
  4.             1: "blue",
  5.             2: "yellow",
  6.             3: "green",
  7.             length: 4
  8.         };
  10.         console.log(color);
  11.         //{0: "white", 1: "blue", 2: "yellow", 3: "green", length: 4}
  12.         console.log(color.length);
  13.         //4
  14.         console.log(color[2]);
  15.         //yellow
  16.         console.log(Array.isArray(color));
  17.         //false
  18.         console.log(typeof (color));
  19.         //object
  20.         console.log(color instanceof Object);
  21.         //true
  23.         //轉(zhuǎn)為數(shù)組 方法 1
  24.         let arr = Array.from(color);
  25.         console.log(Array.isArray(arr));
  26.         //true
  27.         console.log(arr);
  28.         //["white", "blue", "yellow", "green"]
  30.         //轉(zhuǎn)為數(shù)組 方法 2
  31.         Object.defineProperty(color, Symbol.iterator, {
  32.             value() {
  33.                 let index = 0;
  34.                 const keys = Object.keys(this);
  35.                 return {
  36.                     next: () => {
  37.                         return {
  38.                             done: index >= keys.length - 1,
  39.                             value: this[keys[index++]]
  40.                         };
  41.                     }
  42.                 };
  43.             }
  44.         });
  45.         // colors 數(shù)組
  46.         let colors = [...color];
  47.         console.log(Array.isArray(colors));
  48.         //true
  50.         //向colors末端添加一個元素
  51.         colors.push("orange");
  52.         console.log(colors);
  53.         // ["white", "blue", "yellow", "green", "orange"]

2. 獲取DOM元素

  1.     <ul class="list">
  2.         <li class="item">item1</li>
  3.         <li class="item">item2</li>
  4.         <li class="item">item3</li>
  5.         <li class="item">item4</li>
  6.         <li class="item">item5</li>
  7.     </ul>
  • document.querySelectorAll() 獲取滿足條件的元素集合
  1.         const items = document.querySelectorAll(".list .item");
  2.         console.log(items);
  4.         //forEach 
  5.         //item：當(dāng)前元素（必須）
  6.         //index：索引（可選）
  7.         //items: 遍歷的數(shù)組（可選）
  8.         items.forEach(function (item, index, items) {
  9.             console.log(index);
  10.             console.log(item);
  11.         })
  13.         //簡化
  14.         items.forEach((item) => console.log(item));
  16.         //NodeList內(nèi)置迭代器接口， 可用for...of遍歷
  17.         for (const iterator of items) {
  18.             console.log(iterator);
  19.         }
  • document.querySelector 獲取滿足條件的元素集合 的第一個元素
  1.         //獲取滿足條件的元素集合 的第一個元素
  2.         first = document.querySelector(".list .item");
  3.         console.log(first);
  4.         first.style.background = "skyblue";
  7.         let list = document.querySelector(".list");
  8.         console.log(list);
  • 獲取特定元素
  1.         //快速獲取特定元素
  2.         //body
  3.         console.log(document.body);
  4.         //head
  5.         console.log(document.head);
  6.         //title
  7.         console.log(document.title);
  8.         //html
  9.         console.log(document.documentElement);

3. DOM樹遍歷

DOM樹中所有內(nèi)容都是節(jié)點(diǎn)（node）

例：

  1.     <ul class="list">
  2.         <li class="item">item1</li>
  3.         <li class="item">item2</li>
  4.         <li class="item">item3</li>
  5.         <li class="item">item4</li>
  6.         <li class="item">item5</li>
  7.     </ul>

遍歷

  1.         let nodes = document.querySelector(".list");
  2.         console.log(nodes.childNodes);
  3.         // console.log(nodes.children);
  4.         let items = nodes.children;
  5.         //得到的是 類數(shù)組
  6.         //轉(zhuǎn)為數(shù)組
  7.         let arr = [...items];
  8.         arr.forEach(element =>
  9.             console.log(element)
  10.         );
  11.         //第一個元素
  12.         let first = arr[0];
  13.         first.style.background = "lightgrey";
  14.         console.log("first: ", first);
  15.         //最后一個元素
  16.         let last = arr[arr.length - 1];
  17.         last.style.background = "lightblue";
  18.         console.log("last: ", last);
  19.         //第二個元素
  20.         let second = first.nextElementSibling;
  21.         second.style.background = "yellow";
  22.         //倒數(shù)第二個
  23.         let secondLast = last.previousElementSibling;
  24.         secondLast.style.background = "orange";

4. 向元素內(nèi)添加文本

  • textContent 添加文本（HTML標(biāo)簽也會被當(dāng)作文本）
  • innerHTML 添加文本,會解析HTML標(biāo)簽
  • outerHTML 替換父節(jié)點(diǎn)
  1. <p></p>

使用p.textContent

  1.         const p = document.querySelector("p");
  2.         //向p標(biāo)簽添加文本
  3.         p.textContent = "<b>hahaha</b>";

顯示：

使用p.innerHTML

  1. p.innerHTML = "<b>hahaha</b>";

顯示：

使用p.outerHTML

  1. p.outerHTML = "<b>hehe</b>";

父節(jié)點(diǎn)的p標(biāo)簽沒了

5. 獲取元素的自定義屬性

  • 內(nèi)置的標(biāo)準(zhǔn)屬性，如id，可以直接用querySelector()訪問
  • 自定義的屬性，通過在屬性名前添加data-，然后使用dataset訪問
  1. <body>
  2.     <div id="a" class="user" name="haha"></div>
  4.     <script>
  5.         const user = document.querySelector("div");
  6.         console.log(user.className);
  7.         console.log(user.id);
  8.         console.log(user.name);
  9.     </script>
  10. </body>

輸出：

修改后name為data-name后：

  1. <body>
  2.     <div id="a" class="user" data-name="haha"></div>
  4.     <script>
  5.         const user = document.querySelector("div");
  6.         console.log(user.className);
  7.         console.log(user.id);
  8.         console.log(user.dataset.name);
  9.     </script>
  10. </body>

若屬性名是多個單詞使用-分隔的，如user-age, 獲取屬性時用駝峰命名法，即userAge獲取

  1. <body>
  2.     <div id="a" class="user" data-name="haha" data-user-age="6"></div>
  4.     <script>
  5.         const user = document.querySelector("div");
  6.         console.log(user.className);
  7.         console.log(user.id);
  8.         console.log(user.dataset.name);
  9.         console.log(user.dataset.userAge);
  10.     </script>
  11. </body>

6. DOM元素增刪改查

6.1 創(chuàng)建DOM元素

  • document.createElement()
  1.         //創(chuàng)建DOM元素
  2.         let div = document.createElement("div");
  3.         console.log(div);
  4.         let span = document.createElement("span");
  5.         span.textContent = "Hey";
  6.         console.log(span);

6.2 添加，克隆元素

  • 同一個元素只能被添加到一個位置
  • 如果向不移動原來的元素，使用克隆方法

6.2.1 向父元素內(nèi)的頭部/尾部添加

  • append(element)
  • 向父元素內(nèi)的末尾添加元素或文本，可同時添加多個（參數(shù)）
  1.         //創(chuàng)建DOM元素
  2.         let div = document.createElement("div");
  3.         console.log(div);
  4.         let span = document.createElement("span");
  5.         span.textContent = "Hey";
  6.         console.log(span);
  7.         //添加到div中
  8.         div.append(span, "aaa", "bbb");

向body中添加以顯示元素

  1.         //向body中添加以顯示元素
  2.         document.body.append(div);

向body中添加span，div中的span會被剪切，因?yàn)橹荒懿迦胍粋€位置

  1.         document.body.append(span);

  • 使用element.cloneNode(true)使元素復(fù)制后被添加
  1.         document.body.append(span.cloneNode(true));

  • 使用append()創(chuàng)建ul列表
  1.         //用append()創(chuàng)建列表
  2.         const ul = document.createElement("ul");
  3.         //for...loop
  4.         for (let index = 1; index < 6; index++) {
  5.             const element = document.createElement("li");
  6.             element.textContent = `li${index}`;
  7.             element.style.color = "blue";
  8.             element.style.listStyle = "none";
  9.             ul.append(element);
  10.         }
  11.         document.body.append(ul);

  • prepend(element)
  • 向父元素內(nèi)的頭部添加元素或文本，可同時添加多個（參數(shù)）
  1.         //prepend() 在選定父元素頭部添加元素
  2.         let title = document.createElement("p");
  3.         title.innerHTML = "<b>this is an unordered list created via javascript</b>";
  4.         ul.prepend(title);

6.2.2 向選定參考節(jié)點(diǎn)的前后添加

  • before()
  • after()
  • 在選定 參考節(jié)點(diǎn) 的前后添加

選中參考節(jié)點(diǎn)

  1.         const referNode = document.querySelector("li:nth-of-type(3)");
  2.         referNode.style.background = "yellow";

在其之前，之后分別添加一個元素

  1.         const referNode = document.querySelector("li:nth-of-type(3)");
  2.         referNode.style.background = "yellow";
  3.         //before
  4.         let new1 = document.createElement("li");
  5.         new1.textContent = "new 01 before reference node";
  6.         new1.style.background = "lightgrey";
  7.         referNode.before(new1);
  8.         //after
  9.         let new2 = document.createElement("li");
  10.         new2.textContent = "new 02 after reference node";
  11.         new2.style.background = "skyblue";
  12.         referNode.after(new2);

6.3 替換元素

  • replaceWith() 替換節(jié)點(diǎn)
  1.         let a = document.createElement("a");
  2.         a.textContent = "PHP.cn (This was item3)";
  3.         a.href = "https://php.cn";
  4.         referNode.replaceWith(a);

6.4 刪除元素

  • remove()刪除節(jié)點(diǎn)
  1.         ul.querySelector("ul>li:last-of-type").remove();

6.5 插入元素

  • insertAdjacentElement(position,element)
  • 向元素的 起始標(biāo)簽/結(jié)束標(biāo)簽 的 前/后 添加
  • 插入位置可為：
    • beforebegin
    • afterbegin
    • beforeend
    • afterend
  1.         const ul = document.createElement("ul")
  2.         ul.style.listStyle = "none";
  3.         ul.style.border = "1px solid black"
  4.         for (let index = 1; index < 6; index++) {
  5.             const element = document.createElement("li");
  6.             element.textContent = `item${index}`;
  7.             ul.append(element);
  8.         }
  9.         document.body.append(ul);
  11.         //using insertAdjacentElement(position,element)
  12.         let p = document.createElement("p");
  13.         p.textContent = "insertAdjacentElement-beforebegin"
  14.         ul.insertAdjacentElement("beforebegin", p)
  15.         let li1 = document.createElement("li");
  16.         li1.textContent = "insertAdjacentElement-afterbegin";
  17.         ul.insertAdjacentElement("afterbegin", li1);

  • insertAdjacentHTML(position,HTML tags)
  • 直接插入HTML標(biāo)簽及內(nèi)容，省略createElement()步驟
  1.         ul.insertAdjacentHTML("beforeend", "<li>insertAdjacentHTML-beforeend</li>")

  • insertAdjacentText（）
  • 只能插入文本
  1.         let p2 = document.createElement("p");
  2.         ul.insertAdjacentElement("afterend", p2);
  3.         p2.insertAdjacentText("beforeend", "insertAdjacentText");

7. CSS樣式操作

7.1 行內(nèi)樣式

  • element.style.attribute = “value”;
  1. <body>
  2.     <p>Bonjour</p>
  3.     <script>
  4.         const p = document.querySelector("p");
  6.         p.style.textDecoration = "underline";
  7.     </script>
  8. </body>

7.2 類樣式

  • element.classList.add(className1,className2…)
  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <style>
  7.         .bg-yellow {
  8.             background-color: yellow;
  9.         }
  11.         .bg-yellowgreen {
  12.             background-color: yellowgreen;
  13.         }
  15.         .border {
  16.             border: 1px slateblue solid;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <p>Bonjour</p>
  22.     <script>
  23.         const p = document.querySelector("p");
  24.         //1. 行內(nèi)樣式
  25.         p.style.textDecoration = "underline";
  26.         //2. 類樣式
  27.         p.classList.add("bg-yellow", "border");
  28.     </script>
  29. </body>

  • element.classList.replace()
  • element.classList.remove()
  1.         p.classList.add("bg-yellow", "border");
  2.         p.classList.remove("border");
  3.         p.classList.replace("bg-yellow", "bg-yellowgreen");

  • element.classList.toggle()
  • 相當(dāng)于一個類樣式的開關(guān)，有則關(guān)閉，無則打開
  1.         p.classList.add("bg-yellow", "border");
  2.         p.classList.remove("border");
  3.         p.classList.replace("bg-yellow", "bg-yellowgreen");
  4.         p.classList.toggle("border");

7.3 計(jì)算樣式 （只可讀?。?/h2>
  1.         let styles = window.getComputedStyle(p, null);
  3.         console.log(styles.getPropertyValue("height"));
  4.         console.log(styles.getPropertyValue("color"));
  5.         console.log(styles.getPropertyValue("background-color"));
  7.         //也可用
  8.         let sts = document.defaultView.getComputedStyle(p, null);
  9.         console.log(sts.getPropertyValue("color"));

批改老師：天蓬老師天蓬老師

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

老師批語：

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

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

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