1.dom对象的innerText和innerHTML有什么区别？
innerText、textContent以及innerHTML的区别
- innerText返回从body元素开始所有的文本内容，并以文档未添加样式时的排版方式显示
- innerHTML返回从body元素开始所有的带标签的文本内容，并按照在html文档中的原格式显示
- textContent返回从body元素开始所有的文本内容，排版方式按照在html文档中的原格式显示但不带标签
<div id= 'main' class="wrapper">
<ul id = "box">
<li>demo1</li>
<li>demo2</li>
</ul>
</div>
function print(sth){
console.log(sth)
}
var ul = document.getElementById('box')
print(ul.innerText)
print(ul.textContent)
print(ul.innerHTML)
2.elem.children和elem.childNodes的区别？
- elem.children属于HTML Collection接口，将返回一个当前节点的所有子元素的动态的伪数组
- elem.childNodes属于NodeList接口，将分返回一个当前节点的所有子节点的伪数组
<div id= 'main' class="wrapper">
<ul id = "box">
<li>demo1</li>
<li>demo2</li>
</ul>
</div>
var ul = document.getElementById('box')
console.log(ul.children)
console.log(ul.childNodes)
3.查询元素有几种常见的方法？
- 通过id
- 通过TagName
- 通过className
<p id="main" class="part-center" style = "color : red">
hello world!
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</p>
var el = document.getElementById('main')
console.log(el)
var el2 = document.getElementsByTagName('p')
console.log(el2[0])
var el3 = document.getElementsByClassName('part-center')
console.log(el3[0])
【注】
对于使用TagName和ClassName去捕获元素而言:
1.如果捕获的元素只有一个，返回结果如下：
var el = document.getElementsByTagName('p')
console.log(el)
var el2 = document.getElementsByClassName('part-center')
console.log(el2)
2.如果捕获的元素大于1个，返回结果如下：
var el = document.getElementsByTagName('div')
console.log(el)
var el2 = document.getElementsByClassName('item')
console.log(el2)
在使用TagName或className捕获对象时，要使用数组下标去指代
var el = document.getElementsByTagName('div')
console.log(el[0])
var el2 = document.getElementsByClassName('item')
console.log(el2[1])
- 通过getElementsByName()
以NodeList格式返回拥有name属性的HTML元素集合，比如form、img、frame
用户名：<input type="text" name = "username"><br/>
<button name = "username" >用户名</button>
var input = document.getElementsByName('username')
console.log(input)
- 通过querySelector()和querySelectorAll()
querySelector方法返回匹配指定的CSS选择器的元素节点;如果有多个节点满足匹配条件，则返回第一个匹配的节点(最上层的节点)
querySelectorAll方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象;
<div id="wrapper">
<div class="inner-box">
<p>demo</p>
</div>
</div>
var wrapper = document.querySelector('#wrapper')
var inner_box = document.querySelector('.inner-box')
var divNodes = document.querySelectorAll('div')
console.log(wrapper)
console.log(inner_box)
console.log(divNodes)
4.如何创建一个元素？如何给元素设置属性？
- 创建元素节点主要使用document.createElement()方法
- 设置元素属性主要使用setAttribute()或是node.style方法
//css代码
.bg-blue{
background: lightblue;
width: 100px;
height: 100px;
}
//js代码
var div = document.createElement('div')
div.className = 'bg-blue'
div.setAttribute('style','color:red')
div.innerHTML = 'demo';
document.body.appendChild(div)
效果图
5.元素的添加、删除？
- 元素的添加方法有parentNode.appendChild()或是insertBefore()
- 元素的删除方法有removeChild()
//html代码
<ul id="wrapper">
<li class="item1">demo1</li>
<li class="item2">demo2</li>
<li class="item3">demo3</li>
</ul>
//js代码
var ul = document.getElementById('wrapper')
var li = document.createElement('li')
var para = document.createElement('p')
li.innerHTML = 'demo4'
para.innerHTML = 'hello world'
ul.appendChild(li)
ul.insertBefore(para,li)
var item3 = document.getElementsByClassName('item3')
ul.removeChild(item3[0])
效果图
6.DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
DOM 0级事件处理程序是 通过javascript制定事件处理程序的传统方式，具体实现方式是：
var btn = document.getElementById("btn");
btn.onclick = function(){
alert(this.id);//this指定当前元素btn
}
删除DOM0事件处理程序，
只要将对应事件属性置为null即可。btn.onclick = null;
DOM 0级事件处理程序的优点是简单且具有跨浏览器的优势，缺点是一个事件处理程序只能对应一个处理函数
DOM2级事件处理程序是在2级DOM中规定的API,通过addEventListener(IE为attachEvent)去监听事件，具体实现方式是：
var btn = document.getElementById("btn");
function handler(){
alert(this.id)//this指定当前元素btn
}
btn.addEventListener('click',handler)
demo:addEventListener
同时制定了删除事件处理程序的方法
removeEventListener(IE为detachEvent),关于removeEventListener的注意事项请详见上文移除事件章节；
至于attachEvent与addEventListener的区别详见后文IE兼容性
addEventListener的优点是一个事件处理程序能对应多个处理函数，缺点是存在兼容性问题。
7.attachEvent与addEventListener的区别？
attachEvent是IE浏览器专属的事件监听方法，一般的浏览使用addEventListener。
IE的事件监听的方法与addEventListener方法不同之处包括：
- eventname必须包含on以及没有usecapture；
- 同时，使用attachEvent方法和addEventListener主要区别在于事件处理程序的作用域。采用addEventListener，事件处理程序会在其所属元素的作用域内运行。使用attachEvent，事件处理程序会在全局作用域内运行，因此this等于window。
8.解释IE事件冒泡和DOM2事件传播机制？
IE的事件冒泡：当发生事件时，目标节点先捕获，然后逐级向上传播到父节点，即事件监听处于冒泡阶段
2级DOM规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段
更多详情，请看DOM事件的工作原理
9.如何阻止事件冒泡？ 如何阻止默认事件？
-
停止事件传播
通过调用事件对象的stopPropagation方法，在任何阶段（捕获阶段或者冒泡阶段）中断事件的传播；
此后，事件不会在后面传播过程中的经过的节点上调用任何的监听函数；
demo:stopPropagation
但event.stopPropagation()不会阻止当前节点上此事件其他的监听函数被调用。如果你希望阻止当前节点上的其他回调函数被调用的话，你可以使用更激进的event.stopImmediatePropagation()
方法；
demo:stopImmediatePropagation
-
阻止浏览器的默认行为
当特定事件发生的时候，浏览器会有一些默认的行为作为反应。例如，使用a元素时会自动添加click事件，当a元素上click事件触发时，它会向上冒泡直到DOM结构的最外层document，浏览器会解释href属性，并且在窗口中加载新地址的内容。
如果我们需要阻止浏览器针对点击事件的默认行为，可以调用event.preventDefault()
demo:preventDefault
10.有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
<script src="http://o97duqgf5.bkt.clouddn.com/jquery-3.0.0.min.js"></script>
<script>
var ul = document.querySelector('ul')
function callback(event){
var target = event.target;
console.log(target.innerHTML)
}
//使用javascript
ul.addEventListener('click',callback)
//使用jquery
//$(ul).on('click','li',callback)
</script>
11.补全代码，要求：
- 当点击按钮开头添加时在
<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在<li>前端6班</li>后添加用户输入的非空字符串. - 当点击每一个元素li时控制台展示该元素的文本内容。
代码
12.补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。
代码
13.实现如下图Tab切换的功能
代码
