JavaScript学习笔记（三）

本课程对应的视频地址：http://edu.51cto.com/course/15019.html

创新互联建站专业为企业提供善右网站建设、善右做网站、善右网站设计、善右网站制作等企业网站建设、网页设计与制作、善右企业网站模板建站服务，十余年善右做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

1、DOM

DOM:Document Object Model

1.1、W3C规定的三类DOM标准接口

Core DOM（核心DOM），适用于各种结构化文档

XML DOM，专用于XML文档

HTML DOM，专用于HTML文档（了解）

1.2、Core DOM

1.2.1、查找dom

document.getElementById("id"):根据id元素来查找某个对象

document.getElementsByTagName("tag"):根据标签来获取元素-->数组

document.getElementsByName("name"):根据name来获取元素-->数组

nextElementSibling:下一个元素节点
previousElementSibling：上一个元素节点
childNode：子节点（包含文本节点）
children:子元素节点
childElementCount：子元素的数量
lastElementChild:最后一个元素节点
firstElementChild:第一个元素节点
firstChild：第一个节点
lastChild:最后一个节点
nodeType:节点的类型
    元素节点：1
    属性节点：2
    文本节点：3
parentNode：父节点

案例：

也可以通过setAttribute(attr,value)设置对象的属性

imgObject.setAttribute("src","../images/2.jpg");
imgObject.setAttribute("onclick","myFun()");

那么如果想获取属性的值，就可以通过getAttribute（"name"）来获取

如果我们想对对象加样式,通过object.style属性操作

1.2.2、dom的创建相关操作

案例：

与dom相关操作有哪些呢？

createElement：创建一个元素节点

appendChild：将这个元素加入某个元素内部

insertBefore（在某个节点前面插入新的节点）：parentElement.insertBefore(newNode,thisNode)

cloneNode:克隆,有一个参数，默认是false，当为true表示深克隆（连同子节点一起克隆）

案例2：插入兄弟节点

    
    
    


    
关羽
    
曹操
    
狂铁

案例3：

    
    
    


    
    
    

        
关羽
        
盾山
    
    

1.2.3、删除和替换操作

removeChild:删除某个子节点

replaceChild（new,old）:新的替换旧的节点

1.3、练习

1.3.1、隔行变色

高亮显示

1.3.2、实现全选，反选等效果

    
    
    


全选 反选


关羽

曹操

貂蝉

1.3.3、动态编写一个表格

案例实现：

总结：

table对象：

​ rows属性

​ insertRow():插入一行

​ deleteRow():删除一行

tableRow对象：行对象

​ cells：单元格对象

​ rowIndex:行号

​ insertCell():插入单元格

​ deleteCell():删除单元格

TableCell对象：每个单元格

​ cellIndex:单元格的索引