标签：DOM01 定时器 DOM 元素 document css 属性
Web API 基本认识
作用和分类
什么是 DOM
DOM 树
DOM 对象
-
作用：使用 JS 去操作 HTML 和浏览器
-
分类：DOM文档对象模型、BOM浏览器对象模型
-
DOM 是浏览器提供的一套专门用来操作网页内容的功能
3.1 开发网页内容特效和实现用户交互
-
DOM 树
4.1 将 HTML 文档以树状结构直观的表现出来，即为文档树或DOM树
4.2 描述网页内容关系的名词
4.3 作用：文档树直观的体现了标签与标签之间的关系
-
DOM 对象 浏览器根据 HTML 标签自动生成的对象
5.1 所有的标签属性都可以在这个对象上找到
5.2 修改这个对象的属性会自动映射到标签身上
5.3 把网页内容当作对象来处理
5.4 document 对象
-
是 DOM 里提供的一个对象
-
提供的属性和方法都是用来访问和操作网页内容
-
网页所有的内容都在 document 里面
-
-
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 标签 -->
<button>点击</button>
<script>
let btn = document.querySelector('button')
// 打印对象类型
console.log(typeof btn);
// 打印对象
console.dir(btn)
// js btn 对象 即 DOM 对象
// 修改对象
btn.innerText = '唐伯虎'
</script>
</body>
</html>
获取 DOM 元素
根据 CSS 选择器来获取 DOM 元素
其他获取 DOM 元素方法
-
选择匹配的第一个元素
1.1 语法
document.querySelector('css选择器')1.2 参数 包含一个或多个有效的 CSS 选择器字符串
1.3 返回值
-
CSS 选择器匹配的第一个元素，一个 HTMLElement对象
-
如果没有匹配到，则返回 null
1.4 能直接操作修改
-
-
选择匹配的多个元素
2.1 语法
document.querySelectorAll('css选择器')2.2 参数 包含一个或多个有效的 CSS 选择器字符串
2.3 返回值
-
CSS 选择器匹配的 NodeList 对象集合
2.4 不能直接修改 --> 遍历 for
2.5 返回值是一个伪数组
-
有长度有索引的数组
-
没有数组方法
-
即使返回值只有一个元素，返回值也是一个伪数组
-
-
其他获取 DOM 元素的方法
3.1 语法
// 根据 id 获取一个元素
document.getElementById('id')
// 根据 标签名 获取一类元素
document.getElementByTagName('TagName')
// 根据 类名 获取元素
document.getElementByClassName('ClassName') -
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>我是一个盒子</div>
<div>我是另一个盒子</div>
<div class="three">我是第三个盒子</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
// js 获取元素
// let div = document.querySelector('div')
let div = document.querySelector('.three')
let li = document.querySelector('ul li:last-child')
let lis = document.querySelectorAll('ul li')
console.log(div);
console.log(li);
console.log(lis);
// 遍历修改元素
for (let i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
</script>
</body>
</html>
设置 修改 DOM 元素内容
document.write() 方法
对象.innerText 属性
对象.innerHTML 属性
-
document.write()
1.1 只能将文本内容追加到</body>前面的位置
1.2 文本中包含的标签会被解析
-
元素 innerText 属性
2.1 将文本内容添加/更新到任意标签位置
2.2 文本中包含的标签不会被解析
-
元素 inner HTML 属性
3.1 将文本内容添加/更新到任意标签位置
3.2 文本中包含的标签会被解析
-
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width:200px;
height:200px;
background-color: pink;
}
</style>
</head>
<body>
<div>粉红色的回忆</div>
<script>
// document.write()
document.write('Hello World')
document.write('<h3>你好，世界</h3>')
// innerText 属性
// 获取标签
let box = document.querySelector('div')
// 修改标签内容
box.innerText = '我是一个盒子'
box.innerText = '<strong>我是一个盒子</strong>'
// innerHTML
box.innerHTML = '<strong>我是一个盒子</strong>'
</script>
</body>
</html>
设置 修改 DOM 元素属性
设置 修改元素常用属性
设置 修改元素样式属性
设置 修改 表单元素属性
-
设置 修改元素常用属性
1.1 通过 js 设置 修改标签元素属性
1.2 语法 对象.属性 =值
-
设置 修改元素样式属性
2.1 通过 style 属性操作 css
-
语法 元素.style.样式属性 = 值
-
样式属性名为小驼峰命名法 单位 行内
2.2 通过 className 操作 css
-
语法 元素.className = 值
-
添加类 优先级低于行内样式 即 通过 style 属性操作 css 优先级高于 通过 className 操作css
2.3 通过 classList 操作类控制 css
-
classList.add() 追加 css
-
classList.remove() 移除 css
-
classList.toggle() 切换 css
-
-
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width:300px;
height:300px;
background-color: pink;
}
.active{
width:500px;
height:500px;
background-color: blue;
}
</style>
</head>
<body>
<div></div>
<script>
// 获取元素
let box = document.querySelector('div')
// style 改变样式
box.style.backgroundColor = 'hotpink'
box.style.width = '400px'
// className 操作 css
// 样式优先级 低于 style
box.className = 'active'
// 通过 classList 操作类控制 css
// classList.add() 追加 css
box.classList.add('active')
// classList.remove() 移除 css
box.classList.remove('active')
// classList.toggle() 切换 css
box.classList.toggle('active')
</script>
</body>
</html> -
设置 修改表单元素属性
4.1 获取：DOM 对象.属性名
4.2 设置：DOM 对象.属性名 = 值
4.3 demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" value="请输入">
<script>
// 获取元素
let input = document.querySelector('input')
// 取值或设置值
console.log(input.value);
input.value = '小米手机'
input.type = 'password'
</script>
</body>
</html>
定时器 - 间歇函数
定时器函数介绍
定时器函数基本使用
-
开启定时器 setInterval(函数, 间隔时间)
-
作用：每隔一段时间调用这个函数
-
函数：不加小括号，加小括号会立即执行
-
时间间隔：单位毫秒
-
返回值： id 数字
-
-
关闭定时器 clearInterval(变量名)
-
页面中可能有多个定时器，但关闭哪个需要明确,因此关闭定时器必须有定时器标识
-
定时器标识:开启/定义定时器时会返回一个id数字，作为定时器标志，由变量接收
-
-
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 开启定时器
setInterval(function() {
console.log('高薪就业');
}, 1000)
// 定义函数
function show() {
console.log('月薪过万');
}
// 匿名定时器 无法清除
setInterval(show, 1000)
// 开启定时器 接受定时器标识
let timer = setInterval(show, 1000) // 第三个定时器
console.log(timer)
// 关闭定时器
clearInterval(timer)
</script>
</body>
</html>
标签：DOM01,定时器,DOM,元素,document,css,属性 来源： https://www.cnblogs.com/little3star/p/16325461.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。