【web】JavaScript——Web APIs笔记小结 dom 样式属性（自定义属性+节点操作部分）
期中考完回来更新了
感觉进度真的好慢T^T，已经摸了快一个月的鱼了qwq！！！
来源：JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts
目录
⑦H5自定义属性
V.节点操作
①节点层级
※※父级节点
※※子节点
※※※※获取所有子节点
※※※※获取第一个孩子和最后一个孩子
❀ firstChild / lastChild
❀ firstElementChild / lastElementChild编辑
❀ children 伪数组 → 实际开发写法
※※※※ 下拉菜单
※※ 兄弟节点
②创建、添加节点
※※ 简单版发布留言案例
※※※※ 我写的
※※※※ 值得一提的小细节
※※※※ pink 的
———————————————以下是第三天—————————————————
③删除节点
※※ 删除留言案例
※※※※我写的
※※※※ pink 的
※※※※ MCD 里的完整介绍
✿ 一些用法样例
④复制节点
⑤动态生成表格
※※ 我写的：
※※※※ 直接套用删除节点案例的模板
※※※※ 综合之前的创建添加和删除写（正确版）
✿ MCD 里的 for…in 解释
※※ pink 的：
⑦H5自定义属性
V.节点操作
①节点层级
利用DOM树可以把节点划分为不同的层级关系，常见的是 父子兄层级关系
※※父级节点
※※子节点
※※※※获取所有子节点
※※※※获取第一个孩子和最后一个孩子
❀ firstChild / lastChild
所以下面这段代码的结果都是输出文本节点 #text
//在body里的部分- 我是li1
- 我是li2
- 我是li3
- 我是li4
- 我是li5
❀ firstElementChild / lastElementChild
所以下面这段代码的结果都是输出元素节点
- 我是li1
- 我是li2
- 我是li3
- 我是li4
- 我是li5
❀ children 伪数组 → 实际开发写法
直接上代码：
- 我是li1
- 我是li2
- 我是li3
- 我是li4
- 我是li5
※※※※ 下拉菜单
这个案例比较简单，所以没有自己写owo，思路是循环绑定事件
Document
※※ 兄弟节点
感觉跟 nextchild 挺像的
代码部分：
//body里的部分我是div我是span
②创建、添加节点
代码截图：
※※ 简单版发布留言案例
※※※※ 我写的
vertical-align忘了的戳这里 → vertical-align（之前写过的博客kkk）
Document
※※※※ 值得一提的小细节
上面的代码跑出来只有一个节点，并且是按insertBefore来的，我原来以为应该有两个节点的，后来查了查资料发现想错了，而且这一块pink讲的时候也没有提到，具体看下图：
※※※※ pink 的
Document
———————————————以下是第三天—————————————————
③删除节点
//body内的代码 - 熊大
- 熊二
- 光头强
※※ 删除留言案例
※※※※我写的
搞了半天没成功。。最后发现原来删除部分一直没在btn绑定的事件里面orz
Document
※※※※ pink 的
主要内容都是一样的，只是样式什么的有点区别
Document
※※※※ MCD 里的完整介绍
完整版戳这里 → MCD的node.removeChild介绍
✿ 一些用法样例
④复制节点
代码截图：
⑤动态生成表格
※※ 我写的：
个人感觉可以有两种写法
PS. 看完视频发现其实好像就一种来着，但是第一种已经写完了orz，所以还是放上来了
※※※※ 直接套用删除节点案例的模板
但是达不到题目要求的 “ 动态 ” 效果，代码：
Document
姓名 科目 成绩 操作 小明 C语言 90 删除 小红 Java 66 删除 小刚 线性代数 78 删除 小丽 汇编语言 70 删除
※※※※ 综合之前的创建添加和删除写（正确版）
看完视频后发现刚开始想简单了qwq
代码：（从
标签开始，前面的都一样） PS. 忘了 for(k in obj) 的小伙伴戳这里 → VI.对象 → 遍历，也可以直接看MCD里的官方解释orz
✿ MCD 里的 for…in 解释
※※ pink 的：
Document
姓名 科目 成绩 操作
不知不觉又万字了orz，感觉主要是代码的功劳hhh，那这一篇就先到这里吧~！
恭喜看到这的小伙伴，你已经完成 JavaScript APIs第二天和第三天的一部分的学习了~！！
内容真的好多啊qwq，以后要更加努力！！
下一篇在这里 (｡･∀･)ﾉﾞ → 还没写完
有用的话可以点赞评论收藏哦！！