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://myzitong.com/article/giojeh.html