【JavaWeb】Day10.JavaScriptDOM对象

DOM( 文档对象模型)

DOM 是一项 W3C (World Wide Web Consortium) 标准。DOM 定义了访问文档的标准：“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：

• Core DOM - 所有文档类型的标准模型

1. Document：整个文档对象
2. Element：元素对象
3. Attribute：属性对象
4. Text：文本对象
5. Comment：注释对象

• XML DOM - XML 文档的标准模型
• HTML DOM - HTML 文档的标准模型

HTML DOM

HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：

• 作为对象的 HTML 元素
• 所有 HTML 元素的属性
• 访问所有 HTML 元素的方法
• 所有 HTML 元素的事件

换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

获取Element元素

• HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。
• Document对象中提供了以下获取Element元素对象的函数：

根据id属性值获取，返回单个Element对象

var h1 = document.getElementById('h1');

 

表示成功获取element元素。 

根据标签名称获取，返回Element对象数组

var divs = document.getElementsByTagName('div');

注意dive标签有两个，所以会返回两次结果。 

根据name属性值获取，返回Element对象数组

var hobbys = document.getElementsByName('hobby');

 注意name属性有三个，所以会返回三次结果。 

根据class属性值获取，返回Element对象数组

var clss = document.getElementsByClassName('cls');

 

注意class属性有两个，所以会返回两次结果。 

 接下来只需要参考DOM文档手册（w3school 在线教程）找到对应的属性和方法进行更改。例如，将上面的dive标签中的class属性换为小写csdn。

 var divs = document.getElementsByClassName('cls');
    var div1 = divs[0];
    
    div1.innerHTML = "csdn";