原生DOM操作

文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展标志语言的标准编程接口。

获取DOM属性值

1
element.getAttribute('class')

设置DOM样式/属性

1
2
element.style.display = 'none'
element.setAttribute('style','height:100px')

样式选择器

querySelector()该方法返回指定CSS选择器元素集合的第一个子元素 。需要注意的是query选择器是样式选择器,所以提供的字符串不能已数字开头,同时它获取的元素是静态的。

对象位置信息

1
2
// 方法返回元素的大小及其相对于视口的位置。
Element.getBoundingClientRect()

监听事件

1
2
3
window.addEventListener('resize', () => {
console.log(window.clientHeight,window.clientWidth)
})

监听页面滚动

1
2
3
4
5
6
//1
window.addEventListener('scroll', ()=>{});
//2
window.onscroll=()=>{
console.log(document.documentElement.scrollTop)
}

移除自身

1
2
let dom = document.querySelect('#target')
dom.parentNode.removeChild(dom)

获取子节点/元素

1
2
3
4
//子节点 包括文本(空格)节点
document.querySelector('div').childNodes
// 子元素
document.querySelector('div').children

监听CSS3动画事件

1
2
3
document.querySelect('.dom').addEventLister('webkitTranslationEnd',()=>{
console.log('translation end')
})

for循环终止和跳过

break终止指定循环,未设置label时终止上层循环

1
2
3
4
demo:
for (let i = 0; i < 10; i++) {
if (i > 3) break demo
}

continue跳过当前一轮循环继续执行

1
2
3
4
for (let i = 0; i < 10; i++) {
if (i == 3) continue
console.log(i)
}

设置性能计时器

1
2
console.time('xixi')
console.timeEnd('xixi') //xixi: 34144.56494140625ms

获取滚动条高度

1
document.documentElement.scrollTop

滚动到指定高度

1
window.scrollTo(0,10000) //(x,y)

中断循环

1
2
3
4
for(...){
...
if(...) break
}

[object Object]

因为console.log(value)实际上执行了toString()函数,即console.log(toString(value))

1
console.log(JSON.stringify(value))

垃圾回收(GC)

在堆内存中没有指向关系的域就是垃圾,JS有自动清除的能力;消除指向关系,就可以触发垃圾回收机制

1
obj = null

获取元素的样式

dom.style只能获取到元素的内联样式

1
2
3
4
// 获取当前执行样式,第二个参数可以设置元素伪类
window.getComputedStyle(dom,null).width
//获取当前合模型高度(制度属性)
dom.clientHeight

offset/client/scroll

client 获取内容区尺寸(只读)
offset 获取盒模型尺寸
offsetParent 获取最近定位父元素
offsetLeft 距最近定位父元素的偏移量
scroll 获取包含滚动区域的尺寸
scrollLeft 获取滚动条偏移量

检测滚动条到底

1
2
3
4
document.onscroll = () => {
if (document.documentElement.scrollHeight - document.documentElement.scrollTop == document.documentElement.clientHeight)
console.log('到底了')
}

原生取消事件冒泡

1
2
3
4
function(e){
//...
e.cancleBubble = true
}

利用冒泡进行事件父级委托可以提高性能

监听组合键事件

1
2
3
document.onkeypress=(e)=>{
if(e.code && e.ctrlKey) console.log('ctrl组合键')
}

BOM 对象

windowLocationHistoryScreenNavigater

获取 URL 参数部分

1
location.search // ?uid=xixi

URL编码

1
2
3
4
// 编码
let str = encodeURIComponent('嘻嘻嘻')
// 解码
let str = decodeURIComponent('%E5%98%BB%E5%98%BB%E5%98%BB')

必须加分号的情况

( [ \开头的语法

回车键

1
2
3
4
enter(e) {
console.log(e.keyCode);
if (e.keyCode === 13) this.search()
}

监听元素出现于视窗

1
2
3
4
5
6
7
let io = new IntersectionObserver(
entries => {
console.log('出现', entries, entries[0].isIntersecting);
if (entries[0].isIntersecting) io.unobserve(dom)
}
);
io.observe(document.querySelector('#link'));