问答题
1、dom对象的innerText和innerHTML有什么区别？
innerText特性用来修改起始标签和结束标签之间的文本的。在多层次的时候会按照元素由浅到深的顺序拼接其内容。
innerHTML，将返回所有元素和文本的HTML代码。
innerText和innerHTML
2、elem.children和elem.childNodes的区别？
elem.childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合。
elem.children 获取作为对象直接后代的 DHTML 对象的集合。
elem.childNodes是符合W3C标准的，比较通用。elem.children只是IE支持，不是标准，Firefox就不支持。
关于nodeType
在线编辑
3、查询元素有几种常见的方法？
1.getElementById()
2.getElementsByClassName()
3.getElementsByTagName()
4.getElementsByName() 查询带name属性的标签元素
5.querySelector() 查询带有css选择器或者标签的元素，返回第一个匹配元素
6.querySelectorAll() 查询带有css选择器或者标签的元素，返回所有匹配元素
7.elementFromPoint(x,y) 查询页面指定位置的元素（参与单位为像素，位置相对于当前窗口左上角），如果不可返回，则返回其父元素，如果坐标值无意义，则返回null。
dom查询
4、如何创建一个元素？如何给元素设置属性？
方法一：
var newDiv = document.createElement("div");//创建一个游离的div元素节点
newDiv.id = 'mydiv';//为div元素添加mydiv的ID；
console.log(newDiv);//<div id="mydiv"></div>
方法二：
<body>
<div>
<p id="mytext">我是段落。</p>
</div>
<script>
var text = document.getElementById("mytext");
text.setAttribute("class","text2");
console.log(text);//<p id="mytext" class="text2">我是段落。</p>
</script>
</body>
5、元素的添加、删除？
添加元素appendChild(),在元素末尾添加元素
insertBefore(),在某个元素之前插入元素
<body>
<div>
<p id="mytext">我是段落。</p>
</div>
<script>
var text = document.getElementById("mytext");
var newContent = document.createTextNode("新增内容。");
text.appendChild(newContent);
</script>
</body>
<div>
<p id="mytext">我是段落。</p>
</div>
<script>
var text = document.getElementById("mytext");
var insertContent = document.createTextNode("插入内容。");
text.insertBefore(insertContent,text.firstChild);
</script>
</body>
删除元素：
parentNode.removeChild(childNode);
6、attachEvent与addEventListener的区别？
1.适应的浏览器版本不同
attachEvent方法适用于IE
addEventListener方法适用于FF
2.针对的事件不同
attachEvent中的事件带on，即事件处理程序方法
addEventListener中的事件不带on，即事件处理程序名称
3.参数的个数不同
attached = target.attachEvent(eventNameWithOn, callback)
非W3C标准浏览器，仅适用IE。attachEvent方法两个参数：第一个参数为事件方法（含on，如"onclick"），第二个参数为接收事件处理的函数。
target.addEventListener(type,listener,[useCapture]);
W3C标准浏览器，有三个参数：第一个参数表示事件名称（不含 on，如 "click"）；第二个参数表示要接收事件处理的函数；第三个参数是一个bool值，如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理。
4.事件处理程序的作用域
addEventListener()：作用域是元素本身，this指的是触发元素。
attachEvent()方法：事件处理程序会在全局作用域内运行，this 等于 window。
学习文章：js事件绑定及深入
5.移除事件绑定
删除DOM0 级事件处理程序，只需把元素的属性赋为null即可。
detachEvent()用于删除attachEvent()添加的时间处理程序。
用 addEventListener() 添加的事件处理程序只能使用 removeEventListener() 来移除，移除时传入的参数与添加时的参数相同。
所以，用 attachEvent()和addEventListener() 添加的匿名函数将无法移除。
6.事件处理程序的执行顺序：
addEventListener按照添加顺序执行，而attachEvent顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律)。
7、解释IE事件冒泡和DOM2事件传播机制？
事件流所描述的就是从页面中接受事件的顺序。
IE事件冒泡即事件开始时，由最具体的元素接收（也就是事件发生所在的节点），然后逐级传播到较为不具体的节点。
事件捕获的概念，与事件冒泡正好相反。它认为当某个事件发生时，父元素应该更早接收到事件，具体元素则最后接收到事件。
DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段。
关于事件流
8、如何阻止事件冒泡？ 如何阻止默认事件？
事件冒泡过程，是可以被阻止的。防止事件冒泡而带来不必要的错误和困扰。
w3c浏览器 监听事件(event)中添加stopPropagation(),
IE浏览器事件添加cancelBubble=true。
w3c浏览器监听事件(event)中添加preventDefault(),
IE浏览器事件添加returnValue=false。
代码题
1.有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容。
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
var li = document.getElementsByClassName('ct')[0].getElementsByTagName('li');
for(var i = 0;i<li.length;i++){
li[i].addEventListener('click',function(){
console.log(this.innerText);
})
}
</script>
2、补全代码，要求：
1.当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；
2.当点击结尾添加时在<li>前端6班</li>后添加用户输入的非空字符串.
当点击每一个元素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],
ipt = document.getElementsByClassName('ipt-add-content')[0],
startbtn = document.getElementById('btn-add-start'),
endbtn = document.getElementById('btn-add-end');
ct.addEventListener('click',function(e){
if(e.target.tagName.toLowerCase() === 'li'){
console.log(e.target.innerText);
}
})
startbtn.addEventListener('click',function(){
var li = document.createElement('li');
li.innerText = ipt.value;
ct.insertBefore(li,ct.firstChild);
})
endbtn.addEventListener('click',function(){
var li = document.createElement('li');
li.innerText = ipt.value;
ct.appendChild(li);
})
</script>
3.补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。
<ul class="ct">
<li data-img="1.png">鼠标放置查看图片1</li>
<li data-img="2.png">鼠标放置查看图片2</li>
<li data-img="3.png">鼠标放置查看图片3</li>
</ul>
<div class="img-preview">
</div>
<script>
var ct = document.querySelector('.ct'),
imgBox = ct.querySelectorAll('li'),
imgPre = document.querySelector('.img-preview');
for(var i = 0;i<imgBox.length;i++){
imgBox[i].addEventListener('mouseenter',function(){
var dataImg = this.getAttribute('data-img');
imgPre.innerHTML ="<img src='"+ dataImg+"'>";
})
}
</script>
网友评论