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 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
4天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
10 2
|
4天前
|
JavaScript 前端开发 安全
javascript操作DOM的方法
javascript操作DOM的方法
14 0
|
4天前
|
JavaScript 前端开发 容器
js操作dom元素
js操作dom元素
16 0
|
4天前
|
前端开发 JavaScript 数据安全/隐私保护
前端javascript的DOM对象操作技巧,全场景解析(二)
前端javascript的DOM对象操作技巧,全场景解析(二)
|
4天前
|
移动开发 缓存 JavaScript
前端javascript的DOM对象操作技巧,全场景解析(一)
前端javascript的DOM对象操作技巧,全场景解析(一)
|
4天前
|
JavaScript 前端开发
JavaScript DOM 文档对象模型(获取、改变html元素)
JavaScript DOM 文档对象模型(获取、改变html元素)
|
4天前
|
JavaScript
js_操作dom(委托和冒泡事件)
js_操作dom(委托和冒泡事件)
16 0
|
4天前
|
移动开发 JavaScript 前端开发
webgl学习笔记3_javascript的HTML DOM
webgl学习笔记3_javascript的HTML DOM
19 0
webgl学习笔记3_javascript的HTML DOM
|
4天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。