什么是DOM对象?
document object model 文档对象模型
文档: html文档
模型: DOM树
DOM对象可以干什么?
可以操作html标签的内容、属性、样式
获取html的标签元素
a. 通过标签的id属性值来获取元素
document.getElementById(id属性值)
<script>
<a href="#" id="test1">百度1</a>
<script>
// 通过id的方式获取dom元素
var obj = document.getElementById('test1')
</script>
注意: 在同一个html文档中id的值不能重复
如果id值重复了,谁先出现就获取谁
b. 通过标签的类名来获取元素
document.getElementsByClassName(类名)
<script>
<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属性值)
样式修改的对象
语法: dom对象.style.css属性名=值
<script>
// 修改样式 dom对象.style.css属性名称 = 值
obj.style.color='red'
</script>
注意:一次只能修改一个属性值,适用于修改少量样式的时候
如果需要修改的样式比较多,不建议使用这种方法去修改,推荐使用设置类名的方式去修改
<script>
var obj2 = document.getElementById('test2')
obj2.className +=' yushe'
</script>
内容
a. 普通标签设置内容和获取内容
dom对象.innerHTML
dom对象.innerText
b. 标签标签的内容设置和获取
dom对象.value
属性
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 // 选中