阿坝州网站建设公司

JavaScript学习笔记（三）

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

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

1、DOM

DOM:Document Object Model

JavaScript学习笔记（三）

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：父节点

案例：




    
    Title

也可以通过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：插入兄弟节点




    
    Title
    


    
  • 关羽
    • 
    
  • 曹操
    • 
    
  • 狂铁
    •

    案例3：

    


    
    Title
    


    
    
    
      
        
    • 关羽
      • 
        
    • 盾山
      •

    1.2.3、删除和替换操作

    removeChild:删除某个子节点

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

    


    
    Title

    1.3、练习

    1.3.1、隔行变色

    高亮显示

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

    


    
    
    


全选 反选
    

    
关羽
    
曹操
    
貂蝉

    1.3.3、动态编写一个表格

    JavaScript学习笔记（三）

    案例实现：

    


    
    Title

    总结：

    table对象：

    ​ rows属性

    ​ insertRow():插入一行

    ​ deleteRow():删除一行

    tableRow对象：行对象

    ​ cells：单元格对象

    ​ rowIndex:行号

    ​ insertCell():插入单元格

    ​ deleteCell():删除单元格

    TableCell对象：每个单元格

    ​ cellIndex:单元格的索引


    分享题目：JavaScript学习笔记（三）
    本文链接：http://azwzsj.com/article/giojeh.html

    其他资讯