1.5 JavaScript_DOM

DOM_概述

• 概念： Document Object Model 文档对象模型

  • 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作

• W3C DOM 标准被分为 3 个不同的部分：

  • 核心 DOM - 针对任何结构化文档的标准模型

    • Node：节点对象，其他5个的父对象

      • Document：文档对象

      • Element：元素对象

      • Attribute：属性对象

      • Text：文本对象

      • Comment:注释对象

  • XML DOM - 针对 XML 文档的标准模型

  • HTML DOM - 针对 HTML 文档的标准模型

 

DOM_Document对象_获取Element方法

• 核心DOM模型：Document：文档对象

  • 创建：在html dom模型中可以使用window对象来获取

    • window.document

• 获取Element对象常用方法

getElementById()	根据id属性值获取元素对象。id属性值一般唯一
getElementsByTagName()	根据元素名称获取元素对象们。返回值是一个数组
getElementsByClassName()	根据Class属性值获取元素对象们。返回值是一个数组
getElementsByName()	根据name属性值获取元素对象们。返回值是一个数组

• 示例代码

 

DOM_Document对象_创建DOM对象

创建其他对象方法

• createAttribute(name)

• createComment()

• createElement()

• createTextNode()

DOM_Element对象

• 获取/创建：通过document来获取和创建

• 常用方法

  • removeAttribute()：删除属性

  • setAttribute()：设置属性

• 示例代码

    打我呀！！
    
    

DOM_Node对象

• 概念：节点对象，其他5个的父对象，所有dom对象都可以被认为是一个节点

• 常用方法

  • appendChild()：向节点的子节点列表的结尾添加新的子节点。

  • removeChild()：删除（并返回）当前节点的指定子节点。

  • replaceChild()：用新节点替换一个子节点。

• 属性：parentNode 返回节点的父节点

• 示例代码

    

    

        
div2
        div1
    
    删除子节点
    增加子节点

 

案例4-动态表格

• 实现代码

    
    

    





    
    
    
    




    
学生信息表
    

        
编号
        
姓名
        
性别
        
操作
    

    

        
1
        
令狐冲
        
男
        
删除
    

    

        
2
        
任我行
        
男
        
删除
    

    

        
3
        
岳不群
        
?
        
删除
    

HTMLDOM_innerHTML

• 标签体的内容设置和获取：innerHTML

• 示例代码

HTMLDOM_样式控制

控制元素样式两种方式

• 使用元素的style属性来设置

//修改样式方式1
div1.style.border = "1px solid red";
div1.style.width = "200px";
//font-size--> fontSize
div1.style.fontSize = "20px";

•  提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。

var id2 = document.getElementById("div2");
        id2.onclick = function () {
            id2.className = "name";
        }