在使用 React 的时候，越发觉得自己 javascript 的基础不牢。
例如，脱离了 jQuery 就不知道怎么操作 DOM node 了。
那就使用 jQuery 不就得了？写一个独立的 React 小组件，然后还要加载依赖 jQuery 是非常恶心的事情, 所以必须修炼使用原生 js 的内功。
树形结构
- document.documentElement 是整棵树的根, 即 html node。
- document.body 对应 body node.
nodeType
每个 DOM node 都有一个 nodeType 属性
- document.ELEMENT_NODE 1
- document.TEXT_NODE 3
- document.COMMENT_NODE 8
实际上还有好多其他的 nodeType，不一一列举, 参考 Node.nodeType
element 与 node 的区别
- 任何 DOM object 均为 node
- 拥有 HTML tag 的 node 才算是 element
即一个 DOM object 一定是一个 node，但不一定是 element。
children 与 childNodes 的区别
children 返回的是 element array.
childNodes 返回的是 node array。
创建 node
text node
var textNode = document.createTextNode('你好，react');
常见的 DOM 操作
归纳一下，常见的 DOM 操作，不外乎
- 查找 Element
- 创建 ELement
- 修改 Element
- 删除 Element
也就是传说中的增删改查工程师的基本修养。
查找 Element
例如，列出一个 div 下面的所有图片地址/邮箱地址
实例，获取豆瓣首页热点内容中的所有图片地址
var section = document.getElementsByClassName('albums')[0];
var images = section.getElementsByTagName('img');
参考
关于作者 🌱
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式