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 = “样式名”;

目录
相关文章
|
4天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。
|
10天前
|
JavaScript 前端开发
js怎么删除html元素
js怎么删除html元素
23 10
|
10天前
|
JavaScript 前端开发
js添加、删除、替换或插入元素。
js添加、删除、替换或插入元素。
8 0
|
12天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
15 0
|
12天前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下浏览器的同源策略。
**同源策略**是浏览器安全基石,它阻止脚本跨不同协议、域名或端口访问资源,防止恶意行为。例如,HTTP页面无法直接用JS获取HTTPS页面内容。**CORS**允许跨域请求,但需服务器配合设置,通过`document.domain`属性可配置,但仍受限于服务器配置。
14 4
|
15天前
|
JavaScript 前端开发
|
编解码 JavaScript 前端开发
盘点JavaScript中那些进阶操作知识(下篇)
盘点JavaScript中那些进阶操作知识(下篇)
156 0
|
编解码 JavaScript 前端开发
盘点JavaScript中那些进阶操作知识(上篇)
盘点JavaScript中那些进阶操作知识(上篇)
146 0
|
2月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
27 0
|
2月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
77 0