【金秋打卡】第7天 学习JS —— Dom操作补充

课程名称：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的操作