原文链接:https://mp.weixin.qq.com/s/QLoTIpVgq5IqqYDW4ZQMKg
1、table的方法
const tableE1=document.querySelector('table');
const headRow=tableE1.createHead().insertRow();
headerRow.insertCell().textContent='Make';
headerRow.insertCell().textContent='Model';
headerRow.insertCell().textContent='Color';
const newRow=tableE1.insertRow();
newRow.insertCell().textContent='Yes';
newRow.insertCell().textContent='No';
newRow.insertCell().textContent='Thank you';
这段代码里完全用不着使用document.createElement()方法
如果你再一个table元素上直接调用.insertRow()方法,它甚至会自动为你插入一个<tbody>元素
2.scrollIntoView()
当页面的URL中包含#something元素时,一旦页面加载,浏览器就会自动滚动至具有这个ID的元素之处。
但如果你在页面加载之后再渲染元素,这项功能就不起作用了
不过可以通过以下方式重新生效
document.querySelector(document.location.hash).scrollIntoView();
3.hidden
你是否曾为了隐藏某个元素而使用过myElement.style.display='none';这种方法呢?(我用过)如果是,以后就不要这么做喽
只需调用myElement.hidden=true,即可实现
4.toggle()
toggle实际上是元素属性上的一个方法。严格来说,这是一种为元素添加或删除某个class的方法,具体做法是myElement.classList.toggle('some-class')
曾经通过if 条件语句为元素添加class,现在要改喽
正确方式是为toggle方法传入第二个参数,如果该参数返回true,则指定的class就会添加至元素上
el.classList.toggle('some-orange-class',theme==='orange')
5.querySelector()
该方法可以使用在任意元素上
6.closest
(未完待续)