DOM文档对象模型

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代码动态获取属性值或设置属性

  1. 获取属性值 ele.getAttribute(属性名)
    在这里插入图片描述

  2. 设置属性 ele.setAttribute(属性名,属性值) ele.属性名 = 属性值
    在这里插入图片描述

 var imgEle = document.querySelectorAll('img')[1]
 imgEle.src='./06练习岛上书店/images/book.jpg'
  1. 删除属性 ele.removeAttribute(‘属性名’)

  2. 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)
        }

操作事件

  1. 给元素绑定点击事件

         直接给元素添加onclick属性实现
    
  2. 绑定事件
    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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值