手记

【金秋打卡】第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的操作

0人推荐
随时随地看视频
慕课网APP