dom对象的innerText和innerHTML有什么区别？
-
innerText是一个可写属性，返回元素内包含的文本内容，在多层次的时候会按照元素由浅到深的顺序拼接其内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
<p>p标签</p>
<span>span标签</span>
<a href="#">a链接</a>
</div>
<script>
var box = document.getElementById('box');
console.log(box.innerText);
// 返回包含的文本内容 p标签 span标签 a链接
</script>
</body>
</html>
-
innerHTML返回元素的HTML结构，在写入的时候也会自动构建DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
<p>p标签</p>
<span>span标签</span>
<a href="#">a链接</a>
</div>
<script>
var box = document.getElementById('box');
console.log(box.innerHTML);
// 返回HTML结构 <p>p标签</p> <span>span标签</span> <a href="#">a链接</a>
</script>
</body>
elem.children和elem.childNodes的区别？
-
elem.children非标准属性，返回指定元素的子元素集合，
返回HTML节点，所有属性，不返回文本节点，几乎所有浏览器的都支持
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
<p>p标签</p>
<span>span标签</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标准属性，返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
<p>p标签</p>
<span>span标签</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>
查询元素有几种常见的方法？ES5的元素选择方法是什么?
- 查询元素基本操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
<p class="title">p标签</p>
<span class="title">span标签</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]; // 获取第一个class为title的元素
var tit2 = document.getElementsByClassName('title')[1]; // 获取第二个class为title的元素
var btn = document.getElementsByTagName('a')[0]; // 获取第一个a标签
var user = document.getElementsByName('username')[0]; // 获取第一个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标签<a href="#" class="btn">a链接</a></p>
<span class="title">span标签</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]; // 获取第二个class为title的元素
var child = document.querySelectorAll('.title a')[0]; // 获取第一个class为title 里面的a元素
var ipt = document.querySelectorAll('[name=username]')[0]; // 获取第一个name属性为username的表单
</script>
</body>
</html>
如何创建一个元素？如何给元素设置属性？如何删除属性
- 创建元素
var createA = document.createElement('a');
- 设置属性
createA.setAttribute('href', 'https://jirengu.com');
- 删除属性
createA.removeAttribute('href');
如何给页面元素添加子元素？如何删除页面元素下的子元素?
- 元素添加子元素
<!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 = '添加一个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有哪些方法？如何判断一个元素的 class 列表中是包含某个 class？如何添加一个class？如何删除一个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 / 没有则返回flase
element.classList.toggle('head'); // 有则删除返回false，没有则加上返回true
element.classList.toString(); // 返回全部属性的字符串
element.classList.length; // 返回全部属性的长度
</script>
</body>
</html>
如何选中如下代码所有的li元素？ 如何选中btn元素？
<div class="mod-tabs">
<ul>
<li>list1<li>
<li>list2<li>
<li>list3<li>
</ul>
<button class="btn">点我</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">点我</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>
