【金秋打卡】第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 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦