任务22-Dom、事件

问答

• dom对象的innerText和innerHTML有什么区别？
  • innerText是一个可写属性，返回元素内包含的文本内容，在多层次的时候会按照元素由浅到深的顺序拼接其内容
  • innerHTML属性作用和innerText类似，但是不是返回元素的文本内容，而是返回元素的HTML结构，在写入的时候也会自动构建DOM

注意：
在给.innerHTML赋值时，浏览器会执行代码,解析成html；
在给.innerText赋值时，浏览器会把它解析成文本展示出来，相当于自动转义成文本。所以一般用innerText安全性会更高一点，比如展示用户输入数据的时候，

• elem.children和elem.childNodes的区别？
  • elem.children：只获取html的节点，不包括文本节点。
  • elem.childNodes：获取所有的子节点。包括文本，段落，换行，空格等。注意里面换行和空格的影响

注意：

ps:这种情况下直接用.children会更稳妥一些。

• 查询元素有几种常见的方法？
  (1).getElementById()：
  getElementById方法返回匹配指定ID属性的元素节点。如果没有发现匹配的节点，则返回null。这也是获取一个元素最快的方法

  (2).getElementsByClassName()：
  getElementsByClassName方法返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
  getElementsByClassName方法的参数，可以是多个空格分隔的class名字，返回同时具有这些节点的元素。

(3)getElementsByTagName()：
getElementsByTagName方法返回所有指定标签的元素（搜索范围包括本身）。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。注意，getElementsByTagName方法会将参数转为小写后，再进行搜索。

(4) querySelector():
querySelector方法返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。
(5)querySelectorAll():
querySelectorAll方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中
querySelectorAll方法的参数，可以是逗号分隔的多个CSS选择器，返回所有匹配其中一个选择器的元素

• 如何创建一个元素？如何给元素设置属性？
  createElement():用来生成HTML元素节点。
  setAttribute():用于设置元素属性
  <pre>
  <script>
  var newDiv = document.createElement("div");
  newDiv.id="mydiv";
  newDiv.setAttribute("class","mydiv");
  console.log(newDiv);//<div id="mydiv" class="mydiv"></div>
  </script>
  </pre>
• 元素的添加、删除？
  appendChild():在元素末尾添加元素
  <pre>
  var newDiv = document.createElement("div");
  var newContent = document.createTextNode("Hello");
  newDiv.appendChild(newContent);
  </pre>
  insertBefore():在某个元素之前插入元素
  <pre>
  var newDiv = document.createElement("div");
  var newContent = document.createTextNode("Hello");
  newDiv.insertBefore(newContent, newDiv.firstChild);
  </pre>
  删除元素使用removeChild()方法即可
  <pre>
  arentNode.removeChild(childNode);
  </pre>

６．DOM0 事件和DOM2级在事件监听使用方式上有什么区别？

DOM0 事件: 一个事件只能绑定一个函数(处理程序)，再写一次相当于把原来的函数覆盖了，不能绑定多个函数
　DOM2级:同一个事件可以用不同的处理方式，对同一个事件可以绑定多个函数（即多个处理程序）

<pre>

document.querySelector('.btn').onclick=function(e){
console.log(e);
// console.log(this);
console.log(this.innerText);
console.log('click me...');
};

document.querySelector('#ct').addEventListener('click',function(){
console.log(this);
console.log('in ct...');
});
</pre>

７．attachEvent与addEventListener的区别？

<pre>
function addEvent(node, type, handler) {
if (!node) return false;
if (node.addEventListener) {
node.addEventListener(type, handler, false);
return true;
}
else if (node.attachEvent) {
node.attachEvent('on' + type, handler, );
return true;
}
return false;
}
</pre>

(1)参数个数不相同，这个最直观，addEventListener有三个参数，attachEvent只有两个，attachEvent添加的事件处理程序只能发生在冒泡阶段，addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理（我们一般为了浏览器兼容性都设置为冒泡阶段）

(2)第一个参数意义不同，addEventListener第一个参数是事件类型（比如click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）

(3)事件处理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window

(4)为一个事件添加多个事件处理程序时，执行顺序不同，addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)，所以添加多个的时候，不依赖执行顺序的还好，若是依赖于函数执行顺序，最好自己处理，不要指望浏览器

８．解释IE事件冒泡和DOM2事件传播机制？

(1)IE的事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素

(2)DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段

＊9. 如何阻止事件冒泡？ 如何阻止默认事件？
(1)stopPaopagation()方法可以停止事件在DOM层次的传播，即取消进一的事件捕获或冒泡。我们可以在button的事件处理程序中调用stopPropagation()从而避免注册在body上的事件发生
<pre>
document.getElementsByTagName('a').onclick = function (e) {
e.preventDefault();
}
</pre>
(2)要阻止事件的默认行为，可以使用preventDefault()
方法，前提是cancelable值为true，比如我们可以阻止链接导航这一默认行为
<pre>
document.getElementsByTagName('a').onclick = function (e) {
e.preventDefault();
}
</pre>

代码

代码1

代码2

代码3-方法一

代码3-方法二

代码4

代码5

****本教程版权归本人和饥人谷所有,转载请经过允许****