DOM文档对象模型

胡小葵

已于 2022-09-07 20:25:05 修改

阅读量187

点赞数

文章标签： javascript 前端 css

于 2022-08-26 19:58:08 首次发布

本文链接：https://blog.csdn.net/m0_48860371/article/details/126536792

版权

DOM （Document Object Model）：文档对象模型

作用

其实就是操作 html 中的标签的一些能力
我们可以操作哪些内容

获取一个元素
移除一个元素
创建一个元素
向页面里面添加一个元素
给元素绑定一些事件
获取元素的属性
给元素添加一些 css 样式

DOM 的核心对象就是 docuemnt 对象
document 对象是浏览器内置的一个对象，里面存储着专门用来操作元素的各种方法
DOM：页面中的标签，我们通过 js 获取到以后，就把这个对象叫做 DOM 对象

属性与方法----获取html元素

通过HTML5新增的方法获取

根据id获取 getElementById(‘id属性值’) get 获得 element 元素 by 通过驼峰命名
返回唯一一个元素对象
console.dir(a);//打印返回的元素对象的属性和方法

<div id="title">1234</>
<script>
  function test1(){
            var h2Ele = document.getElementById('title') 
            console.log(h2Ele)  //<div id="title">1234</>
        }
        test1()
</script>

根据类名获取 getElementsByClassName(‘class属性’) 返回类数组
返回类数组（伪数组）与数组的区别
类数组不能使用Array的常用方法（push pop等）
类数组可以遍历i，可以用 [ ] 访问

function test2(){
            var divEles = document.getElementsByClassName('d1')
            console.log(divEles)

            for(var i =0;  i < divEles.length; i++){
                console.log(divEles[i])
            }
        }
       test2()

根据标签名获取 getElementsByTagName(‘标签名’) 获取该标签的所有元素返回为伪数组存储的集合

   function test3(){
            var  divEles = document.getElementsByTagName('div')
            console.log(divEles)

        }
        // test3()

getElementsByName(‘name属性’) 表单里的
根据选择器获取 querySelector 和 querySelectorAll 现常用
- querySelector（）css选择器只返回满足条件第一个元素
- - querySelectorAll（）css选择器返回满足条件所有元素存在类数组里

 function test5(){
         	var divEles = document.querySelector('.d1')
            var divEles = document.querySelectorAll('div')
            console.log(divEles)
        }
        test5()

获取特殊元素（body、html）
document.body
document.documentElement

操作元素

操作元素内容

- innerHTML 获取元素内容和设置内容 保留空格和换行
在这里插入图片描述
会识别字符串中的标签

innerText设置的内容

会被识别成标签

- innerText 获取内容
不会识别字符串中的标签，纯文本输出，去除空格和换行

innerText设置的内容

 <script>
        function test1(){
            var h2Ele = document.querySelector('#title')
            h2Ele.innerHTML = '<h3>innerText设置的内容</h3>' //h3被识别
            h2Ele.innerText = '<h3>innerText设置的内容</h3>'   //h3不被识别
            console.log('内容 :',h2Ele.innerHTML);
        }
        // test1()
        function test2(){
            var inputEle = document.querySelector('input[name="message"]')
            // inputEle.value = 'jack'
            console.log( inputEle.value )
        }
        test2()

- 常见元素属性操作
src href id alt title 等改变
方式：现获取元素，再元素.属性=‘新的值’
在这里插入图片描述

操作表单内容
input.value=‘改变表单内容’；
input.type | checked | selected
表单禁用：按钮点击后禁用：btn.disabled=true;

案例–不同时间显示不同问候语和图片

   <style>
        img{
            width: 300px;
        }
    </style>
</head>
<body>
    <img src="" alt="">
    <div></div>
    <script>
        //根据不同时间来判断，需要用到时间对象
        //利用多分支语句来设置不同的图片
        //需要一个图片据时间修改图片，就需要用到操作src属性
        //需要一个div元素，显示不同的问候语，修改元素内容即可
        //1、获取元素
        var img=document.querySelector('img');
        var div=document.querySelector('div');
        //2、得到当前小时数
        var date=new Date();
        var hour=date.getHours();
        //3、判断小时数改变图片和文字信息
        if(hour<12){
            img.src='./images/a.png';
            div.innerHTML='上午好';
        }else if(hour<18){
            img.src='./images/b.png';
            div.innerHTML='下午好';
        }else{
            img.src='./images/c.png';
            div.innerHTML='晚上好';
        }
    </script>

案例–密码显示隐藏功能

在这里插入图片描述

操作元素CSS样式

style 行间样式

ele. style.样式名=样式值
专门用来给元素添加css样式的，添加的都是行内样式

  <h2 style="color: red;">操作样式</h2>
 <script>
  // 获取h2标签的行内样式
            function getStyleTest(){
                var h2Ele = document.querySelector('h2')
                var colorValue = h2Ele.style.color  //行内式
            }
             // 更改h2字体大小为24px  
            function setStyleTest(){
                var h2Ele = document.querySelector('h2')
                h2Ele.style.fontSize = '44px'  // js代码操作样式名， 样式名用驼峰命令 font-size  -> fontSize
                h2Ele.style.backgroundColor = 'skyblue'
            }

className class类样式

ele.className=类名

ele.className=‘’ 移除样式
专门用来操作元素的类名；也可以设置元素类名，是全覆盖式操作，并且后面的类名会覆盖前面的相同类名

在这里插入图片描述

classList.add(类名1 类名2) 动态添加移除class类样式

添加类名1 类名2 的样式获取操作的元素.classList.add(‘类名1 ’ , '类名2 '）
ele.classList…remove() 移除样式

 var divEle = document.querySelector('div')
 divEle.classList.add('d1' , 'd2'）

移除指定样式获取操作的元素.classList.remove(’类名1 ’ ）

 var div = document.querySelector('div')
div.classList.remove('active');

获取非行间样式

window.getcComputedStyle(元素).样式名

    .d3{
                width: 200px;
				height: 200px;
				background-color: pink;
            }
		</style>
		  <h3 class="d3">元素二</h3>
		   <button onclick="getClassStyle()">获取非行间样式</button>
		  <script>
		   function getClassStyle(){
                var h3Ele = document.querySelector('h3')
                var w = window.getComputedStyle(h3Ele).width
                console.log('w :',w);
            }

操作属性

js代码动态获取属性值或设置属性

获取属性值 ele.getAttribute(属性名)
设置属性 ele.setAttribute(属性名,属性值) ele.属性名 = 属性值

 var imgEle = document.querySelectorAll('img')[1]
 imgEle.src='./06练习岛上书店/images/book.jpg'

删除属性 ele.removeAttribute(‘属性名’)
data-属性名自定义属性 ele.dataset.属性名

<h4 data-index="1001" data-score="98">元素三</h4>
 <script>
        function getMyAttr(){
            var h4Ele = document.querySelector('h4')
            var index =  h4Ele.dataset.score
            console.log(index)
        }

操作事件

给元素绑定点击事件

     直接给元素添加onclick属性实现

绑定事件
1. 属性事件
2. 元素和事件行为分离

<body>
    <button>按钮</button>
    <div>元素一</div>

    <script>
        var btn = document.querySelector('button')
        btn.onclick = function(){
            alert('绑定事件')
        }

        var divEle = document.querySelector('div')
        divEle.onclick = function(){
            divEle.innerHTML = '今天是周五'
        }
    </script>
</body>