keywords: DOM、事件代理。
问答
-
dom对象的innerText和innerHTML有什么区别？
innerText属性会返回元素节点下的文本节点，并拼接成文本内容。例如：
<div id="testdiv">
<p>This is <em>my</em>content.</p>
</div>
<script>
window.onload = function () {
var testdiv = document.getElementById('testdiv')
console.log(testdiv.innerText)
}
</script>
//This is mycontent.
innerHTML属性会得到元素节点下的html内容，包括子元素节点及其属性节点、文本节点。例如：
<div id="testdiv">
<p>This is <em>my</em>content.</p>
</div>
<script>
window.onload = function () {
var testdiv = document.getElementById('testdiv')
console.log(testdiv.innerHTML)
}
</script>
//<p>This is <em>my</em>content.</p>
innerText和innerHTML都支持读取和写入内容。
-
elem.children和elem.childNodes的区别？
childNodes属性可以用来获得任何一个元素的所有直接子元素，它是一个包含这个元素全部子元素的数组：
element.childNodes
childNodes返回的内容包括文本节点和元素节点。其中，返回的#text就是文本节点，内容是空格、换行符或制表符等。
与childNodes不同的是，children属性返回的内容仅包括直接子元素的元素节点。
-
查询元素有几种常见的方法？
5中获取特定元素的方法：
1、getElementById：返回一个对象，该对象对应着文档里的一个特定的元素节点
2、getElementByclassName和getElementByTagName：返回一个对象数组，它们分别对应着文档里的一组特定的元素节点
3、querySelectorAll：返回当前文档中匹配一个特定选择器的所有的元素 .返回的对象类型是 [NodeList]（类数组对象）
4、querySelector：根据匹配的选择器，返回一个对象，该对象对应着文档里的一个特定的元素节点
-
如何创建一个元素？如何给元素设置属性？
创建元素：
createElement()用来创建一个元素节点，参数为所要创建的元素。
var img = document.createElement('img')
img.id = 'myimg'
console.log(img)
//<img id='myimg'>
creatElement()创建的元素游离在内存中，需要使用appendChild()追加到元素的底部。
查询属性：
getAttribute是一个函数，参数是打算查询的属性的名字,返回属性的内容：
obj.getAttribute(attribute)
getAttribute方法不属于document对象，不能通过document对象调用，而只能通过元素节点对象调用。例如，可以与getElementByTagName方法何用，获取每个<p>元素的title属性：
var paras = document.getElementByTagName('p')
for (var i = 0 ; i < paras.length ; i ++ ) {
alert(paras[i].getAttribute('title'))
}
设置属性：
setAttribute可以用于对属性节点设置属性。
obj.setAttribute(attribute,value)
例如：
var shopping = document.getElementById('purchases')
console.log(shopping.getAttribute('title'))
shopping.setAttribute('title', 'a list of goods')
console.log(shopping.getAttribute('title'))
-
元素的添加、删除？
元素的添加：
appendChild：在元素的末尾添加一个子元素节点
var newDiv = document.createElement('div')
var newContent = document.createTextNode('hello')
newDiv.appendChild(newContent)
insertBefore：在某个元素之前插入元素
var newDiv = document.createElement('div')
var newContent = document.createTextNode('hello')
newDiv.insertbefore(newContent , newDiv.firstChild)
//把newContent放在newDiv的里面，插入在newDiv的第一个子元素的前面。
元素的删除：
removeChild：删除某个元素，参数为一个待删除的元素
parentNode.removeChild(childNode)
-
DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
DOM0：每个元素都有自己的事件处理程序属性，这些属性名称通常为小写，如onclick等，将这些属性的值设置为一个函数，就可以指定事件处理程序，如下
<input id="btnClick" type="button" value="Click Here" />
<script type="text/javascript">
var btnClick = document.getElementById('btnClick');
btnClick.onclick = function showMessage() {
alert(this.id);
};
</script>
事件处理程序被认为是元素的方法，事件处理程序在元素的作用域下运行，this就是当前元素，所以点击button结果是：btnClick.
如果要删除事件处理程序，只需把元素的onclick属性赋为null即可。
DOM2：OM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作：
1、addEventListener
2、 removeEventListener
所有的DOM节点都包含这两个方法，并且它们都接受三个参数：
1、事件类型
2、事件处理方法
3、布尔参数，如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理。
例如：
<input type="button" value="Click here" id="btnClick">
<script>
var btnClick = document.getElementById('btnClick')
btnClick.addEventListener('click' , function( ) {
alert(this.id)
} , false)
</script>
与DOM0不同的是，DOM2可以为上述代码的click事件添加多个处理程序。
另外，如果要移除事件处理程序，只能通过removeEventListener,移除时的参数与添加时相同。（匿名函数无法移除）
-
attachEvent与addEventListener的区别？
1、兼容性：IE不兼容addEventListener，但支持attachEvent；
2、参数：addEventListener接收3个参数（类型、函数、布尔值），attachEvent接收2个（类型、函数，只支持事件冒泡）；
3、类型名称：比如addEventListener接收的类型为click，而attachEvent接收的则是onclick；
4、移除函数：addEventListener的移除方法是removeEventListener，而attachEvent的移除方法是detachEvent；
5、作用域：addEventListener的作用域是元素本身，this指的是触发元素，而attachEvent的作用域是全局，this指的是window；
6、事件处理程序的执行顺序：addEventListener按照添加顺序执行，而attachEvent顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律)。
-
解释IE事件冒泡和DOM2事件传播机制？
IE事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素。
DOM2事件传播：分事件捕获阶段，处于目标阶段，事件冒泡阶段。首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段。
-
如何阻止事件冒泡？ 如何阻止默认事件？
stopPropagation()方法用于立即停止事件在DOM层次中的传播，阻止事件进一步冒泡或捕获，一般用于阻止事件传播到body。(不能阻止同一document节点上的其他事件句柄被调用)
<input type="button" value="Click here" id="btnClick">
<script>
var btnClick = document.getElementById('btnClick')
btnClick.addEventListener('click' , function(event ) {
console.log(event)
alert('click')
event.stopPropagation()
} , false)
document.body.addEventListener('click' , function(event ) {
alert('click')
} , false)
</script>
要阻止事件的默认行为，可以使用preventDefault()方法，前提是cancelable值为true，比如我们可以阻止链接导航这一默认行为
document.getElementsByTagName('a').onclick = function (event) {
event.preventDefault();
}
代码
-
有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
var ct = document.getElementsByClassName('ct')[0]
ct.addEventListener( 'click' , function(e) {
console.log(e.target.innerText)
, false})
</script>
-
补全代码，要求：
1、当点击按钮开头添加时在
<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；
2、当点击结尾添加时在<li>前端6班</li>后添加用户输入的非空字符串.
3、 当点击每一个元素li时控制台展示该元素的文本内容。
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script>
var ct = document.getElementsByClassName('ct')[0]
var content = document.getElementsByClassName('ipt-add-content')[0]
var btnStart = document.getElementById('btn-add-start')
var btnEnd = document.getElementById('btn-add-end')
btnStart.addEventListener('click' , handler)
btnEnd.addEventListener('click' ,handler)
function handler (e) {
var newE = document.createElement('li')
var newContent = document.createTextNode(content.value)
newE.appendChild(newContent)
if (e.target.id === 'btn-add-start') {
ct.insertBefore(newE , ct.firstChild)
} else ct.appendChild(newE)
}
ct.addEventListener('click',function (e) {
console.log(e.target.innerText)
} , false)
</script>
-
补全代码，要求：当鼠标放置在li元素上，会在
img-preview里展示当前li元素的data-img对应的图片。
-
实现如下图Tab切换的功能
-
实现下图的模态框功能
网友评论