JS的Dom与事件小结

这次给大家带来JS的Dom与事件小结，JS的Dom与事件小结留意事项是什么，下面就是实战案例，一起来看一下。

dom对象的innerText和innerHTML有什么不同？

innerHTML指的是从对象的起始位置到终止位置的全部内容,包罗Html标签。
innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。

elem.children和elem.childNodes的不同？

Node(节点)是DOM层次构造中的任何类型的对象的通用名称，Node有许多类型，如元素节点，属性节点，文本节点，注释节点等。Element继承了Node类，也就是说Element是Node多品种型中的一种，即当NodeType为1时Node即为ElementNode，别的Element扩展了Node，Element具有id、class、children等属性。children是Element的属性，childNodes是Node的属性。

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

常见的猎取元素的办法有3种，离别是通过元素ID、通过标签名字和通过类名字来猎取。
1.getElementById
DOM供给了一个名为getElementById的办法，这个办法将返回一个与之对应id属性的节点对象。
2.getElementsByTagName
该办法返回一个对象数组（准确的说是HTMLCollection汇合，它不是真正意义上的数组），每个对象离别对应着文档里有着给定标签的一个元素。相似于getElementById,一样，该办法只供给一个参数，它的参数是指定标签的名字。
3.getElementsByClassName
除了通过指定标签猎取元素外，DOM还供给了getElementsByClassName办法来猎取指定class名的元素。

怎样创立一个元素？怎样给元素设定属性？

1.createElement(name)创立元素节点
createElement()是Document对象中的办法，该办法会按照指定的元素名称name，返回一个Element对象。
2.设定创立元素节点的属性
创立元素后，我们大概需要设定元素属性，如：给元素设定CSS样式、增加点击事件等。设定元素属性可以使用Element对象的setAttribute办法，也可以使用属性名设定。
3.将元素节点插入到DOM文档的指定位置
元素创立后，需要将元素节点插入到DOM文档的指定位置，增加元素使用Element对象的appendChild()办法或insertBefore()办法。appendChild()
办法的作用是向元素增加新的子节点，被增加的子节点将作为其最后一个子节点。insertBefore()办法的作用是在已有的节点此前插入新节点，被增加的节点会做为同级节点。

元素的增加、删除？

元素的增加：使用createElement来增加元素
元素的删除：如需删除 HTML 元素，您必需第一获得该元素的父元素，然后用removeChild来删除对应元素。

DOM0 事件和DOM2级在事件监听使用方式上有什么不同？

DOM0事件：DOM0事件是指直接将事件绑定在节点上，一个节点只能绑定一个事件,不然后面的灰覆盖前面的。
var oBtn = document.querySelctor('#btn');
oBtn.onclick=function(){
console.log('a')
};
DOM2事件：DOM2级事件可以对一个元素绑定多个事件，后面的事件不会覆盖前面事件；可以通过参数true、false来设定事件在冒泡阶段或者捕捉阶段触发事件。使用removeEventListener来删除事件。
oBtn.addEventListener("click",function(){
});
oBtn.removeEventListener("click",fn,false);

attachEvent与addEventListener的不同？

1.addEventListener和attachEvent的兼容性问题
addEventListener是相符W3C标准的事件绑定办法，FireFox、Chrome、Safari都是用它来绑定事件。
attachEvent是IE私有的，不相符W3C标准，并且在IE下，只能使用它来绑定事件，addEventListener是无效的。
所以，要想绑定事件，必需处置兼容性问题。
2.addEventListener和attachEvent的语律例则
addEventListener共有3个参数：element.addEventListener(type,listener,useCapture)
attachEvent共有2个参数：element.attachEvent(type,listener);
3.代码兼容处置
function regEvent(ele, event_name, fun)
{
if (window.attachEvent)
ele.attachEvent(event_name, fun); //IE阅读器
else
{
event_name = event_name.replace(/^on/, “”); //假如on开头，删除on，如onclick->click
ele.addEventListener(event_name, fun, false); //非IE阅读器
}
}

说明IE事件冒泡和DOM2事件传播机制？

IE事件冒泡:事件发生在触发元素上，从触发元素开端，事件向父元素1级1级传递，直到html元素。
DOM2事件:事件传播分3个阶段，捕捉阶段，处于事件目标阶段，冒泡阶段。事件监听程序只能选中在捕捉阶段或者冒泡阶段其中的一个阶段施行。
捕捉阶段:事件发生时，先从根节点开端传递，1级1级向下寻，知道目标元素。
冒泡阶段:从触发元素开端，事件向父元素1级1级传递，直到html元素

怎样阻挠事件冒泡？ 怎样阻挠默许事件？

阻挠事件冒泡：w3c 的办法是 e.stopPropagation()，IE 则是使用 e.cancelBubble = true。
阻挠默许事件：w3c 的办法是 e.preventDefault()，IE 则是使用 e.returnValue = false。

问答

有如下代码，要求当点击每一个元素li时操纵台展现该元素的文本内容。不思考兼容

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

代码：

<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
//办法一
/*var item = document.getElementsByClassName("ct")[0].getElementsByTagName('li')
for(var i=0;i<item.length;i++){
item[i].addEventListener('click', function(){
console.log(this.innerText);
})
} */
//办法二
var item = document.getElementsByTagName('li')
for(var i=0;i<item.length;i++){
item[i].addEventListener('click', function(){
console.log(this.innerText);
})
}
</script>

补全代码，要求：

1.当点击按钮开头增加时在<i>这里是</li>元素前增加一个新元素，内容为会员输入的非空字符串；当点击结尾增加时在<li>前端6班</li>后增加会员输入的非空字符串.
2.当点击每一个元素li时操纵台展现该元素的文本内容。

<ul class="ct">
<li>这里是</li>
<li>555</li>
<li>666</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>666</li>
<li>555</li>
</ul>
<input class="ipt-add-content" placeholder="增加内容"/>
<button id="btn-add-start">开头增加</button>
<button id="btn-add-end">结尾增加</button>

<script>var ct = document.querySelector('.ct')var start = document.getElementById('btn-add-start');var end = document.getElementById('btn-add-end');var input = document.querySelector(".ipt-add-content");
     end.addEventListener('click',function(){            var list = document.createElement('li');        list.innerText = input.value        ct.appendChild(list);      })      start.addEventListener('click',function(){            var list = document.createElement('li');        list.innerText = input.value        ct.insertBefore(list,ct.firstChild);      })      ct.addEventListener('click', function(e){          if(e.target.tagName.toLowerCase() === 'li'){           console.log(e.target.innerText);          }      });     </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>

代码：

<ul class="ct"><li data-img="http://img5.imgtn.bdimg.com/it/u=3425851328,2681317699&fm=21&gp=0.jpg">鼠标放置查看图片1</li><li data-img="http://pic24.nipic.com/20121003/10754047_140022530392_2.jpg">鼠标放置查看图片2</li><li data-img="/uploads/allimg/200930/303952037bk326.jpg">鼠标放置查看图片3</li></ul><div class="img-preview"></div><script>var ct = document.querySelector('.ct')var list = document.getElementsByTagName('li')var preview = document.querySelector('.img-preview')for(var i=0;i<list.length;i++){list[i].addEventListener('mou搜索引擎优化ver',function(){if(document.querySelector('img')){preview.removeChild(document.querySelector('img'))console.log(1)}var item = document.createElement('img')var img = this.getAttribute('data-img')preview.appendChild(item)item.src=img;
    })      }    </script>

信赖看了本案牍例你已经把握了办法，更多出色请关注百分百源码网其它相关文章！

相关阅读：

怎样使用python来推断图片类似度

用来下载图片的javascript足本

以上就是JS的Dom与事件小结的具体内容，更多请关注百分百源码网其它相关文章！