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(属性名)
    功能:删除指定属性

目录
相关文章
|
4月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
3月前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
3月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
93 5
|
3月前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
4月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
140 4
|
5月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
38 5
|
5月前
|
JavaScript 前端开发 索引
你可能没有听说过 js中的 DOM操作还有这个: HTMLCollection 和 NodeList
该文章详细解释了JavaScript中HTMLCollection和NodeList这两种DOM集合类型的特性、使用方法及其区别,并通过实例代码展示了如何操作这两种集合来选取和遍历DOM元素。
|
5月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 集合(Collection)
JavaScript HTML DOM 集合(Collection)
59 4
|
5月前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
37 5
|
5月前
|
JavaScript 前端开发
JavaScript HTML DOM - 改变CSS
JavaScript HTML DOM - 改变CSS
37 4