1.BOM-获取元素(获取元素、修改属性)

web Api基本认知

作用:通过JS去操作html页面和浏览器(实现浏览器中的某些功能)

分类:

DOM(网页):Document Object Model(文档对象模型)

BOM(浏览器):Borwser Object Model(浏览器对象模型)

DOM

DOM树

将网页中标签的关系以树状结构表现出来

DOM对象

浏览器根据html标签生成的JS对象

a)所有的标签属性都可以在这个对象上面找到

b)修改这个对象的属性会自动映射到标签身上
DOM核心思想:把网页内容当做对象来处理

document对象

a)是DOM里提供的一个对象

b)它提供的属性和方法都是用来访问和操作网页内容的

c)网页所有内容都在document里面

获取DOM对象

querySelector('选择器')

js 复制代码
    <div>
        <ul>
            <li></li>
        </ul>
    </div>
    <script>
        //获取页面中的标签语法:
        //a) document.querySelector('CSS选择器')  //注意,参数就是一个字符串,字符串就是各种css选择器
        let res = document.querySelector('div')
        // b)有返回值:返回的结果就是当前标签(标签对象)
        console.log(res)
        let res2 = document.querySelector(' div ul li') //通过后代选择器获取了li标签
        console.log(res2)
    </script>
querySelectorAll
js 复制代码
    <div>文字1</div>
    <div>文字2</div>
    <div>文字3</div>
    <div>文字4</div>

    <script>

        let res = document.querySelector('div')   //querySelector只能获取满足条件的第一个标签
        console.log(res)

        //document.querySelectorAll('css选择器')  //可以获取到所有满足条件的标签  #id .class是css选择器
        let res2 = document.querySelectorAll('div')  //得到的是一个伪数组(伪数组也是一个数组,但是不能使用数组方法)
        console.log(res2) //数组中每一个值都是标签对象
        console.log(res2[1])

    </script>


如何界定返回的结果是伪数组呢?如果返回的结果没有Array就是伪数组

伪数组不能使用数组中的方法,但是伪数组依然可以使用for循环遍历,因为for循环不是数组中的方法

其他获取DOM元素的方法(了解)
js 复制代码
   <div id="one" class="test1">文字1</div>
    <div id="two" class="test2">文字2</div>
    <div id="three">文字3</div>
    <div class="test1">文字4</div>

    <script>

        //  1.其他方式获取标签
        // a)通过标签的id获取标签对象
        // 总结:因为标签的id唯一,所以通过getElementById()只能获取一个标签
        const div = document.getElementById('one')
        console.log(div)
        //b)通过标签的名字获取标签对象
        // document.getElementsByTagName('标签名')
        console.log(document.getElementsByTagName('div'))  //得到一个伪数组
        // c)通过标签类名获取标签
        // document.getElementsByClassName('类名')//类名前面不能加点,加点就变成了类选择器
        let res = document.getElementsByClassName('test1')
        console.log(res)

    </script>

操作元素内容

获取标签中的内容

js 复制代码
  <div id="one" class="test1">
        <p>文字1</p>
    </div>
    <div id="two" class="test2">文字2</div>
    <div id="three">文字3</div>
    <div class="test1">文字4</div>
    <div id="five"></div>
    <script>
        //获取标签中的内容
        // 赋值语法:
        // DOM标签对象.innerHTML=值
        // DOM标签对象.innerText=值

        //获取值语法:获取标签中的内容
        // DOM标签对象.innerHTML;
        // DOM标签对象.innerText;
        const div = document.querySelector('#one')
        //   二者的区别:
        //a) 如果标签内只有纯粹的文字,则innerHTML和innerText没有任何区别
        // b)如果标签中有文字+html标签,则innerHTML既可以获取文字也可以获取对应的HTML标签
        console.log(div.innerHTML)
        console.log(div.innerText)

        //给标签设置文字内容,会覆盖掉标签内原来的内容
        div.innerHTML = '呵呵呵呵'
        console.log(div.innerHTML)  //非纯文本标签也覆盖掉了
        div.innerHTML = '<h1>呵呵呵呵</h1>'  //innerHTML中的标签页会被渲染上去,而innerText的标签会被当成纯文本渲染


    </script>

操作元素属性

操作img的src属性

js 复制代码
    <img src="../image/1.jpg" alt="">

    <script>
        // 操作图片标签中的src属性
        // a)获取图片的src属性
        // 语法:DOM标签对象.src
        const img = document.querySelector('img')
        let res = img.src //获得的是绝对路径
        console.log(res)
        // b)给图片标签设置src属性
        // 语法:DOM标签对象.src=值;
        img.src = '../image/2.jpg'

操作标签的样式属性

js 复制代码
    <div>
    </div>
    <script>
        //操作标签的样式属性
        //1.行内式   //本质上通过操作标签的style属性实现
        //2.外联式  //本质都是通过选择器实现的
        //3.内嵌式  //本质都是通过选择器实现的

        //通过操作标签的style属性实现给标签设置样式的
        //语法:DOM标签对象.style.css属性=值

        let div = document.querySelector('div')
        div.style.backgroundColor = 'red'
        div.style.border = '2px solid blue'
        //通过行内样式一次可以给标签加若干标签属性,单独设置即可
        //style也是一个对象。那么style中有哪些属性我们才可以用 。可以通过console.log(div.style)查阅


    </script>

操作标签的类样式

js 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 200px;
            width: 200px;
            background-color: red;
            border: 5px solid blue;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div>
    </div>
    <script>
        // 1.操作标签的类样式
        // 语法:DOM标签对象.className='类名'

        // 代码演示
        // 1.定义一个样式
        // 2.获取div标签
        let div = document.querySelector('div')
        // 3.给div标签设置类样式
        div.className = 'box'


        // 通过className操作标签样式总结
        // a)如何给标签添加多个类名?只要在类命中加上空格       div.className = 'box  bd  w'
    	//b)通过className操作标签类名的时候,会覆盖标签原来的类名
    	//c)如果不希望覆盖原来的类名,将原来的类名再次添加
    	//d)className设置的值必须是类名,不能加点
	
	//操作类样式终级写法(推荐写法):
	//添加类名:DOM标签对象.classList.add('类名');//不会覆盖原来的类名
	//删除类名:DOM标签对象.classList.remove('类名')
	//切换类名:DOM标签对象.classList.toggle('类名')
	//类似开关,如果没有点击加上,如果有该类名,点击删除
	//判断是否包含类名:DOM标签对象.classList.contains('类名')

    </script>
</body>

</html>

定时器-间歇函数

相关推荐
轻口味25 分钟前
命名空间与模块化概述
开发语言·前端·javascript
前端小小王1 小时前
React Hooks
前端·javascript·react.js
迷途小码农零零发1 小时前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
真滴book理喻4 小时前
Vue(四)
前端·javascript·vue.js
程序员_三木5 小时前
Three.js入门-Raycaster鼠标拾取详解与应用
开发语言·javascript·计算机外设·webgl·three.js
开心工作室_kaic6 小时前
springboot476基于vue篮球联盟管理系统(论文+源码)_kaic
前端·javascript·vue.js
川石教育6 小时前
Vue前端开发-缓存优化
前端·javascript·vue.js·缓存·前端框架·vue·数据缓存
搏博6 小时前
使用Vue创建前后端分离项目的过程(前端部分)
前端·javascript·vue.js
温轻舟6 小时前
前端开发 之 12个鼠标交互特效上【附完整源码】
开发语言·前端·javascript·css·html·交互·温轻舟
web135085886357 小时前
2024-05-18 前端模块化开发——ESModule模块化
开发语言·前端·javascript