Dom、事件

问题

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

innerText：
当使用innerText读取值时，如果有HTML标签，它会过滤掉HTML标签，并且按照由浅入深的顺序将所有的文本拼接起来。
当使用innerText写入值时，结果会删除dom对象的所有子节点，插入包含的相应文本值的文本节点。如果有HTML标签，它会对HTML语法字符（小于号、大于号、引号及和号等）进行编码，使HTML标签以正常的文本形式出现在dom对象中。
举例：


    
        This is a test paragraph
        
            1
            2
            3

而elem.children只会返回节点的元素子节点，除此之外，与elem.childNodes没什么区别。
举例：

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

querySelector 方法接受一个CSS选择器作为参数，返回匹配该选择器的元素节点。
如果有多个节点满足匹配条件，则返回第一个匹配的节点。
如果没有发现匹配的节点，则返回null。
该方法在HTML文档上和HTML元素上都能调用。

querySelectorAll 方法与querySelector用法类似。
区别是返回一个静态的NodeList对象（NodeList 本质上是一个动态的 Node 集合，只是规范中对 querySelectorAll 有明确要求，规定其必须返回一个静态的 NodeList 对象），包含所有匹配给定的选择器的节点。
该方法在HTML文档上和HTML元素上都能调用。
getElementById 方法返回匹配指定的id属性的元素节点。
如果没有发现匹配的节点，则返回null。
该方法只能在HTML文档上调用，不能在HTML元素上调用。
getElementsByTagName 方法接受一个元素的标签名为参数，返回一个实时的NodeList对象，包含所有匹配的子节点。
该方法在HTML文档上和HTML元素上都能调用。
特殊的是，在HTML文档中，也就是使用document.getElementsByTagName时，会返回一个HTMLCollection对象（与NodeList很像），这是一个“动态”的合集，可以实时反映 HTML文档的变化。
getElementsByClassName方法类似getElementsByTagName，只不过它接受的参数为元素的class属性值组成的字符串。
如果参数是一个空格分隔的字符串，元素的class必须符合所有的字符串之中的class才能匹配。

刚开始接触HTMLCollection和NodeList时，对它们之间关系挺莫名其妙的，后来查阅了下资料才稍微有些明白。
具体可以参考这个回答：NodeList 和 HTMLCollection之间的关系？
简单来说就是由于历史原因，DOM规范分为2个部分：Core（最基础的XML解析说明）和HTML（HTML的特有API解析说明）。而NodeList是属于Core的，HTMLCollection 是属于HTML的。
它们返回的都是实时的Node合集，并且可以Node[取索引]来返回子节点。
不同的是NodeList是node节点集合（即包含元素节点，文档节点和注释节点等12种节点类型），而HTMLCollection只包含元素节点集合，所以在HTML文档中，getByElement系列都是HTMLCollection集合。
而有的书上说这些查询元素的方法都是NodeList集合，有的说是HTMLCollection合集，看起来很矛盾，其实是讨论的使用环境不一样罢了。
另外动态集合虽然很实用，但是在循环它们的时候要特别小心，不要因为忽略了实时变化而造成死循环。
参考：深入理解javascript中的动态集合——NodeList、HTMLCollection和NamedNodeMap

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

document.createElement()方法可以创建新的元素节点，这个方法只接受一个参数，就是创建元素的标签名。
document.createTextNode()方法可以用来创建新的文本节点，这个方法方法值接受一个参数，就是要插入节点的文本。
setAttribute()用来给元素设置属性，这个方法接收2个参数，需要设置的属性名和属性值。
举例：

运行结果

5.元素的添加、删除。

元素的添加：
appendChild()方法，让指定元素成为某个现有元素的最后一个子元素。
用语法表示：parent.appendChild(child);
举例：

运行结果

insertBefore()方法；让指定的元素插入到某个现有元素的前面。调用此方法，必须告诉它三件事：
1.新元素：你想插入的元素（newElement）
2.目标元素：你想把这个新元素插入到哪个元素（targetElement）之前。
3.父元素：目标元素的父元素（parentElement）
下面是该方法的调用语法：parentElment.insertBefore(newElement,targetElement)
举例：

运行结果

元素的删除：
removeChild()方法：删除某个元素，不过要注意的是，该方法不是在待删除的元素上调用，而是在其父元素上调用。
用语法表示就是：parent,removerChild(child).
举例：

运行结果

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

DOM0级事件就是将一个函数赋值给一个事件处理程序属性。
这些属性通常都是小写，例如onclick，来看一个例子:

运行结果

使用DOM0 级方法指定的事件处理程序被认为是元素的方法，因此，这个时候的事件处理程序是在元素的作用域中运行，换句话说，程序中的this引用当前元素，所以，上述例子点击按钮后显示的是元素的ID。
另外如果要删除DOM0 级事件处理程序，只要将事件处理程序设置为null即可。

DOM2 级定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removerEventListerner(）。
所有DOM节点都包含这两个方法，并且都接受3个参数：
1.要处理的事件名
2.作为事件处理程序的函数
3.一个布尔值，布尔值如果是true，表示在捕获阶段调用事件处理程序，如果是flase，表示在冒泡阶段调用事件处理程序。

看例子：

运行结果

与DOM0 级的区别在于，使用DOM2 级方法可以添加多个事件处理程序。

另外，通过addEventListener()添加的事件只能通过removeEventListener()来删除，删除时传入的参数与添加时相同，这也就意味着添加的匿名函数是无法删除的。

7.attachEvent与addEventListener的区别？

1.接受的参数：
attachEvent接受2个参数：事件名称，事件处理函数，只支持事件冒泡。
addEventListener接受3个参数：事件名称，事件处理函数，布尔值

2.事件名称：
attachEvent事件名称前面要加“on”，如“onclick”，
addEventListener不需要，如“click”。

3.作用域：
attachEvent会在全局作用域中运行，即this = window。
addEventListener是在元素作用域中运行，this指的是当前元素。

4.事件处理程序的顺序：
addEventListener是按照添加顺序执行。
attachEvent是按照添加顺序相反执行。

5.删除方法：
attachEvent使用detachEvent删除添加事件。
addEventListener使用removeEventListener删除添加事件。

6.兼容：
IE8以及IE8以下只支持attachEvent，
IE9开始支持addEventListener。

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

IE事件冒泡：指的是IE的事件流，事件开始时由最具体的元素（文档嵌套层次最深的那个节点）接受，然后逐渐向上传播到较为不具体的节点（文档）
DOM2的事件传播机制：指的是DOM2级事件的事件流，包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标收到事件。最后一个是冒泡阶段，事件作出相应。

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

stopPropagation()方法可以阻止事件冒泡，如果bubbles（表明事件是否冒泡）为ture，则可以使用这个方法。
举例：

运行结果

preventDefault()方法可以阻止默认事件，如果cancelable（表明是否可取消事件的默认行为）为ture，则可以使用这个方法。
举例：


    
        点击我

运行结果

代码

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


    这里是
    饥人谷
    前端6班

解答代码：
方法一，循环子元素：




    
    任务1



    这里是
    饥人谷
    任务6班

代码1-方法1效果预览
方法二，事件代理：




    
    任务1



    这里是
    饥人谷
    任务6班

代码1-方法2效果预览

2.补全代码，要求：

1.当点击按钮开头添加时在

这里是

元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在前端6班后添加用户输入的非空字符串.
2.当点击每一个元素li时，控制台展示该元素的文本内容。


    这里是
    饥人谷
    前端6班

解决代码：




    
    任务2



    这里是
    饥人谷
    前端6班

代码2效果预览

3.补全代码，要求：当鼠标放置在`li`元素上，会在img-preview里展示当前`li`元素的date-img对应的图片。


    鼠标放置查看图片1
    鼠标放置查看图片2
    鼠标放置查看图片3

解决代码：




    
    任务2



    鼠标放置查看图片1
    鼠标放置查看图片2
    鼠标放置查看图片3

代码3-方法1效果预览
代码3-方法2效果预览
4.实现如下图Tab切换的功能
解决代码：

代码4效果预览

5.实现下图的模态框功能

方法1，直接修改显示效果

代码5-方法1效果预览
方法2，通过添加和删除类名来改变显示效果

代码5-方法2效果预览

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

Dom、事件

问题

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

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

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

5.元素的添加、删除。

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

7.attachEvent与addEventListener的区别？

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

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

代码

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

2.补全代码，要求：

3.补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的date-img对应的图片。

5.实现下图的模态框功能

我是标题3

我是标题3

你可能感兴趣的:(Dom、事件)

3.补全代码，要求：当鼠标放置在`li`元素上，会在img-preview里展示当前`li`元素的date-img对应的图片。