Dom、事件

2016-09-09 本文已影响23人 _Josh

问答

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

innerHTML:
　　从对象的起始位置到终止位置的全部内容,包括Html标签。
　“<span style="color:red">test1</span> test2 ”。
test.innerText:
　　从起始位置到终止位置的内容, 但它去除Html标签
　　上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。

elem.children和elem.childNodes的区别？

elem.children
属性返回一个动态的HTMLCollection集合，由当前节点所有的Element子节点组成；
elem.childNodes
返回一个NodeList对象（类数组对象），包括但不限于Element节点，还包括Text节点（换行，空格）和
注释节点。

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

1.getElementById()
getElementById方法返回匹配指定ID属性的元素节点。如果没有发现匹配的节点，则返回null。这也是获取一个元素最快的方法
var elem = document.getElementById("test");
getElementsByClassName()
getElementsByClassName方法返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
var elements = document.getElementsByClassName(names);
getElementsByClassName方法的参数，可以是多个空格分隔的class名字，返回同时具有这些节点的元素。
getElementsByTagName()
getElementsByTagName方法返回所有指定标签的元素（搜索范围包括本身）。返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
var paras = document.getElementsByTagName("p");
上面代码返回当前文档的所有p元素节点。注意，getElementsByTagName方法会将参数转为小写后，再进行搜索。
getElementsByName()
getElementsByName方法用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。
// 假定有一个表单是<form name="x"></form> var forms = document.getElementsByName("x"); forms[0].tagName // "FORM"
注意，在IE浏览器使用这个方法，会将没有name属性、但有同名id属性的元素也返回，所以name和id属性最好设为不一样的值。
querySelector()
querySelector方法返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。

var el2 = document.querySelector('#myParent > [ng-click]');```
querySelector方法无法选中CSS伪元素。

querySelectorAll()
querySelectorAll方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。
elementList = document.querySelectorAll(selectors);
querySelectorAll方法的参数，可以是逗号分隔的多个CSS选择器，返回所有匹配其中一个选择器的元素。
var matches = document.querySelectorAll("div.note, div.alert");
上面代码返回class属性是note或alert的div元素。
elementFromPoint()
elementFromPoint方法返回位于页面指定位置的元素。
var element = document.elementFromPoint(x, y);
上面代码中，elementFromPoint方法的参数x和y，分别是相对于当前窗口左上角的横坐标和纵坐标，单位是CSS像素。
elementFromPoint方法返回位于这个位置的DOM元素，如果该元素不可返回（比如文本框的滚动条），则返回它的父元素（比如文本框）。如果坐标值无意义（比如负值），则返回null。

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

可以通过createElement()方法创建新的HTML元素节点；通过setAttribute()方法设置元素属性。
var newDiv=document.createElement('div'); newDiv.setArrribute('class','wrap');

元素的添加、删除？

<body>
  <h1>What to buy</h1>
  <p>Don't forget to buy this stuff.</p>
  <ul id="purchases">
    <li>A tin of beans</li>
    <li class="sale">Cheese</li>
    <li class="sale important">Milk</li>
  </ul>
  <script type="text/javascript">
    var newLi = document.createElement('li');             // 创建新的 li 元素节点
    var oldLi = document.querySelector('.important');     // 获取需要删除的元素节点
    var newContent = document.createTextNode('Apple')     // 创建新的内容节点
    var ul = document.getElementById('purchases');        // 获取需要添加位置的父元素节点
    ul.removeChild(oldLi);                                // 从父节点上删除子节点
    newLi.appendChild(newContent);                        // 将内容节点添加到新的 li 节点上
    newLi.setAttribute('class','sale');                   // 给新的 li 节点添加 class 属性
    ul.appendChild(newLi);                                // 将 newLi 添加到 HTML 内
  </script>
</body>

DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
DOM0事件是将时间作为元素的一个属性，当需要对事件进行监听时，只要将需要执行的函数赋值给这个属性即可，需要删除该事件监听是只需将该属性的值改为null即可；该方法操作直观简便，兼容性最好，但一个事件只能绑定一个函数。

// HTML
var btn = document.querySelector('#btn');
// JS
btn.onclick = function() {
  console.log('DOM0');
}

DOM2级事件是使用元素的addEventListener和removeEventListener方法对事件进行监听，事件类型和处理函数做为上述方法的参数，其中addEventListener方法只能通过removeEventListener取消。该方法可以为一个事件绑定多个函数。

// HTML
var btn = document.querySelector('#btn');
// JS
btn.addEventListener('click', function(){
  console.log('DOM2');
})

attachEvent与addEventListener的区别？

addEventListener对IE8 及之前的版本不兼容，只能用attachEvent对事件进行监听，同时，监听事件的取消也只能用detachEvent实现而不能使用removeEventListener。

attachEvent添加的事件处理程序只能发生在事件冒泡过程中，而addEventListener的第三个参数可以决定事件处理程序是在捕获阶段还是在冒泡阶段处理，一般浏览器默认发生在冒泡阶段（即第三个参数默认为false）；
addEventListener方法第一个参数是事件类型（如click、load），而attachEvent的第一个参数是事件名称（如onclick、onload）；
二者事件处理程序的作用域不同。addEventListener事件的作用域是元素本身，而attachEvent的事件处理程序会在全局作用域内运行；
为一个事件添加多个事件处理程序时，执行顺序不同。addEventListener会按照处理程序添加的顺序执行，而attachEvent执行多个事件处理程序的顺序没有规律。

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

IE事件冒泡机制中事件最开始是由最具体的元素接收，逐层往上向其祖先元素进行传播，其祖先元素可以在此过程中接收事件并引发事件处理程序；

DOM2事件传播在根节点到事件发生的具体元素过程中提供了截取事件的机会，然后则是冒泡机制。

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

通过stopPropagation()方法可以阻止事件冒泡；
e.stopPropagation() IE e.cancelBubble = true;

通过preventDefault()可以阻止默认事件。
e.preventDefault() IE e.returnValue = false;

代码

有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
//todo ...
</script>

补全代码，要求：
- 当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在<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>
//todo ...
</script>

补全代码，要求：当鼠标放置在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>
//todo ...
</script>

实现如下图Tab切换的功能

实现下图的模态框功能

代码预览:
代码1
代码2
代码3
代码4
代码5

              本文版权归作者饥人谷_Josh和饥人谷所有，转载请注明来源

Dom、事件

问答

代码

猜你喜欢

热点阅读