DOM对象

DOM是文档对象模型

是一种可以操作HTML文档的重要手段，利用DOM可完成对HTML文档中所有元素的获取，访问，标签属性和样式的设置等操作

DOM HTML节点树

1.根节点：<html>标签是整个文档的根节点，有且仅有一个。

2.子节点：指的是某个节点的下级节点，

列如<head>和<body>节点是<HTML>节点的子节点

3.父节点：指的是某个节点的上级节点，类如，<HTML>元素则是<head>和<body>节点的父节点。

4.兄弟节点：两个节点共同属于一个父节点。

 

HTML元素操作

利用document对象的方法

方法 说明
document.getElementById() 返回对拥有id的第一个对象的引用
document.getElementsByName()

返回带有指定名称的的对象的集合
document.getElementByTagName() 返回带有指定标签名的对象集合
document.getElementByClassName() 返回带有指定类名的对象集合（IE6~8）

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改css样式</title>
    <style>
        #div1{
            width: 500px;
        /*行内权值1000*/
        }

    </style>
</head>
<body>
<div id="div1" class="divC"></div>
<div>帅帅</div>
</body>
</html>
<script>
 //获取dom    常见有三种样式
 // 根据标签
 var divT=document.getElementsByTagName('div')
 console.log('divT')
 divT[1].style.color='lightpink'

 
 // 根据class     // [document.getElementsByClassName('divC')]
 var divC=document.getElementsByClassName('divC')
 console.log(divC)
 divC[0].style.height='300px'


 // 根据id        document.getElementById('div1')     console.log( document.getElementById('div1'))
 // document.getElementById('div1').style.width='300px'
 var div1=document.getElementById('div1')
 console.log(div1)
 div1.style.width='300px'



</script>

看主要获取Dom的三种方式

1.根据标签

 var divT=document.getElementsByTagName('div')
 console.log('divT')
 divT[1].style.color='lightpink'

　　首先

TagName为div

我们在div中的文字就会变色

效果如下

 

然后

2.根据class

 var divC=document.getElementsByClassName('divC')
 console.log(divC)
 divC[0].style.height='300px'

　　根据class我们就调用了divc

效果如下把他的高度设置为了300px

 3.根据id 

 

 var div1=document.getElementById('div1')
 console.log(div1)
 div1.style.width='300px'

　　

这样我们根据id获取到了div1

设置它的宽度300px

效果如上图所示

posted @ 2021-12-22 19:00  doudou帅  阅读(106)  评论(0)    收藏  举报