DOM模型

最新推荐文章于 2024-07-04 16:37:43 发布

坦然的橘子

最新推荐文章于 2024-07-04 16:37:43 发布

阅读量644

点赞数 25

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/2301_79542525/article/details/137744497

版权

操作DOM

获取DOM对象常用方法

1.getElementById() 通过元素的ID属性获取DOM对象，获取的是⼀个DOM对象。

2.getElementsByTagName() 通过元素的标签名获取DOM对象，获取的是⼀组DOM对象。

3.getElementsByClassName() 通过元素的class属性获取DOM对象，获取的是⼀组DOM对象。

4.getElementsByName() 通过元素的name属性获取DOM对象，获取的是⼀组DOM对象。

1.innerHTML属性：用于设置或获取HTML 元素中的内容。

2.innerText属性：用于设置或获取HTML 元素中的纯文本。

3.className属性：用于设置或获取DOM对象的类样式

4.style属性：用于设置或获取DOM对象的style样式

遍历DOM数组

window对象下的document对象就是DOM模型。 DOM描绘了⼀个层次化的节点树，每⼀个节点就是⼀

个html标签，⽽且每⼀个节点也是⼀个DOM对象。

其实和html平级的还有一个head标签

标签分为两种：

单标签：无法放入文本

双标签：可以放入文本

操作DOM

获取DOM对象常用方法

1.getElementById() 通过元素的ID属性获取DOM对象，获取的是⼀个DOM对象。

<div id="one"></div>
<script>
    //获取DOM对象
    //方法一
    let divObj = document.getElementById('one');//获取的为一个对象，因为id具有唯一性
    console.log(divObj);//输出结果:<div id="one"></div>
    divObj.innerHTML = 'hello world'//给该DOM对象的内部添加一段HTML代码
    console.log(divObj);//输出结果:<div id="one">hello world</div>
</script>

2.getElementsByTagName() 通过元素的标签名获取DOM对象，获取的是⼀组DOM对象。

注意：通过getElementsByTagName()获得的是一个数组

<div id="one"></div>
<div></div>
<div></div>
<script>
    //获取DOM对象
    //方法二
    let divArr = document.getElementsByTagName('div');
    //这里通过标签名获取，因为标签名不唯一，所以divArr是一个数组
    console.log(divArr.length);
    console.log(divArr);
    //通过innerHTML可以让js真正运行时，div中加入相应的文本
    for (let i = 0; i < divArr.length; i++)
    {
        divArr[i].innerHTML = i;
    }
</script>

举例

<div></div>
<div>
    <div></div>
</div>
<div></div>
<script>
    //获取DOM对象
    let divArr = document.getElementsByTagName('div');
    //这里通过标签名获取，因为标签名不唯一，所以divArr是一个数组
    console.log(divArr.length);
    console.log(divArr);
    //通过innerHTML可以让js真正运行时，div中加入相应的文本
    for (let i = 0; i < divArr.length; i++)
    {
        divArr[i].innerHTML = i;
    }
</script>

代码的运行结果和本方法的第一个代码块运行结果相同

原因：

通过InnerHTML对双标签的两个标签添加内容，会将原本的内容(div标签)覆盖

3.getElementsByClassName() 通过元素的class属性获取DOM对象，获取的是⼀组DOM对象。

<script>
    let divArr = document.getElementsByClassName('one');
    //因为class标签不唯一，所以获取的对象为数组
</script>

4.getElementsByName() 通过元素的name属性获取DOM对象，获取的是⼀组DOM对象。

<script>
    let divArr = document.getElementsByName('one');
    //因为name标签不唯一，所以获取的对象为数组
</script>

其他获取DOM对象的方法

document.documentElement 获取html对象
document.body 获取body对象
document.querySelector() 通过选择器获取⼀个DOM对象

若有多个选择，则默认选择第一个
document.querySelectorAll() 通过选择器获取⼀组DOM对象

<div>
   <p>这是⼀个p标签</p>
   <p>这是⼀个p标签</p>
</div>
<script>
   let htmlObj = document.documentElement;
   htmlObj.style.backgroundColor = 'red';       //设置html背景⾊
   let bodyObj = document.body;
   bodyObj.style.fontSize = '36px';             //设置body中所有元素的字体⼤
⼩
   let pObj = document.querySelector('div p');
   pObj.style.color = 'blue';                   //第⼀个p标签有效
   let pArr = document.querySelectorAll('div p');
   console.log(pArr.length);                   //数组⻓度为2
</script>

获取DOM对象的时机

在正常的情况下，我们需要将js的代码写到代码的最下面，以确保在运行js语句时html的语句已经运行完了。

但，如果我们在script标签中加入window.onload事件，则可以将js语句写到所涉及的html语句之前

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function(){
            let obj = document.getElementById('one');
            one.innerHTML = 'world';
        }
    </script>
</head>
<body>
    <div>
        <p id="one">hello</p>
        <p>hello</p>
        <p>hello</p>
    </div>
</body>
</html>

window.onload也叫文档就绪函数

window.onload事件:浏览器完成⻚⾯加载（包括图片等资源）后⽴即触发，此事件的处理函数就叫

做“⽂档就绪函数” . 如果使⽤window.onload事件的话，我们就可以将javaScript代码写在网页的任

何⼀个部分，或者是任何⼀个外部js文件中.

操作DOM对象的属性

操作DOM对象的属性，常用的都有两种方式：

1.通过DOM对象直接操作属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p></p>
    <input type="text">
    <script>
        let obj = document.getElementsByTagName('p')[0];
        //设置属性
        obj.title = 'aaaa';
        console.log(boj.title);
        let inputObj = document.getElementsByTagName('input')[0];
        inputObj.value = 'zhangsan';//改变文本框里的内容
        inputObj.disabled = true;//设置为禁用
    </script>
</body>
</html>

2.通过DOM对象中封装的方法操作属性

setAttribute() 设置元素的属性值

getAttribute() 获取元素的属性值

removeAttribute() 移除元素的属性值

<html>

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>

    <body>
        <input type="text">
        <script>
            let inputObj = document.getElementsByTagName('input')[0];
            inputObj.setAttribute('value', 'zhangsan');
            inputObj.setAttribute('disabled', 'true');
            inputObj.removeAttribute('disabled');
            console.log(inputObj.getAttribute('value'));
        </script>
    </body>

</html>

方法一和方法二的区别：

方法二可以进行动态的编辑，而方法一只能进行静态编辑(相关语句写死了)。

方法二可以将setAttribute中第一个属性用变量代替，通过改变变量的值来实现对所需修改对象的修改属性类型进行改变

DOM对象中常用的属性

1.innerHTML属性：用于设置或获取HTML 元素中的内容。

<div id="one"></div>
<script>
    //获取DOM对象
    //方法一
    let divObj = document.getElementById('one');//获取的为一个对象，因为id具有唯一性
    console.log(divObj);//输出结果:<div id="one"></div>
    divObj.innerHTML = 'hello world'//给该DOM对象的内部添加一段HTML代码
    console.log(divObj);//输出结果:<div id="one">hello world</div>
</script>

2.innerText属性：用于设置或获取HTML 元素中的纯文本。

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div></div>
        <script>
            let obj = document.getElementsByTagName('div')[0];
            // obj.innerHTML = '<h1>hello</h1>'
            // console.log(obj.innerHTML);
            obj.innerText = '<h1>hello</h1>'
            console.log(obj.innerHTML);
        </script>
    </body>
</html>

3.className属性：用于设置或获取DOM对象的类样式

<html>
    <head>
        <meta charset="utf-8">
        <style>
            .one{
                font-size: 36px;
                color: red;
            }
        </style>
    </head>
    <body>
        <div>hello</div>
        <script>
            let obj = document.getElementsByTagName('div')[0];
            obj.className = 'one';
        </script>
    </body>
</html>

有了className属性，我们可以动态的编辑样式

<html>
    <head>
        <meta charset="utf-8">
        <style>
            .one{
                font-size: 36px;
                color: red;
            }
            .two{
                font-size: 36px;
                color: yellowgreen;
            }
        </style>
    </head>
    <body>
        <div>hello</div>
        <button onclick="change()">切换样式</button>
        <script>
            let obj = document.getElementsByTagName('div')[0];
            obj.className = 'one';
            function change(){
                if (obj.className == 'one')
                {
                    obj.className = 'two';
                }
            }
        </script>
    </body>
</html>

4.style属性：用于设置或获取DOM对象的style样式

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div>hello</div>
        <script>
            let obj = document.getElementsByTagName('div')[0];
            //style就是用来改变样式的属性，格式：属性.样式.样式名
            obj.style.fontSize = '36px';
            //fontSize对应的是font-size，因为js中不识别'-'因此有所改变
            obj.style.width = '300px';
            obj.style.height = '300px';
            obj.style.backgroundColor = 'red';
        </script>
    </body>
</html>

注意：

在使⽤javaScript操作DOM对象的CSS样式时，由于javaScript不能识别 ”-” 字符，所以，所有CSS

样式的书写，要⼀律从xxxx-xxxx形式转换为xxxxXxxx的形式。

遍历DOM数组

在上面的例子中，都是使用getElementById获取⼀个DOM对象进行操作。但在实际开发中，经常会同时操作多个DOM对象，此时，可以使用循环来遍历DOM数组。

<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<script>
   let arr = document.getElementsByTagName('p');
   for(let i=0;i<arr.length;i++){
       arr[i].style.color = 'red';
       arr[i].style.fontSize = '36px';
   }
</script>