JavaScript操作DOM元素

简介: JavaScript操作DOM元素

一、DOM:

Document Object Model(文档对象模型)

二、DOM的分类:

1.DOM Core(核心)

2.HTML-DOM

3.CSS-DOM

三、节点属性:

1.lastElementChild:最后一个节点

2.firstElementChild:第一个节点

3.nextElementSibling:下一个节点

4.previousElementSibling:上一个节点

四、节点信息:

1.nodeName:节点名称

2.nodeType:节点类型

3.nodeValue:节点值

五、注意事项:nodeName属性包含某个节点的名称,元素节点的nodeName是标签名称,属性节点的nodeName是属性名称,文本节点的nodeName永远是#text,文档节点的nodeName永远是#document

六、nodeValue是节点值,文本,包含文本。属性,包含属性值。

七、nodeType对应的值:

元素:1

属性:2

文本:3

注释:8

文档:9

八、操作节点的属性:

1.获取节点的属性:

getAttribute(“属性名”)

eg:获取img的图片路径:

doucument.getElementsByTagName(“img”)[0].getAttribute(“src”);

2.设置节点值:

setAttribute(“属性名”,“值”);

eg:改变图片:

doucument.getElementsByTagName(“img”)[0].setAttribute(“src”,“img/1.jpg”);

九、创建和插入节点:

1.createElement():创建节点

2.appendChild():在某个节点的后面追加新的节点。

eg:创建一个按钮追加到main里面

var main = document.getElementById(“main”);

var inp = document.createElement(“input”);

inp.setAttribute(“type”,“button”);

main.appendChild(inp);

十、删除节点:

removeChild():删除指定节点,eg:删除main里面的最后一个节点。

var main = document.getElementById(“main”).lastElementChild;

document.getElementById(“main”).removeChild(main);

十一、style属性:

语法:HTML元素.style.样式属性 = 值。

eg:设置main里面的字体颜色

document.getElementById(“main”).style.color = “red”;

十二、className:

给元素添加class样式

语法:元素.className = “样式名”;

目录
相关文章
|
3天前
|
存储 JavaScript 安全
JS 监听用户页面访问&页面关闭操作并进行数据上报
该文主要讨论了一个网页安全项目的需求和实现,涉及用户访问和离开页面时的数据报告。需求包括首次进入、刷新、新标签页打开、导航切换以及页面关闭时的数据发送。技术要点包括使用Cookie和SessionStorage存储信息,事件监听以及navigator.sendBeacon方法进行数据发送。实现策略包括轮询检测URL变化和在unload事件中触发页面关闭报告。文章还提到了相关流程图和代码示例,总结中强调了数据上报在用户行为分析中的重要性。
|
5天前
|
XML JavaScript 前端开发
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
7 2
|
5天前
|
JavaScript Java
JavaSE精选-JS&DOM
JavaSE精选-JS&DOM
11 1
|
6天前
|
JavaScript Java
JS&DOM技术文章
JS&DOM技术文章
|
6天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
14 1
|
12天前
|
JavaScript 前端开发 架构师
Web Components:自定义元素与Shadow DOM的实践
Web Components是用于创建可重用自定义HTML元素的技术集合,包括Custom Elements、Shadow DOM、HTML Templates和Slots。通过Custom Elements定义新元素,利用Shadow DOM封装私有样式,<slot>元素允许插入内容。自定义元素支持事件处理和属性观察,可复用且样式隔离。它们遵循Web标准,兼容各前端框架,注重性能优化,如懒加载和Shadow DOM优化。
13 0
|
14天前
|
存储 移动开发 JavaScript
jQuery 根据 css 类筛选 DOM 元素的代码
jQuery 根据 css 类筛选 DOM 元素的代码
27 1
|
14天前
|
移动开发 JavaScript 前端开发
jQuery 根据 DOM 元素 attribute 进行过滤的语法
jQuery 根据 DOM 元素 attribute 进行过滤的语法
15 2
|
14天前
|
JavaScript 前端开发
JavaScript 的数组方法 map()、filter() 和 reduce() 提供了函数式编程处理元素的方式
【5月更文挑战第11天】JavaScript 的数组方法 map()、filter() 和 reduce() 提供了函数式编程处理元素的方式。map() 用于创建新数组,其中元素是原数组元素经过指定函数转换后的结果;filter() 则筛选出通过特定条件的元素生成新数组;reduce() 将数组元素累计为单一值。这三个方法使代码更简洁易读,例如:map() 可用于数组元素乘以 2,filter() 用于选取偶数,reduce() 计算数组元素之和。
17 2
|
14天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
16 2