【金秋打卡】第7天 学习JS —— Dom操作补充
标签：
JavaScript
课程名称：JavaScript进阶篇
课程章节：getElementsByName方法、getElementsByTagName方法
课程讲师：慕课官方号
课程内容：
节点获取器
// 通过节点的id属性值来获取（返回一个节点
document.getElementById('xxx');
// 通过节点的name属性值来获取（返回节点列表
document.getElementsByName('xxx');
// 通过节点的标签名来获取（返回节点列表
document.getElementsByTagName('xxx')
获取/设置节点的属性
Node是指使用节点获取器获取的节点
Node.getAttribute(属性名);
Node.setAttribute(属性名, 属性值);
节点属性
| 属性 | 返回值类型 | 描述 |
|---|---|---|
| nodeName | Sting | 节点名字 |
| nodetype | Integer | 节点类型 1 元素 2 属性 3 文本 8 注释 9 文档 |
| nodeValue | String | 节点当前值 |
遍历节点
| 属性 | 描述 |
|---|---|
| childNodes | 返回数组，由给定节点的子节点构成 |
| firstChild | 返回第一个子节点 |
| lastChild | 返回最后一个子节点 |
| parentNode | 返回给定节点的父节点 |
| nextSibling | 返回给定节点的下一个节点（同级） |
| previousSibling | 返回给定节点的上一个节点（同级） |
DOM操作方法
前两个是document方法
| 方法 | 描述 |
|---|---|
| createElement(element) | 创建新的元素节点 |
| createTextNode | 创建一个包含指定文本的新文本节点 |
| Node.appendChild(newNode) | 在Node的子节点中，把newNode节点添加到最后 |
| Node.insertBefore(newNode, node) | 在Node的子节点中，将newNode节点插入到node子节点的前面 |
| Node.removeChild(node) | 在Node的子节点中，删除node节点 |
| Node.replaceChild(newNode, oldNode) | 在Node的子节点中，把oldNode节点替换成newNode节点 |
课程收获
学习到了js中操作DOM的整个流程，获取节点、增删改查节点，以及document和node的操作
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦