一互婿、dom對象的innerText和innerHTML有什么區(qū)別梨州？
- innerText：返回元素內(nèi)包含的文本內(nèi)容蛛碌，元素多層嵌套的時候，會按照元素由淺到深的順序拼接其內(nèi)容寻定。
- innerHTML：不僅返回元素內(nèi)包含的文本內(nèi)容儒洛，同時也會返回元素的HTML結(jié)構(gòu)。
二狼速、elem.children和elem.childNodes的區(qū)別琅锻？
- elem.childNodes：獲取子元素的節(jié)點(diǎn)，包括文本節(jié)點(diǎn)向胡、元素節(jié)點(diǎn)恼蓬、注釋節(jié)點(diǎn)；
- elem.children：：獲取子元素的元素節(jié)點(diǎn)（只包括元素節(jié)點(diǎn)）僵芹；
三处硬、查詢元素有幾種常見的方法？ES5的元素選擇方法是什么?
<div id="wrap">
<div class="inner"></div>
</div>
<script>
var wrap = document.getElementById("wrap");
console.log(wrap)
</script>
<div id="wrap">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
<script>
var inner = document.getElementsByClassName("inner");
console.log(inner[0])
</script>
<div id="wrap">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
<script>
var inner = document.getElementsByTagName("div");
console.log(inner[0])
</script>
<div id="wrap">
<div class="inner" name="box"></div>
<div class="inner" name="box"></div>
<div class="inner" name="box"></div>
</div>
<script>
var inner = document.getElementsByName("box");
console.log(inner[0])
</script>
ES5的元素選擇方法:
<div id="wrap">
<div class="inner" name="box">你好啊</div>
<div class="inner" name="box">你好啊</div>
<div class="inner" name="box">你好啊</div>
</div>
<script>
var inner = document.querySelector("#wrap .inner");
console.log(inner.innerText) //你好啊
</script>
<body>
<div id="wrap">
<div class="inner" name="box">你好啊</div>
<div class="inner" name="box">你好啊</div>
<div class="inner" name="box">你好啊</div>
</div>
<script>
var inner = document.querySelectorAll("#wrap .inner");
console.log(inner[0].innerText); //你好啊
</script>
四~五拇派、如何創(chuàng)建一個元素荷辕？如何給元素設(shè)置屬性？如何刪除屬性攀痊？如何給頁面元素添加子元素桐腌？如何刪除頁面元素下的子元素?
HTML:
<div class="wrap">
<div class="inner">第一個</div>
<div class="inner">第二個</div>
<div class="inner">第三個</div>
<div class="inner">第四個</div>
</div>
JS:
var wrap = document.querySelector(".wrap");
var innner = wrap.querySelectorAll(".inner");
var newElem = wrap.createElement("div");// 產(chǎn)生元素節(jié)點(diǎn)拄显；
var newContent = wrap.createTextNode("第五個");//產(chǎn)生文本節(jié)點(diǎn)苟径；
newElem.setAttribute("class","inner");//設(shè)置新元素的屬性；
newElem.appendChild(newContent);//把文本節(jié)點(diǎn)插入生成的元素節(jié)點(diǎn)
wrap.appendChild(newElem);//把生產(chǎn)的元素插入到wrap里面躬审；
inner[0].removeAttribute("class");//刪除wrap第一個inner子元素的class屬性棘街；
wrap.removeChild("inner[1]");//刪除wrap第二個inner子元素；
六承边、element.classList有哪些方法遭殉？如何判斷一個元素的 class 列表中是包含某個 class？如何添加一個class博助？如何刪除一個class?
- element.classList.add("className")：增加一個class险污；
- element.classList.remove("className")：刪除一個class；
- element.classList.toggle("className")：新增刪除切換；
- element.classList.contains("className")：判斷是否有這樣一個class蛔糯；
HTML:
<div class="wrap">
<div class="inner">第一個</div>
<div class="inner">第二個</div>
<div class="inner">第三個</div>
<div class="inner">第四個</div>
</div>
JS:
var wrap = document.querySelector(".wrap");
var inner = wrap.querySelector(".inner");
console.log(inner.classList.contains("inner"))//true 查找是非有這個class拯腮；
inner.classList.add("box"); //新增一個class；
inner.classList.remove("inner"); //刪除一個class蚁飒；
七动壤、 如何選中如下代碼所有的li元素？ 如何選中btn元素淮逻？
<script>
var box = document.querySelector(".mod-tabs");
var oli = box.querySelectorAll("li");
var obtn = box.querySelector(".btn");
var oli2 = box.getElementsByTagName('li');
var obtn2 = box.getElementsByClassName("btn")[0];
</script>
