Javascript 常用 DOM 操作

使用 jQuery 时间长了，对 dom 的基本操作难免生疏，总结些常用的，免得使用时捉急。

• DOM 创建
• DOM 查询
  • Element 查询
  • 删除元素
  • class

DOM 创建

document.createElement('div');
document.createTextNode('wxnacy');

DOM 查询

document.querySelector(".myclass");
document.querySelectorAll("div.note, div.alert");

document.getElementById('id');
document.getElementsByClassName('className');
document.getElementsByTagName('td');

Element 查询

// 获取父元素、父节点
var parent = ele.parentElement;
var parent = ele.parentNode;

// 获取子节点，子节点可以是任何一种节点，可以通过nodeType来判断
var nodes = ele.children;

// 查询子元素
var els = ele.getElementsByTagName('td');
var els = ele.getElementsByClassName('highlight');

// 当前元素的第一个/最后一个子元素节点
var el = ele.firstElementChild;
var el = ele.lastElementChild;

// 下一个/上一个兄弟元素节点
var el = ele.nextElementSibling;
var el = ele.previousElementSibling;

删除元素

ele.parentNode.removeChild(ele);

class

element.classList
element.classList.add(c1, c2)
element.classList.remove(c1, c2)
element.classList.contains(className)

• classList

最近更新

Alfred Workflow 命令行帮助工具

最近热读

Go 判断数组中是否包含某个 item

Vim 高级功能 vimgrep 全局搜索文件

办理北京工作居住证的一些细节

Go 语法错误：Non-declaration statement outside function body

Mac 电脑查看字体文件位置

扫码关注公众号，或搜索公众号“温欣爸比” 及时获取我的最新文章

赏

谢谢你请我喝咖啡

支付宝

微信