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

目录
相关文章
|
19天前
|
JavaScript 前端开发
js之DOM 文档对象模型
js之DOM 文档对象模型
11 1
js之DOM 文档对象模型
|
5天前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
20 1
|
10天前
|
JSON JavaScript 前端开发
JS的无限可能: 前端 精妙DOM技巧至Node.js的服务端
JS的无限可能: 前端 精妙DOM技巧至Node.js的服务端
|
20天前
|
XML JavaScript 前端开发
JavaScript中的DOM解析器DOMParser api的讲解
`DOMParser`能将XML或HTML源码字符串解析成DOM `Document`。通过`new DOMParser()`创建实例,使用`.parseFromString(string, type)`方法进行解析,其中`string`为待解析的字符串,`type`指定解析类型如`text/html`或`text/xml`等,返回一个`Document`对象。例如,可解析包含`<p>666</p>`的字符串并获取其文本内容`666`。
34 1
|
16天前
|
JavaScript 前端开发
js之DOM 文档对象模型
js之DOM 文档对象模型
|
19天前
|
JavaScript 前端开发 容器
js之dom学习
js之dom学习
22 0
|
3月前
|
JavaScript 前端开发 UED
JavaScript基础-DOM操作:查找、创建、修改
【6月更文挑战第12天】本文介绍了DOM基础,包括查找元素(getElementById、getElementsByClassName等)、创建新节点(createElement、createTextNode)和修改节点(innerText、innerHTML、setAttribute等)。强调了易错点,如ID唯一性、性能考量和安全问题,并提供了代码示例。熟练掌握DOM操作对前端开发至关重要,但应注意性能优化,适时使用框架或库。
JavaScript基础-DOM操作:查找、创建、修改
|
2月前
|
JavaScript
js HTML字符串转DOM节点,DOM节点转HTML字符串
js HTML字符串转DOM节点,DOM节点转HTML字符串
27 2
|
3月前
|
JavaScript 前端开发 算法
虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。
【6月更文挑战第27天】虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。当状态改变,React不直接修改DOM,而是先构建新的虚拟DOM树。通过 diff 算法比较新旧树,找到最小变更,仅更新必要部分,提高性能,避免频繁DOM操作。虚拟DOM还支持跨平台应用,如React Native。它优化了更新流程,简化开发,并提升了用户体验。
28 1
|
3月前
|
JavaScript 前端开发 安全
【JavaScript 】DOM操作快速入门
【JavaScript 】DOM操作快速入门
34 2