DOM初探（1）——基本操作

最新推荐文章于 2022-08-01 20:27:49 发布

H_Cisco

最新推荐文章于 2022-08-01 20:27:49 发布

阅读量8k

点赞数 3

分类专栏： JavaScript基础

本文链接：https://blog.csdn.net/hdq1745/article/details/86492970

版权

JavaScript 同时被 2 个专栏收录

80 篇文章 2 订阅

订阅专栏

JavaScript基础

77 篇文章 6 订阅

订阅专栏

视频：https://ke.qq.com/course/231577?taid=3983676656552089

DOM

DOM（document object model）
DOM定义了表示和修改文档所需的方法。DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合。也用人称DOM是对HTML以及XML的标准编程接口。

补充：

什么东西都操作不了CSS！！(只是改变不了CSS样式表，但是可以给某个元素添加行间样式——通过操作HTML间接的操作css)

HTML和XML本质上是一个东西，但是，他俩也有很大的区别：

XML是HTML最早期的一个版本，XML里面的标签可以是自定义的，这是他俩最大的区别。

DOM的基本操作：

对节点的增删改查

查看元素节点

document代表整个文档

document.getElementById()//元素id在IE8以上的浏览器，不区分id大小写，而且返回匹配name属性的元素

document.getElementsByTagName()//标签名

document.getElementsByName()//需注意，只有部分标签name可生效(表单，表格元素，img，iframe)

document.getElementsByClassName()//类名->IE8和以上的IE版本中没有，可以多个class一起

document.querySelector()//css选择器，在IE7及以下的版本中没有

document.querySelectorAll()//css选择器在IE7及以下的版本中没有

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>abraham</title>
    </head>
    <body>
        <div></div>
        <script type="text/javascript">
            //DOM 对象
            var div = document.getElementsByTagName('div')[0];
            div.style.width = "100px";
            div.style.height = "100px";
            div.style.backgroundColor = "red";
            // div.onclick = function(){
            //  this.style.backgroundColor = "green";
            //  this.style.borderRadius = "50%";
            // }

            //红--绿--红..
            var count = 0;
            div.onclick = function () {
                count ++;
                if(count % 2 == 1){
                    this.style.backgroundColor = "green";
                }else{
                    this.style.backgroundColor = "red";
                }
            }
        </script>
    </body>
</html>