DOM 增删改查举例

作者: 流光号船长 | 来源:发表于2017-04-17 12:18 被阅读0次

一 什么是DOM

DOM是HTML与JavaScript相互作用的接口,DOM不属于JavaScript,它是浏览器的一部分.使用HTML DOM ,JavaScript可以访问和更改HTML文档的所有元素.

HTML DOM(文档对象模型)

当网页加载时,浏览器会创建一个名为document的一个对象.

该HTML DOM模型构造对象的树形图:

在使用DOM的情况下,我们能用JavaScript做些什么?

  • JavaScript可以更改页面中的所有HTML元素
  • JavaScript可以更改页面中的所有HTML属性
  • JavaScript可以更改页面中的所有CSS样式
  • JavaScript可以删除现有的HTML元素和属性
  • JavaScript可以添加新的HTML元素和属性
  • JavaScript可以对页面中的所有现有HTML事件做出反应
  • JavaScript可以在页面中创建新的HTML事件

二 HTML DOM文档对象

文档对象表示您的网页。
如果要访问HTML页面中的任何元素,则始终始终访问文档对象。

1. 增

方法 功能 用法
createElement(element) 创建元素 用法
appendChild(element) 把创建的元素添加为指定节点最后一个子元素 用法
write(text) 在页面上打印文本 用法
insertBefore(element) 在指定的子节点前面插入新的子节点 用法
createAttribute() 创建 class 属性 用法
createTextNode() 创建文本节点 用法
.classList.add 为 xxx 元素添加 class 用法

2. 删

方法 功能 用法
remove() 删除元素 用法
removeChild() 删除一个元素的子元素 用法

3. 改

方法 功能 用法
cloneNode() 拷贝元素(包括所有属性和值) 用法
replaceChild() 替换子节点 用法
setAttribute() 把指定属性设置或修改为指定的值 用法
.innerHTML 修改元素内容 用法
.attribute 修改元素属性 用法
.style.property=new style 修改元素CSS 用法

4. 查

方法 功能
getElementById() 返回带有指定 ID 的元素
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表 (数组)
getAttribute() 返回指定的属性值
element.childNodes 获取 body 元素的子节点集合 (数组)
getElementsByName() 获取相同名称(name)的元素(数组)
querySelector() 返回文档中匹配指定的选择器组的第一个元素 测试
querySelectorAll() 返回与指定的选择器组匹配的文档中的元素列表

相关文章

  • DOM 增删改查举例

    什么是DOM? 外行看来前端工程师的工作就是改页面(HTML、CSS),写脚本(JavaScript)。当你意识到...

  • DOM 增删改查举例

    节点的增删改查 HTML的每个成分都可以看作是节点(文档节点、元素节点、文本节点、属性节点、注释节点,其中,属性节...

  • DOM 增删改查举例

    一 什么是DOM DOM是HTML与JavaScript相互作用的接口,DOM不属于JavaScript,它是浏览...

  • DOM 的一些增删改查

    以下是JS中DOM节点中增删改查的基本API: 查 增 删 改 学习参考:原生JS中CSS相关API合集

  • mysql的插入语句

    MySQL增删改查之增insert、replace

  • JavaScript DOM元素节点操作方法总结

    对DOM的操作主要是围绕元素节点和属性节点的增删改查。 (1)查:对DOM进行增删改之前,首先要找到对应的元素。具...

  • 前端基础知识复习(三)

    知识点整理来源于网上。详细的介绍推荐直接看API文档。 DOM 功能 对元素的增查删改① 查询某个元素② 查询某个...

  • mysql 用户操作与授权

    创建用户 命令 说明 举例 给用户分配权限 增删改查权限 命令 说明 举例

  • 虚拟DOM(2)

    虚拟DOM的增删改查(粗糙版) 代码如下: html js

  • DOM 增删改查

    什么是DOM 文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它给文档(结构树)提供了一个结构...

网友评论

    本文标题:DOM 增删改查举例

    本文链接:https://www.haomeiwen.com/subject/afjzattx.html