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

相关文章
|
5天前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
19 1
|
8天前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
19 2
|
10天前
|
JSON JavaScript 前端开发
JS的无限可能: 前端 精妙DOM技巧至Node.js的服务端
JS的无限可能: 前端 精妙DOM技巧至Node.js的服务端
|
8天前
|
XML JavaScript 前端开发
哇塞!Web 前端惊现 DOM 元素神操作,一场惊心动魄的网页变革,你准备好了吗?
【8月更文挑战第23天】在Web前端开发中,熟练操作DOM元素至关重要。DOM作为一种编程接口,将HTML/XML文档表示为节点树,便于使用JavaScript访问及修改文档内容与结构。
22 0
|
9天前
|
XML JavaScript 测试技术
Web自动化测试框架(基础篇)--HTML页面元素和DOM对象
本文为Web自动化测试入门指南,介绍了HTML页面元素和DOM对象的基础知识,以及如何使用Python中的Selenium WebDriver进行元素定位、操作和等待机制,旨在帮助初学者理解Web自动化测试中的关键概念和操作技巧。
27 1
|
8天前
|
JavaScript 前端开发 API
前端开发者的救赎:揭秘JQ对象与DOM元素的神秘转换术
【8月更文挑战第23天】在Web前端开发领域,jQuery(简称JQ)作为一款流行的JavaScript库,极大简化了HTML文档遍历、事件处理、动画及Ajax交互等操作。理解和掌握jQuery对象与DOM元素间的转换至关重要。
18 0
|
16天前
|
JavaScript 前端开发
DOM的概念?获取html元素的方法有哪些?
DOM的概念?获取html元素的方法有哪些?
25 0
|
16天前
|
JavaScript Java
分别使用java script和jQuery添加页面元素
分别使用java script和jQuery添加页面元素
18 0
|
16天前
|
JavaScript 前端开发
JavaScript 改变 HTML 元素
JavaScript 改变 HTML 元素
28 0
|
16天前
|
前端开发 JavaScript
JavaScript 获取 HTML 元素方法
JavaScript 获取 HTML 元素方法
25 0