DOM对象

1.1 DOM对象

什么是DOM对象？ 

document   object   model    文档对象模型​ 

文档： html文档​ 

模型： DOM树

DOM对象可以干什么？​

可以操作html标签的内容、属性、样式

1.2 获取html的标签元素​

a. 通过标签的id属性值来获取元素 

document.getElementById(id属性值)

```html

< a href=" " id="test1">百度1</ a>

<script>

// 通过id的方式获取dom元素

var obj =

document.getElementById('test1')

</script>```

**注意：** 在同一个html文档中id的值不能重复​   

如果id值重复了，谁先出现就获取谁

b. 通过标签的类名来获取元素

document.getElementsByClassName(类名)

```html

< a href="#" class="demo">百度2</ a>

<span class="demo">span标签</span>

<script>

// 通过class(类名的方式)获取dom元素

var obj1 =

document.getElementsByClassName('demo')

</script>```

**注意：**获取到的是一个html元素集合

c. 通过标签名称获取元素**  

document.getElementByTagName(标签名)

d. 通过标签的name属性来获取元素

document.getElementByName(name属性值)

1.3 样式修改的对象

语法：** dom对象.style.css属性名=值

```html

<script>

// 修改样式   dom对象.style.css属性名称 = 值

obj.style.color='red'

</script>```

**注意：**一次只能修改一个属性值，适用于修改少量样式的时候​  

如果需要修改的样式比较多，不建议使用这种方法去修改，推荐使用设置类名的方式去修改

```html

<script>

var obj2 =

document.getElementById('test2') obj2.className +=' yushe'

</script>   

```

1.4  内容

​ a. 普通标签设置内容和获取内容

dom对象.innerHTML​    

dom对象.innerText​

b. 标签标签的内容设置和获取

dom对象.value

1.5 属性​  

dom对象.getAttribute(标签属性的名称)

```html

<div id="con" name="mydiv">上课别<b>玩游戏</b></div>

<script>

// 通过id的方式来获取元素     

   var conObj =

document.getElementById('con');   

// 获取属性值       

var attr =

conObj.getAttribute('name')       

console.log(attr);

</script>

```​  

dom对象.setAttribute(标签属性的名称,值) 

```html

<script>

// 设置属性值

conObj.setAttribute('name','new')

</script>

```

设置图片的路径

dom对象.src

设置单选按钮和复选框选中

dom对象.checked = true   // 选中