问答
- dom对象的innerText和innerHTML有什么区别？
innerText:可以获取或设置对象标签内的文本内容
<div id="ct">
<h1>click me!</h1>
<a class="link" href="#">this is a element test</a>
</div>
<script type="text/javascript">
var ct = document.querySelector('#ct');
console.log(ct.innerText);//click me! this is element test
</script>
innerHTML:可以获取或设置对象html里面的html构造
<div id="ct">
<h1>click me!</h1>
<a class="link" href="#">this is a element test</a>
</div>
<script type="text/javascript">
var ct = document.querySelector('#ct').innerHTML;
console.log(ct);// <h1>click me!</h1> <a class="link" href="#">this is a element test</a>
</script>
- elem.children和elem.childNodes的区别？
children：返回指定元素的子元素集合，只包含元素节点，仅包含直接子元素。
childNodes：返回的内容包含文本节点和元素节点返回的#text就是文本节点，内容是空格、换行符或制表符等
<body>
<div id="ct">
<h1>click me! <span>inside Span</span></h1>
</div>
<script type="text/javascript">
console.log(document.getElementsByTagName('h1')[0].children); //HTMLCollection[1]
console.log(document.getElementsByTagName('h1')[0].childNodes);//NodeList[2]
</script>
</body>
- 查询元素有几种常见的方法？
①getElementById:通过ID特征返回一个对象，该对象对应文档里面一个特定的元素element
②getElementByClassName：返回一个对象数组，对应文档里的特定元素节点
③getElementByTagName：返回一个对象数组，对应文档里的特定元素节点
④querySelectorAll：返回当前文档中匹配的选择器，返回对象类型是[NodeList]（类数组对象）
⑤querySelector：匹配单个对象，根据选择器，该对象对应文档里的一个特定元素节点
- 如何创建一个元素？如何给元素设置属性？
<script type="text/javascript">
var img = document.createElement('img');
img.id = 'myimg';
/*or*/ img.setAttribute("class", "myimg");
console.log(img); //<img id = "myimg">
</script>
- 元素的添加、删除？
元素的添加
appendChild：元素的末尾添加一个子元素节点
<div id="laugh">
<h1>aaa</h1>
</div>
<script type="text/javascript">
var div = document.getElementById('laugh'),
newConetent = document.createTextNode('hello');
div.appendChild(newConetent);//执行这句会在html结构后面加入一个子元素节点hello
</script>
//另附
var div = document.createElement('div');
var newContent = document.createTextNode('hello');
newDiv.appendChild(newContent);
insertBefore：在某个元素之前插入元素节点
<div id="laugh">
<h1>aaa</h1>
</div>
<script type="text/javascript">
var div = document.getElementById('laugh'),
newContent = document.createTextNode('hello');
div.insertBefore(newContent, div.firstChild);
</script>
//另附
var newDiv = document.createElement('div');
var newContent = document.createTextNode('hello');
newDiv.insertbefore(newContent , newDiv.firstChild);
元素的删除
removeChild：删除某个元素，参数为一个待删除的元素
parentNode.removeChild(childNode);
- DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
DOM0：每个元素都有自己的时间处理程序属性，这些属性名字通常是小写的，比如onclick等。将这些属性的值设置为一个函数，可以指定事件处理程序。比如
<input id='btn' type="button" name="name" value="Don't clike me anymore ..." />
<script type="text/javascript">
var btn = document.getElementById('btn');
btn.onclick = function display() {
alert(this.value);
}
</script>
事件处理程序被认为是元素的方法，事件处理程序在元素的作用域下运行，this是当前的这个元素，所以点击button的结果是：Don't clike me anymore ...
如果要删除事件处理程序的话，只要把元素onclick的属性赋为null即可。
DOM2：DOM2级时间定义了两个方法用于处理指定和删除事件处理程序的操作
1、addEventListener
2、removeEventListner
所有的DOM节点都包含这两个方法，他们接受三个参数：
1、事件类型
2、事件处理方法
3、布尔，如果是true则在捕获阶段调用事件处理程序，如是false则是在时间冒泡阶段就处理。
//expamle
<input id='btn' type="button" name="name" value="Don't clike me anymore ..." />
<script type="text/javascript">
var btn = document.getElementById('btn');
btn.addEventListener('click',function(){
alert(this.value);
},false)
</script>
DOM2可以为上面代码添加多个事件处理程序，DOM不行。
如果要移除事件处理程序，只需要removeEventListener，移除时的参数和添加时相同（匿名函数无法移除）。
- attachEvent与addEventListener的区别？
1、attachEvent用在IE上因IE不支持addEventListener。
2、参数上addEventListener可以接收3个参数（类型，函数，布尔值），attachEvent接收2个参数（类型，函数）只支持事件冒泡。
3、移除函数：比如addEventListener移除方法是removeEventListener,但accachEvent的移除方法是detachEvent。
4、类型名称：addEventListener的接收类型是'click',但attachEvent的接收类型是'onclick'。
5、作用域：addEventListener作用域是元素本身，this指的是点击的触发的元素，而attachEvent的作用域是全局，this指的就是全局的window啦~
6、事件处理程序的执行顺序：addEventListener按照添加顺序执行，而attachEvent顺序是无规律的（添加的少的时候多数是反顺序执行，添加多了就会无规律）
- 解释IE事件冒泡和DOM2事件传播机制？
1、IE事件冒泡：事件被触发由具体的第一个被触发的元素接收，然后一级一级网上传播
2、DOM2事件传播：分事件捕获阶段，处于目标阶段，事件冒泡阶段。首先发生的是事件捕获，然后是实际目标接收事件，最后是冒泡阶段
- 如何阻止事件冒泡？ 如何阻止默认事件？
可以写代码btn.stopPropagation()方法用户立即停止事件在DOM层中的传播，阻止事件进一步的冒泡，一般来说用于阻止事件传播到body（不能阻止同意document节点上其他事件句柄被调用）
<input id='btn' type="button" name="name" value="Don't clike me anymore ..." />
<script type="text/javascript">
var btn = document.getElementById('btn');
btn.addEventListener('click',function(e){
console.log(e);
alert(this.value);
e.stopPropagation();//this is the point
},false)
document.body.addEventListener('click',function(){
alert("what the hell? I'm anonymous");
},false)
</script>
代码
- 有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
<ul class="ct"> <li>这里是</li> <li>前端6班</li></ul><script>//todo ...</script>
//答
<body>
<ul class="content">
<li>here</li>
<li>we</li>
<li>go~!!</li>
</ul>
<script type="text/javascript">
var lists = document.getElementsByClassName('content')[0].getElementsByTagName('li');
for(i = 0; i < lists.length; i++) {
lists[i].addEventListener('click', function() {
console.log(this.innerText);
})
}
</script>
</body>
- 补全代码，要求
1、当点击按钮开头添加时在<li>这里是</li>元素前面添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时，在<li>前端6班</li>后添加用户输入的非空字符串。
2、当点击每一个元素li时控制台展示该元素的文本内容。
<ul class="ct">
<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>
//todo ...
</script>
//答
<ul class="ct">
<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)
//在父元素添加事件监听
//注释为笔记
//这是每个元素都添加监听
// var listArr = document.getElementsByClassName('ct')[0].getElementsByTagName('li');
// for(var i =0; i< listArr.length; i++){
// listArr[i].addEventListener('click',function(){
// console.log(this.innerText);
// })
// }
//这是直接给父元素添加
// var bttttttnnn = document.querySelector('.ct');
// bttttttnnn.addEventListener('click', function(e) {
// console.log(e.target.innerText);
// })
</script>
- 补全代码，要求：当鼠标放置在
li元素上，会在img-preview里展示当前li元素的data-img对应的图片。
<ul class="ct">
<li data-img="https://img.alicdn.com/imgextra/i4/773811758/TB22XMHtVXXXXa7XXXXXXXXXXXX_!!773811758.jpg">鼠标放置查看图片1</li>
<li data-img="https://img.alicdn.com/imgextra/i1/773811758/TB2VrAHtVXXXXbfXXXXXXXXXXXX_!!773811758.jpg">鼠标放置查看图片2</li>
<li data-img="https://img.alicdn.com/imgextra/i3/773811758/TB2cL7JtVXXXXaMXXXXXXXXXXXX_!!773811758.jpg">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
var ct = document.querySelector('.ct'),
childs = ct.querySelectorAll('li'),
preview = document.querySelector('.img-preview');
// for(var i = 0; i < childs.length; i++) {
// childs[i].addEventListener('mouseenter', function() {
// var dataImg = this.getAttribute('data-img');
// preview.innerHTML = ''
// });
// }
//给父元素加监听
ct.addEventListener('mouseover',show)
function show(e){
var src = e.target.getAttribute('data-img');
preview.innerHTML='';
}
</script>
