dom對(duì)象的innerText和innerHTML有什么區(qū)別育八？
- innerText的作用
主要用來獲取元素的內(nèi)部文本元素 - innerHTML的作用
主要用來獲取元素內(nèi)部的結(jié)構(gòu)（標(biāo)簽啊亲族，樣式巴蠢琛）還有內(nèi)容
舉個(gè)例子<div id="wrap"> <h1 class='tit'>這是標(biāo)題</h1> <p class="content">這是段落</p> </div> <script> var wrap = document.getElementById('wrap') console.log(wrap.innerText)//這是標(biāo)題 這是段落 console.log(wrap.innerHTML)//<h1 class="tit">這是標(biāo)題</h1> //<p class="content">這是段落</p> </script>
elem.children和elem.childNodes的區(qū)別胎挎？
elem.children返回的將是元素子節(jié)點(diǎn)滚粟，而childNodes將返回所有的子節(jié)點(diǎn)類型绍申，包括一大堆的換行和空格的#text節(jié)點(diǎn),一般情況建議使用children,這樣通過數(shù)組的下標(biāo)更能精準(zhǔn)的訪問每一個(gè)子節(jié)點(diǎn).
舉個(gè)例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="wrap">
<h1 class='tit'>這是標(biāo)題</h1>
<p class="content">這是段落</p>
</div>
</body>
</html>
<script>
var wrap = document.getElementById('wrap');
console.clear();
console.log(wrap.children);
//children 的控制臺(tái)顯示內(nèi)容
(2) [h1.tit, p.content]
length: 2
0: h1.tit
1: p.content
__proto__: HTMLCollection
</script>
console.log(wrap.childNodes);
console.log(wrap.childNodes);所獲取的內(nèi)容
查詢?cè)赜袔追N常見的方法兆蕉？ES5的元素選擇方法是什么?
- document.getElementById('id')
- document.getElementsByClassName(樣式名稱)
- document.getElementsByName(擁有name屬性的HTML元素)
- document.getElementsByTagName(標(biāo)簽名稱)
ES5的選擇器 - document.querySelector('css的選擇器')
- document.querySelectorAll('css的選擇器')返回CSS選擇器的所有節(jié)點(diǎn)
如何創(chuàng)建一個(gè)元素中燥？如何給元素設(shè)置屬性寇甸？如何刪除屬性
創(chuàng)建生成HTML節(jié)點(diǎn)元素
createElement()
獲取元素屬性
getAttribute()
給元素設(shè)置屬性
setAttribute()
刪除屬性
removeAttribute()
上面相關(guān)方法的例子
var newDiv = document.createElement("div");//創(chuàng)建一個(gè)div標(biāo)簽
var newCon = document.createTextNode("我是內(nèi)容節(jié)點(diǎn)");//生成一段文本內(nèi)容
var className = newDiv.getAttribute('class');//獲取div上的class名稱
newDiv.setAttribute('class','test');//添加名稱為test的class屬性
newDiv.setAttribute('id','yezhu');//添加名稱為yezhu的ID屬性
newDiv.appendChild(newCon);//把創(chuàng)建好的名為newCon的內(nèi)容添加到div里面去
newDiv.removeAttribute('id');//刪除標(biāo)簽上的id屬性
如何給頁面元素添加子元素？如何刪除頁面元素下的子元素?
var newDiv = document.createElement("div");
var pDiv = document.createElement("p");
var newCon = document.createTextNode("我是內(nèi)容節(jié)點(diǎn)");
pDiv.appendChild(newCon);//把創(chuàng)建好的名為newCon的內(nèi)容添加到p標(biāo)簽里面去
newDiv.appendChild(pDiv);把p標(biāo)簽添加到新生成的div標(biāo)簽里面
console.log(newDiv);
newDiv.removeChild(pDiv);//刪除div里面的子標(biāo)簽p
console.log(newDiv);
element.classList有哪些方法疗涉？如何判斷一個(gè)元素的 class 列表中是包含某個(gè) class拿霉？如何添加一個(gè)class？如何刪除一個(gè)class?
element.classList的方法
- contains(String) 檢測(cè)元素的類屬性中是否存在指定的值咱扣。
- add(String[,String])添加指定的類值绽淘。如果已存在元素屬性中的話那么它們則被忽略。
- remove(String[,String])刪除指定的類值闹伪。
- item(Number)按集合中的索引返回類值沪铭。
- toggle(String[,force])當(dāng)只有一個(gè)參數(shù)時(shí)，即類值存在偏瓤，則刪除并返回false杀怠。如果不存在，則添加并返回true厅克。當(dāng)存在第二參數(shù)時(shí)赔退，第二參數(shù)計(jì)算結(jié)果為true，則添加指定的類值，計(jì)算結(jié)果為false硕旗，則刪除它窗骑。
var newDiv = document.createElement("div");
newDiv.setAttribute('class','yezhu');
newDiv.classList.add('pig','cat','lal','dk');
var num = newDiv.classList.item(3);
var tog = newDiv.classList.toggle('dk');
// 刪除類的名稱
// newDiv.classList.remove('pig','cat','lal','dk');
var boolen = newDiv.classList.contains('yezhu');
console.log(boolen);//true
console.log(newDiv);//<div class="ye pig cat lal dk>
console.log(num);//lal
console.log(tog);//若有dk 刪除dk 返回false
如何選中如下代碼所有的li元素？ 如何選中btn元素漆枚？
var btn = document.getElementsByClassName('btn');
//var btn = document.querySelector('btn');
var li = document.getElementsByTagName('li');
//var li = document.querySelectorAll('.mod-tabs>ul>li');
console.log(btn);
console.log(li);
