Day1 DOM元素

1.1 DOM前言

（1）Web API 作用和分类

作用：

就是使用 JS 去操作 html 和浏览器

分类：

DOM（文档对象模型）

BOM（浏览器对象模型）

（2）什么是DOM

DOM（Document Object Model —— 文档对象模型）是用来呈现以及与任意 HTML 或 XML 文档交互的API

白话文：DOM是浏览器提供的一套专门用来操作网页内容的功能

DOM作用：

开发网页内容特效和实现用户交互

（3）DOM树

DOM树是什么：

将 html 文档以树状结构直观的表现出来，我们称之为文档树或DOM树

描述网页内容关系的名词

作用：文档树直观的体现了标签与标签之间的关系

（4）DOM对象（重要）

DOM对象：

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

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

修改这个对象的属性会自动映射到标签身上

DOM的核心思想：

把网页内容当做对象来处理

document 对象：

是DOM里提供的一个对象

所以它提供的属性和方法都是用来访问和操作网页内容的（例如：document.write（））

网页所有内容都在document里面

1.2 获取元素

通过 id 获取:在文档里获取id元素------document.getElementById('id的名字')

<body><div id="box"></div><script>var box=document.getElementById('box')console.log(box) //元素对象console.log(typeof box)  //object</script>
</body>

console.dir(box)--------了解

<body><div id="box"></div><script>var box=document.getElementById('box')console.log(box) //元素对象console.log(typeof box)  //object// 了解console.dir(box)</script>
</body>

通过标签名获取元素，拿到的是伪数组并且是动态集合--------document.getElementsByTagName('标签名')

注意：操作伪数组中的某个元素，可以使用for循环

<body><div></div><ul><li>111111</li><li>222222</li><li>333333</li><li>444444</li></ul><script>console.log(document.getElementsByTagName('li')) console.log(document.getElementsByTagName('div')) </script>
</body>

html5提供的3种获取元素的方法

(1)通过类名获取元素，得到的是伪数组-----document.getElementsByClassName('类名')
```
<body><p class="box">111</p><p class="box">222</p><script>console.log(document.getElementsByClassName('box')) </script>
</body>
```
(2)获取选择器时需要加上对应的符号，如果有多个相同id/class/标签名，只能拿到第一个符合条件的元素

document.querySelector('类名')
```
<body><p class="box">111</p><p class="box">222</p><script>console.log(document.querySelector('.box'))</script>
</body>
```
(3)获取选择器时需要加上对应的符号，获取所有名为该类名的标签，得到的是伪数组
```
<body><p class="box">111</p><p class="box">222</p><script>console.log(document.querySelectorAll('.box1'))</script>
</body>
```

获取body和html

<script>// 获取bodyconsole.log(document.body)// 获取htmlconsole.log(document.documentElement)</script>

1.3 事件

事件的三要素：事件源、事件类型、事件处理程序

事件源：触发事件的元素(谁) btn

事件类型：添加的是什么事件 click hover mousemove

事件处理程序：做什么事情函数处理程序
```
<body><div>我是盒子</div><span>行内</span><script>// 获取元素var btn_div=document.querySelector('div')btn_div.onclick=function(){alert('我是隐藏线路1')}/* var btn_div=document.getElementsByTagName('div')btn_div[0].onclick=function(){alert('我是隐藏线路1')} */var btn_span=document.querySelector('span')btn_span.onclick=function(){alert('我是隐藏线路2')}</script>
</body>
```
补充：点击事件获取一个对象：document.getElementById() document.querySelector()

点击事件获取多个：document.getElementsByTagName() getElementsByClassName()

document.querySelectorAll() 用所以选择想要的伪数组元素

1.4 操作元素

innerText：获取子孙后代的文本内容(不获取标签)---添加元素不识别html，去除空格和换行

元素名.innerText=内容
innerHTML：获取子孙后代的文本内容和标签---添加元素识别html，保留空格和换行

显示在页面上的倒计时初级版本

<!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>* {padding: 0;margin: 0;list-style: none;text-decoration: none;}
.father {display: flex;}
.son1,.son2,.son3 {width: 50px;height: 50px;margin: 0 10px;color: white;font-size: 26px;text-align: center;line-height: 50px;background-color: black;}
span {font-size: 30px;font-weight: 700;}</style>
</head>

<body><div class="father"><div class="son1"></div><span>:</span><div class="son2"></div><span>:</span><div class="son3"></div></div>
<script>// 获取元素内容/* innerText：获取子孙后代的文本内容(不获取标签)---添加元素不识别html，去除空格和换行innerHTML：获取子孙后代的文本内容和标签---添加元素识别html，保留空格和换行*/var son1 = document.querySelector('.son1')var son2 = document.querySelector('.son2')var son3 = document.querySelector('.son3')
function getCountDown(t) {var nowDate = +new Date()var newDate = +new Date(t)var time = (newDate - nowDate) / 1000  //1s=1000msvar d = parseInt(time / 60 / 60 / 24) < 10 ? '0' + parseInt(time / 60 / 60 / 24) : parseInt(time / 60 / 60 / 24)var h = parseInt(time / 60 / 60 % 24) < 10 ? '0' + parseInt(time / 60 / 60 % 24) : parseInt(time / 60 / 60 % 24)var m = parseInt(time / 60 % 60) < 10 ? '0' + parseInt(time / 60 % 60) : parseInt(time / 60 % 60)var s = parseInt(time % 60) < 10 ? '0' + parseInt(time % 60) : parseInt(time % 60)// return '倒计时：' + d + '天' + h + '时' + m + '分' + m + '秒'son1.innerText = hson2.innerText = mson3.innerText = s}getCountDown('2024/3/29 22:20:00')</script>
</body>

</html>

1.5 修改元素属性值

<!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>img{width: 200px;}</style>
</head>
<body><img src="../images/轮播图1.jpg" alt=""><script>let img=document.querySelector('img')let flag=trueimg.onclick=function(){if(flag){img.src='../images/轮播图2.jpg'img.title='橙色背景'flag=!flag  //取反}else{img.src='../images/轮播图1.jpg'img.title='白色背景'flag=!flag}}</script>
</body>
</html>

1.6 表单相关属性

<body>文本框：<input type="text" class="text">多选框：<input type="checkbox" class="checkbox">男<button>点击获取焦点</button><script>let text=document.querySelector('.text')let checkbox=document.querySelector('.checkbox')let btn=document.querySelector('button')btn.onclick=function(){// input获取焦点text.focus()// 设置默认值text.value='hello'// 禁用text.disabled=true// 多选框选中checkbox.checked=true}</script>
</body>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/726129.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！