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