DOM操作 任务
2017-04-21 本文已影响74人
辉夜乀
题目1：
dom对象的innerText和innerHTML有什么区别？
-
innerText返回元素内包含的文本内容，而且会把元素内的标签元素去掉。 -
innerHTML返回元素内的HTML结构，包含了标签元素和文本
<div id="me">
<p>
hello
<span>jirengu</span>
</p>
</div>
div.innerText
// 返回"hello jirengu"
div.innerHTML返回
// "<p>hello<span>jirengu</span></p>"
题目2：
elem.children和elem.childNodes的区别？
-
elem.children是查询该元素下的所有子元素对象，不包括文本对象 -
elem.childNodes是查询该元素下的所有子对象，包括文本对象
<body>
hello world
<h1 class="title">我是一级标题</h1>
<p class="content">我是一个大段落</p>
<a href="https://jirengu.com" id="link">这是一个饥人谷的链接</a>
</body>
document.body.children
/*[h1.title, p.content, a#linking, linking: a#linking]
获得的是body下的子元素，不包括文本对象
*/
document.body.childNodes
/*[text, h1.title, text, p.content, text, a#linking, text, comment, text]
获得的是body下的所有元素，包括文本对象，换行也是文本对象。
*/
题目3：
查询元素有几种常见的方法？ES5的元素选择方法是什么?
常见方法：
document.getElementById()document.getElementsByClassName()document.getElementsByTagName()document.getElementsByName()
ES5的方法：
document.querySelector()document.querySelectorAll()document.elementFromPoint()
题目4：
如何创建一个元素？如何给元素设置属性？如何删除属性
创建元素：
-
document.creatElement("div")创建了<div>元素节点，括号内不能带<> -
document.creatTextNode("hello")创建了一个文本节点，内容为“hello”的字符串
元素属性操作：
-
node.getAttribute("id")获取元素的属性值，括号内为属性名称 -
node.createAttribute("name")生成一个新的属性对象节点，括号内为属性的名称 -
node.setAttribute("name","me")设置一个属性，name = "me"，可用来增加，修改属性 -
node.removeAttribute("name")删除了name属性
题目5：
如何给页面元素添加子元素？如何删除页面元素下的子元素?
-
appendChild()，在元素的末尾添加元素。
var body = document.body
var div = document.createElement("div")
body.appendChild(div) // 在<body>元素的末尾添加了 <div> 元素。
-
insertBefore()，在某个元素之前插入元素
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);
//插入元素与被插入元素是平级的，所以这里用newDiv.firstChild来让文本节点插入<div>元素中。
-
replaceChild()，接受两个参数：要插入的元素和要替换的元素
newDiv.replaceChild(newElement, oldElement);
-
removeChild()，删除元素
parentNode.removeChild(childNode);
题目6：
element.classList有哪些方法？如何判断一个元素的 class 列表中是包含某个 class？如何添加一个class？如何删除一个class?
-
classList这个属性用于返回元素的类名，作为 DOMTokenList 对象，该属性用于在元素中添加，移除及切换 CSS 类 -
add(class1, class2, ...)，在元素中添加一个或多个类名，如指定的类名已存在，则不会添加 -
contains(class)，返回布尔值，判断指定的类名是否存在 -
item(index)，返回类名在元素中的索引 -
remove(class1, class2, ...)，移除元素中的一个或多个类名，移除不存在的类名不会报错 -
toggle(class, true|false)，在元素中切换类名，第一个参数为要在元素中移除的类名，并返回false。如果类名不存在则会在元素中添加类名，并返回true。第二个是可选参数，是个布尔值用于设置元素是否强制添加或移除类，不管类名是否存在。
题目7：
如何选中如下代码所有的li元素？ 如何选中btn元素？
<div class="mod-tabs">
<ul>
<li>list1<li>
<li>list2<li>
<li>list3<li>
</ul>
<button class="btn">点我</button>
</div>
//选中所有的<li>元素
document.getElementsByTagName("li")
document.querySelectorAll("li")
//选中btn元素
document.getElementsByClassName("btn")[0]
document.getElementsByTagName("button")[0]
document.querySelector(".btn")
document.querySelectorAll(".btn")[0]
