1: dom對象的innerText和innerHTML有什么區(qū)別灯荧?
innerText是一個(gè)可寫屬性任内,返回元素內(nèi)包含的文本內(nèi)容杈女,在多層次的時(shí)候會(huì)按照元素由淺到深的順序拼接其內(nèi)容
innerHTML屬性作用和innerText類似忱辅,但是不是返回元素的文本內(nèi)容滚停,而是返回元素的HTML結(jié)構(gòu)榆芦,在寫入的時(shí)候也會(huì)自動(dòng)構(gòu)建DOM
2:elem.children和elem.childNodes的區(qū)別柄粹?
elem.childNodes返回所有的子節(jié)點(diǎn),包括HTML元素匆绣,屬性驻右,文本。childNodes只返回HTML元素節(jié)點(diǎn)崎淳。
3:查詢元素有幾種常見的方法堪夭?ES5的元素選擇方法是什么?
- getElementById方法返回匹配指定ID屬性的元素節(jié)點(diǎn)。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn)凯力,則返回null茵瘾。這也是獲取一個(gè)元素最快的方法
- getElementsByClassName方法返回一個(gè)類似數(shù)組的對象(HTMLCollection類型的對象),包括了所有class名字符合指定條件的元素(搜索范圍包括本身)咐鹤,元素的變化實(shí)時(shí)反映在返回結(jié)果中拗秘。這個(gè)方法不僅可以在document對象上調(diào)用,也可以在任何元素節(jié)點(diǎn)上調(diào)用祈惶。
- getElementsByTagName方法返回所有指定標(biāo)簽的元素(搜索范圍包括本身)雕旨。返回值是一個(gè)HTMLCollection對象,也就是說捧请,搜索結(jié)果是一個(gè)動(dòng)態(tài)集合凡涩,任何元素的變化都會(huì)實(shí)時(shí)反映在返回的集合中。這個(gè)方法不僅可以在document對象上調(diào)用疹蛉,也可以在任何元素節(jié)點(diǎn)上調(diào)用活箕。
- getElementsByName方法用于選擇擁有name屬性的HTML元素,比如form可款、img育韩、frame克蚂、embed和object,返回一個(gè)NodeList格式的對象筋讨,不會(huì)實(shí)時(shí)反映元素的變化埃叭。
- querySelector方法返回匹配指定的CSS選擇器的元素節(jié)點(diǎn)。如果有多個(gè)節(jié)點(diǎn)滿足匹配條件悉罕,則返回第一個(gè)匹配的節(jié)點(diǎn)赤屋。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn),則返回null壁袄。
- querySelectorAll方法返回匹配指定的CSS選擇器的所有節(jié)點(diǎn)类早,返回的是NodeList類型的對象。NodeList對象不是動(dòng)態(tài)集合嗜逻,所以元素節(jié)點(diǎn)的變化無法實(shí)時(shí)反映在返回結(jié)果中莺奔。
- elementFromPoint方法返回位于頁面指定位置的元素。
4:如何創(chuàng)建一個(gè)元素变泄?如何給元素設(shè)置屬性?如何刪除屬性
- createElement方法用來生成HTML元素節(jié)點(diǎn)
- setAttribute()方法用于設(shè)置元素屬性
- removeAttribute()用于刪除元素屬性
5:如何給頁面元素添加子元素恼琼?如何刪除頁面元素下的子元素?
- appendChild()在元素末尾添加元素
- 刪除元素使用removeChild()方法即可
6: element.classList有哪些方法妨蛹?如何判斷一個(gè)元素的 class 列表中是包含某個(gè) class?如何添加一個(gè)class晴竞?如何刪除一個(gè)class?
- add(class1, class2, ...)在元素中添加一個(gè)或多個(gè)不存在的類名蛙卤。
- contains(class)返回布爾值,判斷指定的類名是否存在噩死。
- item(index)返回索引值對應(yīng)的元素類名颤难。從 0 開始,在區(qū)間范圍外則返回 null已维。
- remove(class1, class2, ...)移除元素中一個(gè)或多個(gè)類名行嗤。移除不存在的類名,不會(huì)報(bào)錯(cuò)垛耳。
- toggle(class, true|false)在元素中切換類名栅屏。
第一個(gè)參數(shù)為要在元素中移除的類名,并返回 false堂鲜。 如果該類名不存在則會(huì)在元素中添加類名栈雳,并返回 true。 第二個(gè)是可選參數(shù)缔莲,是個(gè)布爾值用于設(shè)置元素是否強(qiáng)制添加或移除類哥纫,不管該類名是否存在。
7: 如何選中如下代碼所有的li元素痴奏? 如何選中btn元素蛀骇?
<div class="mod-tabs">
<ul>
<li>list1<li>
<li>list2<li>
<li>list3<li>
</ul>
<button class="btn">點(diǎn)我</button>
</div>
- 選中l(wèi)i元素 document.querySelectorAll("li")
- 選中btn元素document.querySelector(btn) document.querySelector(".btn")