DOM、事件

作者: 疯小儿 | 来源:发表于2017-09-25 21:29 被阅读0次

前端面试题（3）——DOM事件类
DOM事件
DOM事件
DOM0和DOM2级事件简单理解
Dom事件
3-6 DOM事件
HTML DOM 事件
网易微专业-DOM编程艺术 05 事件
DOM事件类
DOM事件

一、dom对象的innerText和innerHTML有什么区别？

innerText设置或获取位于对象起始和结束标签内的文本。如果有HTML标签，它会过滤掉HTML标签，并且在多层次的时候会按照元素由浅到深的顺序拼接其内容。
innerHTML属性返回该元素包含的 HTML 代码（包括元素、注释和文本节点）。该属性可读写，常用来设置某个节点的内容。
如果将innerHTML属性设为空，等于删除所有它包含的所有节点。

<div id="text">
  <p>
   abc
    <span>def</span>
  </p>
</div>
<script>console.log(text.innerText)</script> // 输出 ： "abc def"
<script>console.log(text.innerHTML)</script>
//输出 ："  <p> abc <span>def</span> </p> "
<script>text.innerHTML='';console.log(text.innerHTML)</script>//输出： 空节点

二、elem.children和elem.childNodes的区别？

elem.children属性返回一个HTMLCollection对象（包含了元素的通用集合，还提供了用来从该集合中选择元素的方法和属性。），包括当前元素节点的所有子元素。它是一个类似数组的动态对象（实时反映网页元素的变化）。这个属性与Node.childNodes属性的区别是，它只包括HTML元素类型的子节点，不包括其他类型的子节点。
例子

三、查询元素有几种常见的方法？

1.`document.querySelector`、`document.querySelectorAll`

ocument.querySelector方法接受一个CSS选择器作为参数，返回匹配该选择器的元素节点。
document.querySelectorAll方法返回一个NodeList对象，包含所有匹配给定选择器的节点。
document.querySelectorAll('DIV:not(.ignore)');选中div元素，那些class含ignore的除外
但是，它们不支持CSS伪元素的选择器和伪类的选择器（比如:link和:visited）。
并且这两种方法在HTML文档上和HTML元素上都能调用。

2.`document.getElementsByTagName()`

document.getElementsByTagName方法返回所有指定HTML标签的元素，返回值是一个类似数组的HTMLCollection对象，可以实时反映HTML文档的变化。该方法在HTML文档上和HTML元素上都能调用。

ar paras = document.getElementsByTagName('p');
paras instanceof HTMLCollection // true

3.`document.getElementsByClassName()`

document.getElementsByClassName方法返回一个类似数组的对象，包括了所有class名字符合指定条件的元素，元素的变化实时反映在返回结果中。由于class是保留字，所以JavaScript一律使用className表示CSS的class。如果参数是一个空格分隔的字符串，元素的class必须符合所有字符串之中所有的class才会返回。

var elements = document.getElementsByClassName('foo bar');
上面代码返回同时具有foo和bar两个class的元素，foo和bar的顺序不重要。

4.`document.getElementsByName()`

document.getElementsByName方法用于选择拥有name属性的HTML元素（比如<form>、<radio>、<img>、<frame>、<embed>和<object>等），返回一个类似数组的的对象（NodeList对象的实例），因为name属性相同的元素可能不止一个。

// 表单为 <form name="a"></form>
var forms = document.getElementsByName('a');
forms[0].tagName // "FORM"

5.`getElementById()`

getElementById方法返回匹配指定id属性的元素节点。如果没有发现匹配的节点，则返回null。
该方法只能在HTML文档上调用，不能在HTML元素上调用。

6.`document.elementFromPoint()`

document.elementFromPoint方法返回位于页面指定位置最上层的Element子节点。
var element = document.elementFromPoint(50, 50);
两个参数，依次是相对于当前视口左上角的横坐标和纵坐标，单位是像素。

四、如何创建一个元素？如何给元素设置属性？

创建元素：
- createElement方法用来生成网页元素节点。参数为元素的标签名。
- createTextNode方法用来生成文本节点，参数为所要生成的文本节点的内容。
设置属性：
- element.setAttribute(name, value);接收的2个参数分别是需要设置的属性名和属性值。如果指定的属性已经存在，则其值变为传递的值。
元素的添加：
- Node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。
  语法：var child = node.appendChild(child);
- Node.insertBefore()方法，在当前节点的某个子节点之前再插入一个子节点。
  语法：var insertedElement = parentElement.insertBefore(newElement, referenceElement);
  语法解析：1.新元素：你想插入的元素（newElement）
  2.目标元素：你想把这个新元素插入到哪个元素（targetElement）之前。
  3.父元素：目标元素的父元素（parentElement）
元素的删除：
- Node.removeChild()方法从DOM中删除一个子节点。返回删除的节点。
  举例：

<body>
<div id="test">世界
  <div id="nested">hello</div>
</div>
  <script>
    var a=document.getElementById("test");
    var p=document.createElement('p')
    var text=document.createTextNode('你好')
    var b=document.createElement('p')
     p.appendChild(text)
     a.appendChild(p)  //世界 hello 你好
    //  b.appendChild(text)
    //  a.insertBefore(b,a.firstChild)    // 你好 世界 hello
   var d_nested = document.getElementById("nested");
   var throwawayNode = a.removeChild(d_nested); // 世界 你好
  </script>
</body>

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

DOM 0级事件,通过javascript制定事件处理程序的传统方式。就是将一个函数赋值给一个事件处理属性。一个事件处理程序只能对应一个处理函数。这些属性通常全部小写。
例子：

var btn = document.getElementById("mybtn")
btn.onclick = function(){
alert(this.id); //"mybtn"
btn.onclick=null;//删除事件处理程序，单击按钮将不会有任何动作发生。

使用DOM0级方法指定的事件处理程序被认为是元素的办法。因此，这时候的事件处理程序是在元素的作用域中运行；换句话说，程序中的this
引用当前元素，正如上面的例子。
DOM 2级事件，定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener() 和 removeEventListener()。通过addEventListener()添加的事件只能通过removeEventListener()来删除。
所有DOM节点都包含这两个方法，并且都接受3个参数：
1.要处理的事件名
2.作为事件处理程序的函数
3.一个布尔值，布尔值如果是true，表示在捕获阶段调用事件处理程序，如果是flase，表示在冒泡阶段调用事件处理程序。
例子：

var body=document.body
body.addEventListener('click',function(){
  document.body.appendChild(document.createTextNode('1'))
}) // aaa 1

body.removeEventListener('click',function(){
  document.body.appendChild(document.createTextNode('1'))
})//aaa 1
//这样不能移除 上面的函数。
//如果 给函数添加一个名字如下：
var body=document.body
body.addEventListener('click',function a(){
  document.body.appendChild(document.createTextNode('1'))
})
body.removeEventListener('click',a)
})
// 这样也没有办法移除，因为作用域的关系。
// //用以下方法：
var body=document.body
function a(){
  document.body.appendChild(document.createTextNode('1'))
}
body.addEventListener('click',a)
body.removeEventListener('click',a)

使用DOM 2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序，这也是与DOM 0级事件最主要的区别。

七、`attachEvent`与`addEventListener`的区别？

attachEvent 是早期IE浏览器（IE8及早期版本）的一个专有的替代性标准，替代EventTarget.addEventListener()方法。该特性是非标准的。
语法：attached = target.attachEvent(eventNameWithOn, callback)
attachEvent与addEventListener的区别：
- 接受的参数
  attachEvent接受2个参数：事件名称，事件处理函数。只支持冒泡。
  addEventListener接受3个参数：事件名称，事件处理函数，布尔值。冒泡、捕获都支持。
- 事件名称
  attachEvent事件名称前面要加“on”，如“onclick”，
  addEventListener不需要，如“click”。
- 作用域
  attachEvent会在全局作用域中运行，即this = window。
  addEventListener是在元素作用域中运行，this指的是当前元素。
- 删除方式
  attachEvent使用detachEvent删除添加事件。
  addEventListener使用removeEventListener删除添加事件。

八、解释IE事件冒泡和DOM2事件传播机制？

IE事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素。如下图，当我们点击div里面文本的时候，click会先在<div>元素上发生，然后沿着DOM树向上传播，在每一级的节点都会发生直到传播到document对象。

冒泡和捕获图解
DOM 2事件规定的事件包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获阶段，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件作出响应。

DOM2事件传播机制
*在DOM事件流中，实际的目标（div元素）在捕获阶段不会接收到事件。这意味着在捕获阶段事件从document到<html>再到<body>后就停止了。下一个阶段是“处于目标”阶段，于是事件在<div>上发生，并在事件处理中被看出冒泡阶段的一部分。然后冒泡阶段发生，事件又传播回文档。
但IE、Safari、Chrome、Firefox和opera9.5及更高版本都会再捕获阶段触发事件对象上的事件。结果，就是有两个机会在目标对象上面操作事件。

九、如何阻止事件冒泡？如何阻止默认事件？

stopPropagation()方法可以阻止事件冒泡。例如：

  <div id="test">
      <input id="myBtn" type="button" value="点击我"/>
  </div>
<script>
 var oDiv = document.getElementById("test");
  var oBtn = document.getElementById("myBtn");
  oDiv.addEventListener("click",function(){
      console.log(this.id+"我被冒泡了");
  },false);
oBtn.addEventListener("click",function(){
      console.log(this.id+"我被冒泡了");
  },false); //当没有终止冒泡时的输出结果："myBtn我被冒泡了"   "test我被冒泡了"
  oBtn.addEventListener("click",function(ev){
      console.log(this.id);
      ev.stopPropagation();
  },false); // 输出结果："myBtn我被冒泡了"   "myBtn"  
</script>

reventDefault()方法用来取消事件默认行为。例如：

<body>
  <div id="test">
      <a id="myLink" href="http://www.baidu.com">百度</a>
  </div>
</body>
<script>
  var link = document.getElementById("myLink");
  link.addEventListener("click",function(ev){
      ev.preventDefault();//取消a链接点击转跳到指定的URL的默认行为。
  },false);
</script>

前端面试题（3）——DOM事件类
基本概念：DOM事件的级别 DOM事件模型：事件冒泡事件捕获 DOM事件流描述DOM事件捕获的具体流程 Even...
DOM事件
DOM级别与DOM事件 DOM级别：DOM0级、DOM1级、DOM2级、DOM3级DOM事件：DOM0级事件处理、...
DOM事件
DOM级别与DOM事件 DOM级别：DOM0级，DOM1级，DOM2级和DOM3级DOM事件：DOM0级事件处理，...
DOM0和DOM2级事件简单理解
关于DOM0 和DOM1级事件可以简单理解为：事件分为DOM 0级事件和Dom 2级事件，DOM2级事件也叫做事件...
Dom事件
基本概念 Dom事件级别 Dom事件模型 Dom事件流描述Dom事件捕获的具体流程 Event对象的常见应用自...
3-6 DOM事件
问题 DOM 事件的级别 DOM 事件模型(就是捕获和冒泡儿) DOM 事件流描述DOM事件捕获的具体流程 Ev...
HTML DOM 事件
HTML DOM 事件 HTML DOM 事件 HTML DOM 事件允许Javascript在HTML文档元素中...
网易微专业-DOM编程艺术 05 事件
1、DOM事件⑴主要内容▪事件流▪事件注册▪事件对象▪事件分类▪事件代理 ⑵什么是DOM事件▪点击一个DOM元素▪...
DOM事件类
基本概念：DOM事件的级别 DOM事件模型 DOM事件流描述DOM事件捕获的具体流 Event对象的常见应用自...
DOM事件
DOM事件的级别 DOM事件模型 DOM事件流描述DOM时间捕获的具体流程 Event对象的常见应用自定义事件...

DOM、事件

一、dom对象的innerText和innerHTML有什么区别？

二、elem.children和elem.childNodes的区别？

三、查询元素有几种常见的方法？

1.`document.querySelector`、`document.querySelectorAll`

2.`document.getElementsByTagName()`

3.`document.getElementsByClassName()`

4.`document.getElementsByName()`

5.`getElementById()`

6.`document.elementFromPoint()`

四、如何创建一个元素？如何给元素设置属性？

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

七、`attachEvent`与`addEventListener`的区别？

八、解释IE事件冒泡和DOM2事件传播机制？

九、如何阻止事件冒泡？如何阻止默认事件？

相关文章

前端面试题（3）——DOM事件类

DOM事件

DOM事件

DOM0和DOM2级事件简单理解

Dom事件

3-6 DOM事件

HTML DOM 事件

网易微专业-DOM编程艺术 05 事件

DOM事件类

DOM事件

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

DOM、事件

一、dom对象的innerText和innerHTML有什么区别？

二、elem.children和elem.childNodes的区别？

三、查询元素有几种常见的方法？

1.document.querySelector、document.querySelectorAll

2.document.getElementsByTagName()

3.document.getElementsByClassName()

4.document.getElementsByName()

5.getElementById()

6.document.elementFromPoint()

四、如何创建一个元素？如何给元素设置属性？

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

七、attachEvent与addEventListener的区别？

八、解释IE事件冒泡和DOM2事件传播机制？

九、如何阻止事件冒泡？如何阻止默认事件？

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

1.`document.querySelector`、`document.querySelectorAll`

2.`document.getElementsByTagName()`

3.`document.getElementsByClassName()`

4.`document.getElementsByName()`

5.`getElementById()`

6.`document.elementFromPoint()`

七、`attachEvent`与`addEventListener`的区别？