JavaScript-DOM对象

一、DOM对象

1.1 DOM对象

什么是DOM对象？

document object model 文档对象模型

文档： html文档

模型： DOM树

DOM对象可以干什么？

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

1.2 获取html的标签元素

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

document.getElementById(id属性值)

<a href="#" id="test1">百度1</a>
<script>
// 通过id的方式获取dom元素
var obj = document.getElementById('test1')
</script>

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

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

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

document.getElementsByClassName(类名)

<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属性名=值

<script>
// 修改样式   dom对象.style.css属性名称 = 值
obj.style.color='red'
</script>

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

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

<script>
var obj2 = document.getElementById('test2')
 obj2.className +=' yushe'
</script>    

1.4 内容

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

dom对象.innerHTML

dom对象.innerText

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

dom对象.value

1.5 属性

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

 <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(标签属性的名称,值)

<script>
// 设置属性值
 conObj.setAttribute('name','new')
</script>

设置图片的路径

dom对象.src

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

dom对象.checked = true // 选中