任务二十二~Dom、事件

问答部分

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

• innerText~是一个可写属性，返回元素内包含的文本内容，在多层次的时候会按照由浅到深的顺序拼接其内容；当写入新内容时会覆盖掉其内部所有内容，此时输入的内容为文本格式，即使有HTML标签也会当成文本，如下代码

    123
    

        456
        789
    

输出结果如下图

innerText

• innerHTML~返回的是HTML的结构；当写入新内容时也会覆盖掉其内部内容，当有HTML标签时会当成HTML标签处理，如下代码

    123
    

        456
        789
    

输出结果如下图所示

innerHTML

---

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

• element.children~返回的只是所有元素节点的集合
• element.childNodes~返回的是包含当前节点所有子节点的集合，除HTML的元素节点外，还包括Text节点和Comment节点

    dddd
    

        
aaaa
    
    

        
bbbbb
    

2

---

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

• getElementById()~该方法返回匹配指定ID属性的元素节点，只能在document上使用，如果没有发现匹配的节点，则返回null，如下代码

    
paragraph one
            
    
paragraph two
 
      

getElementById

• getElementsByClassName()~通过指定类名来选择元素，返回一个类似数组的对象；该方法的参数，可以是多个空格分隔的class名字，返回同时具有这些节点的元素;该方法不仅可以在document上使用，也可以在任何元素节点上调用，如下代码

paragraph one

    paragraph two
    link

aaaaa

getElementsByClassName

• getElementsByTagName()~通过指定标签名来选择元素，返回一个类似数组的对象；该方法不仅可以在document对象上调用，也可以在任何元素节点上调用；注意，该方法会将参数转为小写后才进行搜索，如下代码

paragraph one

    paragraph two
    
paragraph three

paragraph three

getElementsByTagName

• querySelector()~返回匹配指定的css选择器的元素节点；如果有多个节点满足匹配条件，则返回第一个匹配的节点；如果没有发现匹配的节点，则返回null；注意：querySelector()无法选中CSS伪元素，如下代码

    
aaa
    
bbbb
    
bbbb
    
bbbb
    
bbbb

querySelector

• querySelectorAll()~返回匹配指定的css选择器的所有节点，返回的是NodeList类型的对象（NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中）

    
aaa
    
aaa
    
aaa
    
aaa
    
aaa
    
aaa
    

querySelectorAll

---

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

• createElement()~用来生成HTML元素节点，如下代码

var div = document.createElement("div");
var a = document.createElement("a");

• setAttribute()~用于设置元素属性，如下代码

//setAttribute("属性名","值");
var div_header = document.getElementById("header");
div_header.setAttribute("class","layout");

setAttribute()

---

五、元素的添加、删除？

• appendChild()~接受一个节点对象作为参数，将其作为最后一个子节点插入当前节点，如下代码

var div = document.createElement("div");
document.body.appendChild(div);

如果参数节点是DOM中已经存在的节点，appendChild()会将其从原来的位置移到新位置

• insertBefore()~用于将某个节点插入当前节点的指定位置，返回被插入的新节点；该方法接受两个参数：第一个参数是要插入的节点，第二个参数是当前节点的一个子节点，新的节点将插在这个节点的前面，如下代码

var ul = document.createElement("ul");
var li = document.createElement("li");
ul.insertBefore(li,ul.firstChild);

如果insertBefore方法的第二个参数为null，则新节点将插在当前节点的最后位置，即变成最后一个子节点；如果所要插入的节点是当前DOM现有的节点，则该节点将从原有的位置移除，插入新的位置

• removeChild()~接受一个子节点作为参数，用于从当前节点移除该子节点，返回被移除的子节点

var content = document.getElementById("content");
content.parentNode.removeChild(content);

---

六、DOM0 级事件处理程序和DOM2 级事件处理程序在事件监听时使用方式上有什么区别？

• DOM0 级事件处理程序通过JS制定事件处理程序的传统方法，将一个函数赋值给一个事件处理程序属性进行事件监听；DOM2 级事件处理程序是通过定义了addEventListener()和removeEventListener()来进行事件监听
• DOM0 级事件处理程序不能添加多个事件处理程序，而DOM2 级事件处理程序可以
• DOM0 级事件处理程序不能选择是在事件捕获阶段调用事件处理程序还是在冒泡阶段调用事件处理程序，而DOM2 级事件处理程序可以

    

       aaaa
   
   

以在chrome中为例，效果如下图

问答9

---

代码部分

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

    
这里是
    
饥人谷
    
前端6班

方法一~直接绑定在元素上，实现代码如下

    

        
这里是
        
饥人谷
        
前端6班
    
    

方法一

方法二~使用事件代理 ，实现代码如下

    

        
这里是
        
饥人谷
        
前端6班
    
    

方法二

---

二、补全代码，要求：

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

    

        
这里是
        
饥人谷
        
前端6班
    
    
    开头添加
    结尾添加
    

代码及展示链接，实现代码如下

        

            
这里是
            
饥人谷
            
前端6班
        
        
        开头添加
        结尾添加
        

代码2

---

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

        

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

        

代码及展示链接，实现代码如下

        

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

        

代码3

---

四、实现如下图Tab切换的功能

tab

代码及展示链接，实现代码如下

    
        
        
        
    
    
        

            
tab1
            
tab2
            
tab3
        
        
内容1
        
    

---

五、实现下图的模态框功能

dialog

代码及展示链接，实现代码如下

    
        
        
        
    
    
        点我
        

        

            

                
我是标题
                ×
            
            

                    
我是内容1
                    
我是内容2
                
                

                    确定
                    取消
                
        
        
    

版权声明：本教程版权归邓攀和饥人谷所有，转载须说明来源！！！！