DOM操作 045

最新推荐文章于 2025-12-31 17:15:11 发布

原创最新推荐文章于 2025-12-31 17:15:11 发布 · 211 阅读

0 ·

CC 4.0 BY-SA版权

本文深入讲解了DOM（文档对象模型）的基本概念与操作方法，包括获取DOM元素的各种方式，如通过ID、标签名、类名等，以及如何利用JS进行元素的值、样式、属性的修改，展示了丰富的代码实例。

DOM操作 045

一什么是DOM

　　DOM : 文档对象模型它为文档提供了结构化表示并定义了如何通过脚本来访问文档结构 . 目的就是为了能让js操作HTML元素而制定的一个规范 .

　　DOM树(一切都是节点):

　　　　元素节点 : HTML标签

　　　　文本节点 : 标签中的文字(比如标签之间的空格换行)

　　　　属性节点 : 标签的属性

　　DOM可以做什么 : 找对象(元素节点) 设置对象的值设置元素的样式动他创建和删除元素事件的触发响应 : 事件源事件事件的驱动程序

　　获取DOM的方式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="box" id="box">
        <p>alex</p>
    </div>
    <p class="box">吴老板</p>

    <script type="text/javascript">
        console.log(window);
        console.dir(document);
        console.log(document.documentElement);
        console.log(document.body)
        //1.通过id获取
        var oDiv = document.getElementById('box');
        console.log(oDiv);
    //    2.通过标签获取 获取是伪数组 多个DOM对象
        var oTag = document.getElementsByTagName('div')[0]; //HTMLCollection 伪数组 有数组的索引和length,但是没有数组的方法
        console.log(oTag);
        oTag.style.color = 'red';
    //    3.通过类名获取 获取的也是伪数组 多个DOM对象
        var oActives = document.getElementsByClassName('box');
        console.log(oActives);
        for(var i = 0; i < oActives.length; i ++){
            //样式设置
            oActives[i].style.backgroundColor = 'green';
        }
        //救命稻草

        var oD = document.querySelectorAll('div p')
        console.log(oD);

        oD.forEach(function (item,index) {
            console.log(item);
        })


    </script>

</body>
</html>

二 DOM中的操作:

　　1 js对值的处理:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="box">
        wusir
        <p>alex</p>
    </div>
    <input type="text" value="" id="user">
    <script>
        var oDiv = document.getElementById('box');
        // oDiv.innerText= '<h1>哈哈哈哈</h1>';
        // oDiv.innerHTML = '嘿嘿嘿嘿';
        // oDiv.innerHTML = '<h3>嘿嘿嘿</h3>'

        //只获取所有(当前标签和子标签)文本内容
        // console.log(oDiv.innerText);
        //获取父标签中所有的标签元素 (子标签,空格,换行,文本)
        console.log(oDiv.innerHTML);
        //设置value值  只适用于表单控件元素
        document.getElementById('user').value = 'alex';
        console.log(document.getElementById('user').value);
    </script>

</body>
</html>

　　2 对 css 的操作:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 200px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="box"></div>
<script>
    var oDiv = document.getElementsByClassName('box')[0];

    var isRed = true;
    oDiv.onclick = function () {
        if (isRed) {
            console.log(this.style);
            //this  谁做的事件操作 this指向谁
            this.style.backgroundColor = 'green';
            this.style.width = '400px';
            isRed = false;
        } else {
            this.style.backgroundColor = 'red';
            isRed = true;
        }

    }
</script>

</body>

　　3 对标签属性操作:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 200px;
            height: 300px;
            background-color: red;
        }

        #box {
            background-color: yellow;
        }

        .active {
            display: none;
        }
    </style>
</head>
<body>
<button id="btn">切换</button>
<div class="box"></div>
<script>
    var oDiv = document.getElementsByClassName('box')[0];
    var oBtn = document.getElementById('btn');
    var isShow = true;
    //不等待
    oBtn.onclick = function () {
        if (isShow) {
            //   对id 对标签赋值id
            // oDiv.id = 'box';
            // oDiv.title = '哈哈哈';
            // console.log(oDiv.className); //box
            //设置类名的时候 一定要用className 因为class是个关键字
            oDiv.className = oDiv.className + ' active';
            isShow = false;
        }else{
             oDiv.className = 'box';
            isShow = true;
        }

    }
    console.log(11111);

</script>

</body>
</html>

　　4 .img标签属性的操作:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*重置样式*/
        *{
            padding: 0;
            margin: 0;
        }
        .swiper{
            width: 1000px;
            height: 460px;
            margin: 0 auto;
            background-color: red;
            position: relative;
        }
        .swiper span{
            position: absolute;
            right: 0;
            top: 50%;
            width: 41px;
            height: 69px;
            background: green url("./icon-slides.png") no-repeat -125px 0;
        }
    </style>
</head>
<body>
    <div class="swiper">
        <span id="next"></span>
        <img src="./1.png" alt="" id="meinv">
    </div>
    <script>
        var oImg = document.getElementById('meinv');
        console.dir(oImg);
        var oNext = document.getElementById('next');
        oImg.onmouseover = function () {
            //this.src 获取的是DOM对象的属性
            //console.log(this.src); //绝对路径
            //获取出来的就是标签上的属性 通过getAttribute('');获取的标签上的属性
            console.log(this.getAttribute('src'));
            this.src = '1_hover.png';
            this.alt = '哈哈哈'
        }
        oImg.onmouseout = function () {
            this.src = '1.png'
            //console.log(this.getAttribute('src'))
        }
        oNext.onmouseover = function () {
            // console.log( this.style);
            this.style.backgroundPositionX = '-42px';
            this.style.backgroundPositionY = '0';
        }
    </script>
</body>
</html>

　　5 .属性方法设置和获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="box">alex</div>
    <script>
        // document.getElementsByTagName('div')[0].setAttribute()
    </script>

</body>
</html>

　　6 .对象属性和标签属性区分

 
# 区分DOM对象属性 和 标签属性
//this.src 获取的是DOM对象的属性
console.log(this.src); //绝对路径
//获取出来的就是标签上的属性 通过getAttribute('');获取的标签上的属性
console.log(this.getAttribute('src'));

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" name="user" id="user">
<img src="./1.png" alt="" id="aImg">
男 <input type="radio" name="sex" checked="xxxxx" id="nan">
女 <input type="radio" name="sex" id="nv">
<script>

    function  $(idName) {

        return document.getElementById(idName);
    }

    var oInput = document.getElementById('user');
    var oImg = document.getElementById('aImg');

    console.dir(oInput);//DOM对象
    console.log(oInput.type);
    console.log(oInput.getAttribute('type'));


    console.dir(oImg);
    console.log(oImg.src);
    console.log(oImg.getAttribute('src'));

    console.log(  $('nan').checked); //对象的属性   单选框 提交后台 建议使用对象属性checked
    console.log(  $('nan').getAttribute('checked')); //标签上属性
</script>

</body>
</html>