元素
获取元素大小
<div class="one">
<div class="two"></div>
</div>
<script>
// 获取元素的大小(尺寸)
// let div = document.querySelector('div')
// console.dir(div) //查找和元素相关的属性 发现offsetWith是盒子的总宽度
// 语法：DOM标签对象.offsetWidth=内容+内边距+边框
// 语法：DOM标签对象.clientWidth=内容+内边距
// 语法：DOM标签对象.clientLeft=元素左边框大小
// 右边框大小=DOM标签对象.offsetWidth-DOM标签对象.clientWidth-DOM标签对象.clientLeft
//获取元素位置
// 1.如果当前蓝色盒子以整个页面为参照，位置208px(200px的外边距。和网页默认的8px的外边距)
// 2.如果two盒子以父元素为参照，位置0px
// DOM标签对象.offsetLeft:获取当前元素位置，参照页面左上角(默认)
// DOM标签对象.offserLeft:如果希望参照父元素，则需要给父元素设置定位
let div = document.querySelector('.two')
console.dir(div)
console.log(div.offsetLeft) //参照页面左上角获取当前元素位置(默认)
</script>
// 其他方法获得位置(相对于页面，跟父元素没关系)
console.log('其他方法获取位置')
console.log(div.getBoundingClientRect())
锚点链接介绍
a链接只在本页面内部跳转
//#表示只在本页面内部跳转
<a href="#"></a> //跳转到页面顶部
<p id="one"></p>
<a href="#one"></a> //#表示在本页面跳转。id表示跳转到id为one处
阻止标签默认行为
超链接a标签默认行为：跳转
a)在事件中通过 事件对象参数.preventDefault()阻止默认跳转行为
b)直接在a标签中添加一句话
<a href="javascript:;"></a>
<a href="http://www.baidu.com">百度</a>
<script>
// a标签：
// 点击a标签输出一句话
let a = document.querySelector('a')
a.addEventListener('click', function (e) {
console.log('hehehh')
//页面跳转之后，打印的内容不在新标签显示
// 阻止a标签跳转
e.preventDefault()
})
</script>
表单提交默认行为：跳转
<form action="">
<input type="text">
<input type="submit">
</form>
<script>
let btn = document.querySelector('input[type="submit"]') //通过属性选择器寻找
btn.addEventListener('click', function (e) {
console.log(123)
// 阻止表单默认行为
e.preventDefault()
})
</script>
其他写法:
<script>
// let btn = document.querySelector('input[type="submit"]') //通过属性选择器寻找
// btn.addEventListener('click', function (e) {
// console.log(123)
// // 阻止表单默认行为
// e.preventDefault()
// })
// 其他写法
// 直接给form标签注册，submit事件
// 当表单form标签被提交的时候，触发submit事件
let form = document.querySelector('form')
form.addEventListener('submit', function (e) {
console.log(123)
e.preventDefault()
})
</script>
日期对象
<script>
// 日期对象：
// 应用场景：在网页中显示/操作 日期(年，月，日，时，分，秒)
// 日期对象的基本使用
// 1.先获取日期对象：let 自定义对象名=new Date();
//
let dt = new Date()
console.log(dt)
// 2.根据当前日期对象获取年,月,日,时,分,秒
// 年:当前日期对象.getFullYear();
let year = dt.getFullYear();
console.log(year);
// 月 返回的结果从0开始
let month = dt.getMonth() + 1
console.log(month)
// 日期
let d = dt.getDate()
console.log(d)
// 小时
console.log(dt.getHours())
// 分
console.log(dt.getMinutes())
// 秒
console.log(dt.getSeconds())
</script>
时间戳
用毫秒方式表示当前时间(1970年到现在过了多少毫秒)
使用场景：如果计算倒计时，前面方法无法直接计算，需要借助于时间戳完成
<script>
// 时间戳获取方式
// a) +new Date()
// 代码演示：
let dt = +new Date();
console.log(dt)
// b）日期对象.getTime()
// c）Date.now()
</script>
节点
节点：在网页中任何的一个标签、或者标签的属性、或者标签中的内容或回车、空格都叫节点
元素：特指html标签(网页中任何一个html标签都是一个元素)
查找节点(根据父元素查找子元素)
<div>
<ul>
<li>列表</li>
</ul>
<p>段落</p>
<h1>标题</h1>
<span>span标签</span>
<p>段落2</p>
<input type="text">
<p>段落3</p>
<a href="#"> 链接</a>
</div>
<script>
// 根据节点之间的关系查找节点(标签)
// a)根据父节点找子节点
// b)根据子节点找父节点
// c)根据节点获取兄弟节点
// 1)根据父节点找子节点
// 语法： 父DOM标签对象.children 得到的是一个伪数组，保存的都是DOM标签对象。父元素.children获取当前父元素中的所有直接子元素
let div = document.querySelector('div')
let res = div.children
console.log(res)
</script>
获取子元素的其他方式
父DOM标签对象.childNodes(了解)
根据子元素获取父元素
子DOM标签对象.parentNode,得到的结果就是当前标签的直接父元素，是一个DOM对象
获取标签的兄弟元素
a)获取当前标签前一个兄弟元素：DOM标签对象.previousElementSibling
b)获取当前标签后一个兄弟元素：DOM标签对象.nextElementSibling
增加节点
在网页中创建一个新的标签
将元素添加到父元素末尾
增加节点：在网页中创建一个新的标签
1.创建一个新的节点：document.createElement('标签名')
2.将创建的标签添加一个指定的父容器中：父容器DOM标签对象.appendChild(创建的新节点)
创建的标签也是一个DOM标签对象 j
其他方式添加节点
可以添加到元素的任何一个地方
应用场景：发布消息的时候，发布的新消息是第一条
<div>
<p>段落</p>
</div>
<script>
// 在div中增加一个标题标签
let div = document.querySelector('div')
let h1 = document.createElement('h1')
h1.innerHTML = '标题'
// div.appendChild(h1)
// 新增节点的时候，向父容器添加节点的时候，还可以通过insertBefore()方式实现
// 语法：父容器.insertBefore(要添加的元素,目标元素)
let p = document.querySelector('p')
div.insertBefore(h1, p)
//放到第一个元素前面，首先要查找到父元素的第一个子元素，
//根据父元素查找子元素：div.children[0]
</script>
克隆节点(复制)
<div>
<p>段落</p>
<ul>
<li>我是li标签</li>
</ul>
</div>
<script>
// 1.在复制一份div
// 语法：要被克隆的标签对象.clone(布尔值)
let div = document.querySelector('div')
let res = div.cloneNode(false)
// 总结：1.克隆元素的时候，如果设置的值是false，则表示只克隆当前标签本身,如果不写布尔值默认的是false
console.log('布尔值为false:')
console.log(res)
let res2 = div.cloneNode(true)
console.log('布尔值为true:')
console.log(res2)
// 总结：2.克隆元素的时候，如果设置的值是true，则表示克隆当前标签和标签中的所有内容
</script>
移除节点
// 移除节点
// 语法：父容器.removeChild(要被移除的标签对象)
let div = document.querySelector('div')
let p = document.querySelector('p')
let res = div.removeChild(p)
console.log(res)
// 移除节点和隐藏元素的区别
// 1.移除节点：代表当前标签在html结构中不存在
// 2.隐藏元素：代表当前标签不会再浏览器中渲染显示，但html结构中依然可以找到这个标签
其他知识点
移动端事件介绍(在pc端不执行。pc端控制的是鼠标)
touchstart:手指摁在屏幕上触发的事件
touchend：手指离开触发事件
touchmove：手指移动触发事件
重绘和回流
浏览器渲染网页的过程：
核心：浏览器软件有渲染引擎
渲染过程：
重绘：如果页面中的标签样式(与颜色相关的部分发生了改变)，那么浏览器就会进行重绘
回流：如果网页中与元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档，称为回流
重绘不一定引起回流，而回流一定引起重绘
会导致回流的操作：（影响到布局了就会回流）
页面的首次刷新
浏览器窗口大小发生改变
元素的大小或位置发生改变
改变字体的大小
内容的变化(如：input框的输入、图片的大小)
激活css伪类(如: :hover)
脚本操作DOM(添加或者删除可见的DOM元素)
1303
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
