DOM2-document操作

document对象操作

目的:找到文档元素后赋给变量,对变量进行操作。

一.找到元素

<div id="a">这是元素111</div>

<div class="b">这是元素222</div>

<div >这是元素333</div>

<input type="button" value="按钮" name="c"/>

1.通过ID找元素:document.getElementById("a")

2.通过class找元素:document.getElementsByClassName("b")

3.通过标签找元素:document.getElementsByTagName("div")

4.通过表单找元素:document.getElementsByName("c") 

表单也可以通过前三种方法找元素,除了ID外其他方法都是通过返回数组找索引号获取元素的。

二.操作

分为三类:操作内容,操作属性,操作样式。第一步都要先找到元素并赋值给一个变量。

var m=document.getElementById("a")

1.操作内容:

获取内容:m.innerText

修改内容:m.innerText="要修改的内容"

获取内容(含标签):m.innerHTML

修改内容(含标签):m.innerHTML="<b>通过标签要修改的内容</b>"

修改表单内容可以直接通过修改value值改变。

2.操作属性:

获取属性:m.getAttribute(" ") 引号里为属性名。

修改属性:m.setAttribute(" "),(" ") 一个引号里为属性名,第二个引号里为属性值。

删除属性:m.removeAttribute(" ")

3.操作样式:

获取样式:m.style.样式名 (只能操作内联)

修改样式:m.style.样式名="样式属性"

原文地址:https://www.cnblogs.com/wyc1991/p/8686273.html