HTML5 板API璇В

classList 灞

璇ュх浜涓坊绉婚css 绫汇

classList 灞杩被浣负 DOMTokenList 瀵硅薄锛/p>

<div id="div" class="test1 test2">classList</div><script>    document.getElementById("div").classList;  //  DOMTokenList(2) ["test1", "test2", value: "test1 test2"]</script>

classList 灞璇荤锛互淇瀹

add()锛坊lass
remove()锛lass
length锛被〃涓被灞)
contains()锛瀹class瀛
item(index)锛绱腑绱㈠煎搴class
toggle()锛涓lass

<div id="div" class="test1 test2">classList</div><script>    document.getElementById("div").classList.length; // 2    setTimeout(() => {        document.getElementById("div").classList.add("test3"); // 娣诲.class3        document.getElementById("div").classList.length; // 3         document.getElementById("div").classList.contains("test3"); // true         document.getElementById("div").classList.item(2); // 'test3'    }, 1000);    setTimeout(() => {        document.getElementById("div").classList.remove("test3"); // .class3        document.getElementById("div").classList.contains("test3"); // false        document.getElementById("div").classList.item(2); // null    }, 2000);    setTimeout(() => {        document.getElementById("div").classList.toggle('test2');    }, 3000);</script>

querySelector() 涓querySelectorAll()

querySelector()

杩。涓瀹css ㄧ绗涓绱濡娌℃归杩 null

<div id="div">querySelector1</div><div class="test1">querySelector2</div><div class="test1" data-div="selector">querySelector3</div><script>    document.querySelector("div"); // 峰绗涓lt;div>  =>  <div id="div">querySelector1</div>    document.querySelector("#div"); // 峰id="div"涓釜  =>  <div id="div">querySelector1</div>    document.querySelector(".test1"); // 峰class="test1"涓釜  =>  <div class="test1">querySelector2</div>    document.querySelector("#div,.test1"); // 澶釜杩涓釜归绱 =>  <div id="div">querySelector1</div>    document.querySelector("div[data-div]"); // 峰"data-div" 灞涓釜<div>  =>  <div class="test1" data-div="selector">querySelector3</div></script>

querySelectorAll()

规杩。涓瀹css ㄧ锛NodeList 瀵硅薄锛病┖ NodeList 瀵硅薄(NodeList [])

<div class="test1">querySelectorAll1</div><div class="test1">querySelectorAll2</div><div class="test1">querySelectorAll3</div><script>    document.querySelectorAll("div"); // 峰<div>     document.querySelectorAll("div.test1"); // 峰 class="test1" <div>     document.querySelectorAll(".test1")[2]; // 峰绱㈠涓 class="test1" 绱</script>

getElementsByClassName()

规杩。涓瀹被锛涓NodeList 瀵硅薄/p>

<div class="test1">querySelectorAll1</div><div class="test1">querySelectorAll2</div><div class="test1">querySelectorAll3</div><script>    document.getElementsByClassName("test1")[2]; // 峰绱㈠涓 class="test1" </script>

涔/h3>

<input type="button" data-index="10" data-index-color="red"><script>    var btn = document.querySelector('input');    // 璁块涔у    btn.dataset; // DOMStringMap {index: "10", indexColor: "red", name: "zpf"}    btn.dataset.index; // 10    btn.dataset.indexColor; // red    btn.dataset.aaa; // undefined    // 璁剧疆涔у    btn.dataset.index = 100;    btn.dataset.index; // 100    btn.index = 20;    btn.index; // 20    // 妫涔у    'name' in btn.dataset; // false    btn.dataset.name = 'zpf';    'name' in btn.dataset; // true</script>

瀛

localStorageessionStorageookieㄦ灏

insertAdjacentHtml()nsertAdjacentText()nsertAdjacentElement()

娣诲HTML涓瀹逛互 innerHTML 涓innerText 规锛ㄨinsertAdjacentHTML insertAdjacentText 规锛/p>

element.insertAdjacentHTML(position, text);

position 瀵逛缃骞朵蹇』互涓绗覆涔锛/p>

beforebegin: 韩
afterbegin: 涓釜瀛逛
beforeend: 涓涔/li>
afterend: 韩

text琚В负 HTML XML ,骞舵ュDOM腑绗覆/p>

<!-- beforeBegin --> <p> <!-- afterBegin -->foo<!-- beforeEnd --></p><!-- afterEnd -->

insertAdjacentHtml()nsertAdjacentText()

渚

<p id="name">寮</p><script>    const dom = document.querySelector('#name');    dom.insertAdjacentHTML("beforeEnd", '<a href="https://www.baidu.com">Link</a>');    dom.insertAdjacentText("afterBegin", '濮锛);</script>

扮

<p id="name">    濮锛    寮    <a href="https://www.baidu.com">Link</a></p>

insertAdjacentElement()

灏瀹缃/p>

渚

<p id="age">骞撮锛0</p><p id="name">寮</p><script>    const domAge = document.querySelector('#age');    const domName = document.querySelector('#name');    domName.insertAdjacentElement("afterEnd", domAge); // 灏omAge惧domNamefterEnd浣疆</script>

扮

<p id="name">寮</p><p id="age">骞撮锛0</p>

杈(contenteditable)

<div contenteditable="true">杩涓杈娈佃lt;/div><script>    setTimeout(() => {        document.querySelector('div').innerText;    }, 3000);</script>

棰杞/h3>

棰杞芥涓娴ㄦ讹浣跨娴ㄧ┖叉存棰涓浇/浇ㄦヤュ浼瑙椤甸/璧〉㈡渚娴ㄩ瑕浇娴ㄨ浇ュ〉㈠锛浼涓浇棰杞界椤甸骞舵坊缂涓褰疯涓浇ユ锛缂戒腑, 椤甸灏卞浠ュ揩般

<link rel="prefetch" href="http://www.example.com/"> <!-- Firefox -->    <link rel="prerender" href="http://www.example.com/"> <!-- Chrome -->

版杩充html5 板API绔氨浠拌浜村稿html5 板API璇锋绱㈣瀹朵互户缁瑙㈢稿锛ぇ瀹朵互澶瀹讹

最后更新于 2021-11-22 08:40:21 并被添加「」标签，已有位童鞋阅读过。

本站使用「署名 4.0 国际」创作共享协议，可自由转载、引用，但需署名作者且注明文章出处