1： dom对象的innerText和innerHTML有什么区别？
innerHTML支持HTML；innertext只支持纯文本。
写：
div1.innerHTML='<i>hello world</i>' //输出 hello world(斜体)
div1.innerText='<i>hello world</i>' //输出<i>hello world</i>
读：
<div>
<p>
123
<span>456</span>
</p>
</div>
var ct = document.getElementsByTagName('div')
console.log(ct.innerHTML)
//<p>123<span>456</span></p>
innerHTML 会输出HTML标签
console.log(ct.innerText)
//123456
innerText 会忽略HTML标签
2： elem.children和elem.childNodes的区别？
- elem.children返回元素中的元素子节点，是HTMLCollection的实例；
- elem.childNodes返回元素中的所有子节点（包括空白文本节点），childNodes中保存着一个NodeList类数组对象（有length属性但并不是Array的实例），可通过方括号语法来访问NodeList的值。
大多数情况下使用children属性，在元素只包含元素子节点时，这两个属性的值相同。
<body>
<h1>Hello</h1>
<p>abcabc</p>
</body
3：查询元素有几种常见的方法？ES5的元素选择方法是什么?
getElementById() //(查符合的ID)
返回匹配指定id属性的元素节点。
var elem = document.getElementById('id名字')
getElementsByClassName() //(查所有符合的class)
返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中。
var elements = document.getElementsByClassName(names)
注：names参数可以是多个空格分隔的class名字，返回同时具有这些节点的元素
document.getElementsByClassName('warp text')
getElementsByTagName() //(查所有符合的标签)
返回所有指定标签的元素(包括本身)，返回值是一个HTMLCollection对象，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。
var paras = document.getElementsByTagName("p")
// 返回当前文档的所有p元素节点
如果参数是大写，会将参数转为小写后，再进行搜索。
getElementsByName() //(查找拥有name属性的元素)
getElementsByName方法用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。
// 假定有一个表单是
<form name="x"></form>
var forms = document.getElementsByName("x");
forms[0].tagName // "FORM"
注意，在IE浏览器使用这个方法，会将没有name属性、但有同名id属性的元素也返回，所以name和id属性最好设为不一样的值。
ES5的元素
querySelector() //(查找第一个符合要求的元素)
querySelector方法返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。
var el1 = document.querySelector(".myclass");
var el2 = document.querySelector('#myParent > [ng-click]');
querySelector方法无法选中CSS伪元素。
querySelectorAll() //(查找所有符合要求的元素)
querySelectorAll方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。
elementList = document.querySelectorAll(selectors);
querySelectorAll方法的参数，可以是逗号分隔的多个CSS选择器，返回所有匹配其中一个选择器的元素。
var matches = document.querySelectorAll("div.note, div.alert");
4：如何创建一个元素？如何给元素设置属性？如何删除属性
<div id="ct">
<p>hello world</p>
</div>
<script>
var ct = document.getElementById("ct");
// 获取div
var newLine = document.createElement("a");
// 获取a
newLine.setAttribute("href", "http://www.baidu.com")
// 给a设置元素属性
ct.appendChild(newLine);
// 在div里面添加a元素
newLine.removeAttribute("href");
// 删除a的href元素属性
</script>
5：如何给页面元素添加子元素？如何删除页面元素下的子元素?
<div id="ct">
<p>hello</p>
</div>
<script>
var ct = document.getElementById("ct");
// 获取div
var paras = document.createElement("span");
paras.innerText = "world";
ct.appendChild(paras);
// 在div里添加span,并添加内容"world"
var el1 = document.querySelector("p")
ct.removeChild(el1);
//删除p标签
</script>
6： element.classList有哪些方法？如何判断一个元素的 class 列表中是包含某个 class？如何添加一个class？如何删除一个class?
element.classList所有方法介绍如下：
- add ： 为DOM对象加class。
- remove ：从DOM对象删class 。
- contains ：检测DOM对象是否已经应用了某class。
- toggle ：若DOM对象已经应用了某class则删除，若未应用则添加。
- item ：获取指定下表的class名字。
判断、添加和删除class：
<!DOCTYPE html>
<head></head>
<body>
<h1 class="title">hello world</h1>
<script>
var title = document.querySelector('.title');
title.classList.contains('title');
//判断一个元素的 class 列表中是否包含title
title.classList.add('heading');
// 添加一个class
title.classList.remove('heading');
//删除该class
</script>
</body>
7： 如何选中如下代码所有的li元素？ 如何选中btn元素？
<!DOCTYPE html>
<head></head>
<body>
<div class="mod-tabs">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<button class="btn">点我</button>
</div>
<script>
var AllLi1 = document.getElementsByTagName('li')
var AllLi2 = document.querySelectorAll('.mod-tabs ul>li')
var button1 = document.getElementsByClassName('btn')
var button2 = document.querySelectorAll('.mod-tabs .btn')
console.log(AllLi1)
console.log(AllLi2)
console.log(button1)
console.log(button2)
</script>
</body>
网友评论