克隆
需要克隆的节点.cloneNode(false/true)
false表示浅克隆则不克隆子节点
true表示克隆子节点
默认值为false
cloneNode(false/true)
删除元素
父元素.removeChild(要删除的子元素)
删除自己
自己.remove()
案例
<script>
let btn = document.querySelector('.btn')
let ul = document.querySelector('ul')
let li = document.querySelector('li:nth-child(1)')
btn.addEventListener('click', function () {
//点击按钮后删除ul里面的第一个li
ul.removeChild(li)
})
</script>
</body>
输出：
const的说明
const与let都是可以声明变量的
const 声明的变量不能被修改，let 可以需要修改
能使用const就不用let
<script>
const arr = []
//可以赋值
arr.push(123)
//可以赋值
arr.name = ('1d')
//不能修改，会直接报错
// arr = 12
console.log(arr);
</script>
事件对象
event
示例：
<button>点击</button>
<script>
const button = document.querySelector('button')
button.addEventListener('click', function (event) {
console.log(event); //返回存放事件触发一瞬间的信息
})
</script>
输出：
事件委托
target
target.nodeName
可以指定元素
示例：
给div绑定点击事件，但是点击button可以触发打印效果
<div>
<button>点击</button>
</div>
<script>
const div = document.querySelector('div')
div.addEventListener('click', function (event) {
if (event.target.nodeName === "BUTTON") {
console.log('我是div');
}
})
</script>
输出：
滚动事件
scroll
示例：
获取页面的Top滚动距离
<script>
window.addEventListener('scroll', function () {
//获取
console.log(document.documentElement.scrollTop);
})
</script>
输出：
停止冒泡
e.stopPropagation()
示例：
<body>
<div class="a">
祖
<div class="b">
父
<div class="c">子</div>
</div>
</div>
<script>
const a = document.querySelector('.a')
const b = document.querySelector('.b')
const c = document.querySelector('.c')
a.addEventListener('click', function () {
console.log('我是a');
})
b.addEventListener('click', function () {
console.log('我是b');
})
//没有加阻止事件冒泡，我点击c那么ab也会跟着输出
c.addEventListener('click', function (e) {
console.log('我是c');
//加上阻止事件冒泡，那么它就不会再往上冒泡，只能输出自己的内容
e.stopPropagation()
})
</script>
</body>
输出：
阻止标签默认行为
event.preventDefault()
示例：
a链接的默认行为就是点击后跳转
我们加上event.preventDefault()后就可以阻止默认跳转行为
<a href="http://www.baidu.com">百度</a>
<script>
const a = document.querySelector('a')
a.addEventListener('click', function (event) {
//加上阻止默认行为的代码，就可以实现点击不跳转
event.preventDefault()
})
</script>
加载事件
load
load
代表需要加载页面的标签以及对应的外部资源才能运行
工作常用这一种
<script>
window.addEventListener('load', function () {
console.log('load 标签加载完毕-标签对应外部资源加载完毕');
});
</script>
DOMContentLoaded
DOMContentLoaded
表示只要加载完页面标签即可运行
<script>
window.addEventListener('DOMContentLoaded', function () {
console.log('加载标签');
})
</script>
scroll
scrollWidth 获取整个可以滚动的区间的宽度
scrollHeight 获取整个可以滚动的区域的高度
pc端不包含滚动条（滚动条为17px，但是移动端就会包含滚动条
示例：
给div设定的宽度为300px，但是最后输出的是内容可滚动的宽度
可滚动内容有多宽，那么它的宽度就是多少（高度也同理
<style>
div {
width: 300px;
height: 300px;
background-color: orange;
overflow: scroll;
white-space: nowrap;
}
</style>
</head>
<body>
<div>
ccnjfhjf
ccnjfhjf
ccnjfhjf
ccnjfhjf
ccnjfhjf
ccnjfhjf
ccnjfhjf
ccnjfhjf
ccnjfhjf
</div>
<script>
const div = document.querySelector('div')
console.log(div.scrollWidth);
div.addEventListener('scroll', function () {
console.log(this.scrollLeft);
})
</script>
</body>
输出：
获取当前容器滚动距离
scrollLeft是获取滚动的距离
div.addEventListener('scroll', function () {
console.log(this.scrollLeft);
})
offset
获取元素宽高度包含滚动条
offsetWidth
offsetHeight
console.log(div.offsetWidth);
console.log(div.offsetHeight);
获取元素的距离大小，父元素需要定位（父元素没有定位，祖元素有定位那么就找祖元素
如果父元素没有定位，那么就按页面来计算
offsetTop
offsetLeft
console.log(div.offsetTop);
console.log(div.offsetLeft);
示例：
<body>
<div class="box">
<div class="a"></div>
</div>
<script>
const div = document.querySelector('.a')
console.log(div.offsetWidth);
console.log(div.offsetHeight);
console.log(div.offsetTop);
console.log(div.offsetLeft);
</script>
</body>
输出：
父元素box加了定位
可以看到子元素输出的top、left距离是按照父元素找的
client
获取元素的宽高是包含滚动条区域的
但是不包含内容可滚动区域，只获取当前窗口可视区域的宽高
console.log(div.clientHeight);
console.log(div.clientWidth);
clientTop
clientLeft
则是获取元素的边框
console.log(div.clientTop);
console.log(div.clientLeft);
示例：
<style>
div {
width: 300px;
height: 300px;
background-color: orange;
margin: 50px auto;
overflow: auto;
border-top: 1px solid #000;
border-left: 2px solid #000;
}
</style>
</head>
<body>
<div>
</div>
<script>
const div = document.querySelector('div')
console.log(div.clientHeight);
console.log(div.clientWidth);
console.log(div.clientTop);
console.log(div.clientLeft);
</script>
</body>
可以看到输出的是边框大小：
延时器
setTimeout
示例：
延时2秒隐藏元素（广告？
<body>
<div class="box">ff</div>
<script>
let timeId = setTimeout(function () {
document.querySelector('.box').style.display = 'none'
}, 2000)
//这是关闭延时器
// clearTimeout(timeId)
</script>
</body>
clearTimeout关闭延时器
添加后直接关闭延时器，延时器的内容则不会执行
location对象
设置跳转地址
location.href
location.href = 'http://www.baidu.com'
//强制刷新
location.reload = true
```js
//获取？号后面的字符串
console.log(location.search);
```
//获取#号后面的字符串
console.log(location.hash);
navigator对象
常用：
navigator.userAgent
检测当前浏览器的版本和型号
作用 检测当前浏览器的版本和型号
// 手机端来说， 安卓手机 可以直接下载apk 手机软件的
// ios 手机来说 不可以直接下载手机软件 必须要回到苹果的应用商店中来下载
// 安卓手机来说 点击 下载软件 给它下载apk
// iphone手机来说 点击 下载软件 可能只需给苹果手机一个提示
// 可以识别出 当前的访问设备是 pc端还是移动端
// 后台根据 当前用户的设备类型 来返回 对应的平台的页面
// pc端来访问我的页面 我给你显示pc端的页面
// 移动端来访问我的页面 我给你显示移动端的页面
//网上有很多写好的代码或者公司也会有写好的代码，直接cv过来即可
history对象
浏览器历史前进或者后退
history.go(1)//代表前进一步
history.go(-1)//代表后退一步
本地存储
localStorage
用户不清除数据，那么数据就会一直保存
存值
localStorage.setItem('名称', 数据)
取值
localStorage.getItem('名称')
转换为字符串
JSON.stringify(名称)
字符串转换为数组
JSON.parse(名称)
删除一个数据
localStorage.removeItem('名称')
清空全部数据
localStorage.clear()
sessionStorage
临时存储，用户关闭页面/浏览器 数据就会丢失
用法跟localStorage没什么区别
自定义属性
获取 （getAttribute）
常用，可以获取自定义也可以获取固有属性
getAttribute('key')
设置 setAttribute(key,value)
setAttribute(key,值)
删除 removeAttribute(key)
removeAttribute(key)
H5建议使用的自定义属性
设置属性
固定写法data开头
data-name="值"
获取属性
标签.dataset.name
通过事件对象获取
event.target.dataset.name
