DOM&事件-Assignment

1.dom对象的innerText和innerHTML有什么区别？

innerText、textContent以及innerHTML的区别

innerText返回从body元素开始所有的文本内容，并以文档未添加样式时的排版方式显示

innerHTML返回从body元素开始所有的带标签的文本内容，并按照在html文档中的原格式显示

textContent返回从body元素开始所有的文本内容，排版方式按照在html文档中的原格式显示但不带标签


    
      demo1
      demo2


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接口，将分返回一个当前节点的所有子节点的伪数组


    
      demo1
      demo2

var ul = document.getElementById('box')
console.log(ul.children)
console.log(ul.childNodes)

3.查询元素有几种常见的方法？

通过id
通过TagName
通过className


  hello world!

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

用户名：

var input = document.getElementsByName('username')
console.log(input)

通过querySelector()和querySelectorAll()
querySelector方法返回匹配指定的CSS选择器的元素节点;如果有多个节点满足匹配条件，则返回第一个匹配的节点(最上层的节点)
querySelectorAll方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象;

  
    
      demo

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代码

    demo1
    demo2
    demo3

//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时控制台展示该元素的文本内容。不考虑兼容

代码

11.补全代码，要求：

当点击按钮开头添加时在
这里是

前端6班

当点击每一个元素li时控制台展示该元素的文本内容。

代码

12.补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。

代码

13.实现如下图Tab切换的功能

代码

14.实现下图的模态框功能

代码