Javascript Dom基本操作

简介: Javascript Dom基本操作

获取节点


1.document

getElementById:

语法:document.getElementById(元素ID)

功能:通过元素ID获取节点

getElementsByName

语法:document.getElementsByName(元素name属性)

功能:通过元素的name属性获取节点

getElementsByTagName

语法:document.getElementsByTagName(元素标签)

功能:通过元素标签获取节点

2.节点指针

firstChild

语法:父节点.firstChild

功能:获取元素的首个子节点

lastChild

语法:父节点.lastChild

功能:获取元素的最后一个子节点

childNodes

语法:父节点.childNodes

功能:获取元素的子节点列表

previousSlibing

语法:兄弟节点.previousSlibing

功能:获取已知节点的前一个节点

parentNode

语法:子节点.parentNode

功能:获取已知节点的父节点


节点操作


1.创建节点

createElement

语法:document.createElement(元素标签)

功能:创建元素节点

createAttribute

语法:document.createAttribute(元素属性)

功能:创建属性节点

createTextNode

语法:document.createTextNode(文本内容)

功能:创建文本节点

2.插入节点

appendChild()

语法:appendChild(所添加的新节点)

功能:向节点的子节点列表的末尾添加新的子节点

insertBefore()

语法:insertBefore(所添加的新节点,已知子节点)

功能:在已知的的子节点前插入一个新的子节点

3.替换节点

replaceChild()

语法:replaceChild(要插入的新元素,将要被替换的老元素)

功能:将某个子节点替换成另一个

4.复制节点

cloneNode

语法:需要被复制的节点.cloneNode(true/false)

功能:创建指定节点的副本

参数:true:复制当前节点及所有子节点

          false:仅复制当前节点

5.删除节点

removeChild

语法:removeChild(要删除的节点)

功能:删除指定的节点


属性操作


  1. 获取属性
    getAttribute
    语法:元素节点.getAttribute(元素属性名)
    功能:获取元素节点中指定属性的属性值
  2. 设置属性
    setAttribute
    语法:元素节点.setAttribute(属性名,属性值)
    功能:创建或改变元素节点的属性
  3. 删除属性
    removeAttribute
    语法:元素节点.removeAttribute(属性名)
    功能:删除指定属性

目录
相关文章
|
2月前
|
JavaScript 前端开发
JavaScript DOM 操作:什么是事件委托(Event Delegation)?有什么优势?
JavaScript DOM 操作:什么是事件委托(Event Delegation)?有什么优势?
39 1
|
2月前
|
JavaScript 前端开发
JavaScript DOM 操作:如何动态创建和插入元素?
JavaScript DOM 操作:如何动态创建和插入元素?
31 1
|
2月前
|
JavaScript 前端开发
JavaScript DOM 操作:如何选中一个 HTML 元素?有哪些方法?
JavaScript DOM 操作:如何选中一个 HTML 元素?有哪些方法?
29 1
|
2月前
|
XML 消息中间件 JavaScript
从0开始学习JavaScript--JavaScript DOM操作与事件处理
在前端开发中,DOM(文档对象模型)是一个至关重要的概念,它为JavaScript提供了一种与HTML和XML文档交互的方法。本文将深入探讨DOM的概念与作用,以及JavaScript与DOM之间的密切关系。
|
2月前
|
XML JavaScript 前端开发
JavaScript DOM 操作:解释一下 DOM 是什么?
JavaScript DOM 操作:解释一下 DOM 是什么?
96 0
|
2月前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下 `innerHTML` 和 `textContent` 的区别。
JavaScript DOM 操作:解释一下 `innerHTML` 和 `textContent` 的区别。
27 1
|
24天前
|
JavaScript 前端开发 API
探索JavaScript事件流:DOM中的神奇旅程
JavaScript中的事件流是一种机制,用于描述和处理事件在DOM树中的传播过程。了解事件流的属性和工作原理对于编写高效的事件处理代码和实现复杂的交互功能至关重要。本文将详细介绍JavaScript事件流的发展流程、属性以及应用场景,并提供一些代码示例和引用资料,帮助读者深入理解并应用这一重要的前端技术。
|
1月前
|
JavaScript 前端开发 容器
JavaScript中的DOM操作
JavaScript中的DOM操作
|
1月前
|
JavaScript 前端开发
JavaScript:DOM节点
JavaScript:DOM节点
12 0
|
1月前
|
存储 JavaScript 前端开发
JavaScript:DOM事件
JavaScript:DOM事件
37 0

相关产品

  • 云迁移中心