dom對(duì)象的innerText和innerHTML有什么區(qū)別食侮？
-
innerText是一個(gè)可寫(xiě)屬性，返回元素內(nèi)包含的文本內(nèi)容诅妹，在多層次的時(shí)候會(huì)按照元素由淺到深的順序拼接其內(nèi)容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
<p>p標(biāo)簽</p>
<span>span標(biāo)簽</span>
<a href="#">a鏈接</a>
</div>
<script>
var box = document.getElementById('box');
console.log(box.innerText);
// 返回包含的文本內(nèi)容 p標(biāo)簽 span標(biāo)簽 a鏈接
</script>
</body>
</html>
-
innerHTML返回元素的HTML結(jié)構(gòu)震嫉，在寫(xiě)入的時(shí)候也會(huì)自動(dòng)構(gòu)建DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
<p>p標(biāo)簽</p>
<span>span標(biāo)簽</span>
<a href="#">a鏈接</a>
</div>
<script>
var box = document.getElementById('box');
console.log(box.innerHTML);
// 返回HTML結(jié)構(gòu) <p>p標(biāo)簽</p> <span>span標(biāo)簽</span> <a href="#">a鏈接</a>
</script>
</body>
elem.children和elem.childNodes的區(qū)別？
-
elem.children非標(biāo)準(zhǔn)屬性劝萤，返回指定元素的子元素集合，
返回HTML節(jié)點(diǎn)慎璧，所有屬性床嫌，不返回文本節(jié)點(diǎn)，幾乎所有瀏覽器的都支持
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
<p>p標(biāo)簽</p>
<span>span標(biāo)簽</span>
<a href="#" class="btn">a鏈接</a>
</div>
<script>
var box = document.getElementById('box');
console.log(box.children);
// 返回 [p, span, a.btn]
</script>
</body>
</html>
-
elem.childNodes標(biāo)準(zhǔn)屬性胸私，返回指定元素的子元素集合厌处，包括HTML節(jié)點(diǎn)，所有屬性岁疼，文本節(jié)點(diǎn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
<p>p標(biāo)簽</p>
<span>span標(biāo)簽</span>
<a href="#" class="btn">a鏈接</a>
</div>
<script>
var box = document.getElementById('box');
console.log(box.childNodes);
// 返回 [text, p, text, span, text, a.btn, text]
</script>
</body>
</html>
查詢?cè)赜袔追N常見(jiàn)的方法阔涉？ES5的元素選擇方法是什么?
- 查詢?cè)鼗静僮?/li>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
<p class="title">p標(biāo)簽</p>
<span class="title">span標(biāo)簽</span>
<a href="#" class="btn">a鏈接</a>
<a href="#" class="btn">a鏈接</a>
</div>
<input type="text" name="username">
<input type="password" name="pwd">
<script>
var box = document.getElementById('box'); // 獲取id為box的元素
var tit1 = document.getElementsByClassName('title')[0]; // 獲取第一個(gè)class為title的元素
var tit2 = document.getElementsByClassName('title')[1]; // 獲取第二個(gè)class為title的元素
var btn = document.getElementsByTagName('a')[0]; // 獲取第一個(gè)a標(biāo)簽
var user = document.getElementsByName('username')[0]; // 獲取第一個(gè)name屬性為username元素
</script>
</body>
</html>
- ES5的元素選擇方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
<p class="title">p標(biāo)簽<a href="#" class="btn">a鏈接</a></p>
<span class="title">span標(biāo)簽</span>
</div>
<input type="text" name="username">
<input type="password" name="pwd">
<script>
var box = document.querySelector('#box'); // 獲取id為box的元素
var tit = document.querySelectorAll('.title')[1]; // 獲取第二個(gè)class為title的元素
var child = document.querySelectorAll('.title a')[0]; // 獲取第一個(gè)class為title 里面的a元素
var ipt = document.querySelectorAll('[name=username]')[0]; // 獲取第一個(gè)name屬性為username的表單
</script>
</body>
</html>
如何創(chuàng)建一個(gè)元素？如何給元素設(shè)置屬性捷绒？如何刪除屬性
- 創(chuàng)建元素
var createA = document.createElement('a');
- 設(shè)置屬性
createA.setAttribute('href', 'https://jirengu.com');
- 刪除屬性
createA.removeAttribute('href');
如何給頁(yè)面元素添加子元素瑰排？如何刪除頁(yè)面元素下的子元素?
- 元素添加子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box');
var span = document.createElement('span');
span.innerHTML = '添加一個(gè)span';
box.appendChild(span);
</script>
</body>
</html>
- 刪除子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">123</div>
<script>
var box = document.getElementById('box');
document.body.removeChild(box);
</script>
</body>
</html>
element.classList有哪些方法？如何判斷一個(gè)元素的 class 列表中是包含某個(gè) class暖侨？如何添加一個(gè)class椭住？如何刪除一個(gè)class?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">123</div>
<script>
var element = document.getElementById('box');
element.classList.add('head'); // 添加class屬性為head
element.classList.remove('head'); // 刪除class屬性為head
element.classList.contains('head'); // 包含class屬性就是true / 沒(méi)有則返回flase
element.classList.toggle('head'); // 有則刪除返回false，沒(méi)有則加上返回true
element.classList.toString(); // 返回全部屬性的字符串
element.classList.length; // 返回全部屬性的長(zhǎng)度
</script>
</body>
</html>
如何選中如下代碼所有的li元素它碎？ 如何選中btn元素函荣？
<div class="mod-tabs">
<ul>
<li>list1<li>
<li>list2<li>
<li>list3<li>
</ul>
<button class="btn">點(diǎn)我</button>
</div>
解答：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="mod-tabs">
<ul>
<li>list1<li>
<li>list2<li>
<li>list3<li>
</ul>
<button class="btn">點(diǎn)我</button>
</div>
如何選中如下代碼所有的li元素显押？ 如何選中btn元素扳肛？
<script>
// 獲取所有的li元素
var li = document.getElementsByTagName('li');
console.log(li);
var li1 = document.querySelectorAll('li');
console.log(li);
// 選中btn元素
var btn = document.getElementsByTagName("button")[0];
console.log(btn);
var btn1 = document.getElementsByClassName("btn")[0];
console.log(btn1);
var btn2 = document.querySelector(".btn");
console.log(btn2);
var btn3 = document.querySelectorAll(".btn")[0];
console.log(btn3);
</script>
</body>
</html>
