javascript的dom操作

javascript的dom操作

全面的为大家介绍javascript的dom操作的内容，具体详情如下：

1、DOM介绍

概念

Document Object Model ，文档对象模型

将标记语言的各个组成部分封装为对应的对象：

• Document：整个文档对象
• Element：元素对象
• Attribute：属性对象
• Text：文本对象
• Comment：注释对象

JavaScript 通过 DOM，就能够对 HTML 进行操作：

• 改变 HTML 元素的内容
• 改变 HTML 元素的样式（CSS）
• 对 HTML DOM 事件作出反应
• 添加和删除 HTML 元素

2、DOM：获取 Element 对象

HTML 中的 Element 对象可以通过 Document 对象获取，而 Document 对象是通过 window 对象获取的。

Document对象中提供了以下获取Element元素对象的函数:

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

<img id="light" src="img/off.gif"> <br>
<script>
    document.getElementById("light").src = "img/on.gif";
</script>

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

<div>不念</div>   <br>
<div>不想努力了</div> <br>
<script>
    // getElementsByTagName：根据标签名称获取元素数组
    // innerHTML：表示修改标签元素中的内容
    let htmlDivElement = document.getElementsByTagName("div");
    for (let element of htmlDivElement){
        element.innerHTML = "哈哈";
    }
</script>

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

<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<script>
 let elementsByName = document.getElementsByName("hobby");
 for (let hobbyElement of elementsByName) {
     hobbyElement.checked = true;
 }
</script>

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

<div>Java</div><br>
<div>PHP</div><br>
<script>
    let elementsByClassName = document.getElementsByClassName("cls");
    for (let ClassNameElement of elementsByClassName) {
        ClassNameElement.innerHTML = "嘻嘻";
    }
</script>

3、DOM：事件监听

3.1、事件介绍

什么是事件

用户可以对网页的元素有各种不同的操作如：单击，双击，鼠标移动等这些操作就称为事件。

事件通常与函数配合使用，这样就可以通过发生的事件来驱动 JavaScript 函数执行。

3.2、常见事件