麋鹿鲁哟 麋鹿鲁哟
首页
  • 前端文章

    • JavaScript
    • Vue
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《TypeScript 从零实现 axios》
    • 小程序笔记
    • JavaScript 基础
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 面试题库

    • HTML
    • CSS
    • jQuery
    • Vue
    • 零碎
  • 面试心得

    • 杂言碎语
  • 摘抄收录

    • ☆ 励志鸡汤
    • ❀ 人间烟火
    • ☣ 万物沦丧
    • ✌ 关掉烦恼
    • ✲ 小酒馆
  • 读书笔记

    • 《小狗钱钱》
    • 《穷爸爸富爸爸》
    • 《聪明人使用方格笔记本》
  • 学习
  • 面试
  • 心情杂货
  • 友情链接
关于
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub

麋鹿鲁哟

前端小菜鸡(✪ω✪)
首页
  • 前端文章

    • JavaScript
    • Vue
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《TypeScript 从零实现 axios》
    • 小程序笔记
    • JavaScript 基础
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 面试题库

    • HTML
    • CSS
    • jQuery
    • Vue
    • 零碎
  • 面试心得

    • 杂言碎语
  • 摘抄收录

    • ☆ 励志鸡汤
    • ❀ 人间烟火
    • ☣ 万物沦丧
    • ✌ 关掉烦恼
    • ✲ 小酒馆
  • 读书笔记

    • 《小狗钱钱》
    • 《穷爸爸富爸爸》
    • 《聪明人使用方格笔记本》
  • 学习
  • 面试
  • 心情杂货
  • 友情链接
关于
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub
  • 简介
  • 变量
  • 数据类型
  • 运算符
  • 流程语句
  • 数组
  • 函数
  • 字符串函数
  • 正则表达式
  • DOM 基本操作
    • 0. DOM
    • 1. 获取节点
      • document
      • 节点指针
    • 2. 节点操作
      • 创建节点
      • 插入节点
      • 替换节点
      • 复制节点
      • 删除节点
    • 3. 属性操作
      • 获取属性
      • 设置属性
      • 删除属性
    • 4. 文本操作
  • Window 对象
  • JS 对象
  • JSON
  • Cookie
  • JavaScript 基础
麋鹿鲁哟
2020-07-20

DOM 基本操作

# 0. DOM

通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。

HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

# 1. 获取节点

# document

编码 语法
getElementById document.getElementById(元素ID)
getElementByName document.getElementByName(元素name)
getElementByTagName document.getElementByTagName(元素标签)

# 节点指针

编码 语法 功能
firstChild 父节点.firstChild 获取元素的首个子节点
lastChild 父节点.lastChild 获取元素的最后一个子节点
childNodes 父节点.childNodes 获取元素的子节点列表
previousSibling 兄弟节点.previousSibling 获取已知节点的前一个节点
nextSibling 兄弟节点.nextSibling 获取已知节点的后一个节点
parentNode 子节点.parentNode 获取已知节点的父节点

# 2. 节点操作

# 创建节点

编码 语法 功能
createElement document.createElement(元素标签) 创建元素节点
createAttribute document.createAttribute(元素属性) 创建属性节点
createTextNode document.createTextNode(文本内容) 创建文本节点

# 插入节点

编码 语法 功能
appendChild appendChild(所添加的新节点) 向节点的子节点列表的末尾添加新的子节点
insertBefore insertBefore(所要添加的新节点,已知子节点) 在已知的子节点前插入一个新的子节点

# 替换节点

编码 语法 功能
replaceChild replaceChild(要插入的新元素,将被替换的老元素) 将某个子节点替换为另一个

# 复制节点

编码 语法 功能
choneNode 需要被复制的节点.cloneNode(true/false) 创建指定节点的副本

true :复制当前节点及其所有子节点
false:仅复制当前节点

# 删除节点

编码 语法 功能
removeChild removeChild(要删除的节点) 删除指定的节点

# 3. 属性操作

# 获取属性

编码 语法 功能
getAttribute 元素节点.getAttribute(元素属性名) 获取元素节点中指定属性的属性值

# 设置属性

编码 语法 功能
setAttribute 元素节点.setAttribute(属性名,属性值) 创建或改变元素节点的属性

# 删除属性

编码 语法 功能
removeAttribute 元素节点.removeAttribute(属性名) 删除元素中的指定属性

# 4. 文本操作

编码 功能
insertData(offset,String) 从offset指定的位置插入string
appendData(string) 将string插入到文本节点的末尾处
deleteDate(offset,count) 从offset起删除count个字符
replaceData(off,count,string) 从off将count个字符用string替代
splitData(offset) 从offset起将文本节点分成两个节点
substring(offset,count) 返回由offset起的count个节点
编辑
上次更新: 2021/04/12, 9:04:00
正则表达式
Window 对象

← 正则表达式 Window 对象 →

最近更新
01
《聪明人使用方格笔记本》
07-28
02
《穷爸爸富爸爸》
07-28
03
《小狗钱钱》
07-28
更多文章>
Theme by Vdoing | Copyright © 2019-2023 麋鹿鲁哟 | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式