BCSP-玄子前端开发之JavaScript+jQuery入门CH04_DOM操作

news/2024/12/4 19:32:17/

BCSP-玄子前端开发之JavaScript+jQuery入门CH04_DOM操作

4.4 操作 DOM

DOM:Document Object Model(文档对象模型)

DOM_Core
DOM
HTML-DOM
CSS-DOM

4.5 节点与节点的关系

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a13bkdpQ-1682304656665)(./assets/image-20230422173719655.png)]

4.5.1 节点信息

4.5.2 nodeName:节点名称

  • 元素节点的标签名称
  • 属性节点的属性名称
  • 文本节点的nodeName永远是 #text
  • 文档节点的nodeName永远是 #document

4.5.3 nodeValue:节点值

  • 文本节点包含的文本
  • 属性节点的属性值
  • 对文档节点和元素节点不可用

4.5.4 nodeType:节点类型

节点类型nodeType值
Element (元素)ELEMENT_NODE (1)
Attr (属性)ATTRIBUTE_NODE (2)
Text (文本)TEXT_NODE (3)
Comment (注释)COMMENT_NODE (8)
Document (文档)DOCUMENT_NODE (9)

4.6 访问节点

使用getElement系列方法访问指定节点

  • getElementById()
  • getElementsByName()
  • getElementsByTagName()

4.6.1 node 属性

属性名称描述
parentNode返回节点的父节点
childNodes返回子节点集合,childNodes[i]
firstChild返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点
lastChild返回节点的最后一个子节点
nextSibling返回下一个节点
previousSibling返回上一个节点

格式化文档所添加的换行、回车、缩进等字符构成文本节点,干扰节点访问

<div id="desc"><h2>关注我们</h2><ul><li>新浪微博</li><li>官方微信</li><li>联系我们</li><li>公益基金会</li><li>服务网点</li></ul>
</div>

4.6.2 element 属性

属性名称描述
firstElementChild返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点
lastElementChild返回节点的最后一个子节点
nextElementSibling下一个节点
previousElementSibling上一个节点

4.6.3 兼容写法

oNext = oParent.nextElementSibling || oParent.nextSibling   
oPre = oParent.previousElementSibling || oParent.previousSibling  
oFirst = oParent. firstElementChild  ||  oParent.firstChild   
oLast = oParent.lastElementChild || oParent.lastChild 

4.7 操作节点样式

4.7.1 style 属性

HTML元素.style.样式属性="值"
document.getElementById("titles").style.color="#ff0000"; 
document.getElementById("titles").style.fontSize="25px";
类别属性
背景backgroundColor、backgroundImage、backgroundRepeat
文本font、fontSize、fontWeight、textAlign、textDecoration、color
边距padding、paddingTop 、paddingBottom、paddingLeft、paddingRight
边框border、borderTop、borderBottom、borderLeft、borderRight

JavaScript中,使用CSS样式与在HTML中稍有不同。

例如:JavaScript中访问font-size的写法是fontSize

4.7.2 mouse 事件

名称描述
onclick当用户单击某个对象时调用事件
onmouseover鼠标移到某元素之上
onmouseout鼠标从某元素移开
onmousedown鼠标按钮被按下
onmouseup鼠标按键被松开

4.7.3 className 属性

HTML元素.className="class样式名"
function over() {document.getElementById("cart").className="cartOver";document.getElementById("cartList").className="cartListOver";
}
function out() {document.getElementById("cart").className="cartOut";document.getElementById("cartList").className="cartListOut";
}

4.8 获取元素的样式

HTML元素.style.样式属性;
alert(document.getElementById("cartList").style.display);

只能获取内联样式的属性值

document.defaultView.getComputedStyle(元素,null).属性;
var cartList=document.getElementById("cartList");
alert(document.defaultView.getComputedStyle(cartList, null).display);

不兼容IE6-8

HTML元素. currentStyle.样式属性;
alert(document.getElementById("cartList").currentStyle.display);

IE的用法

function getStyle(obj, attr) {return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
}

浏览器兼容的做法


BCSP-玄子前端开发之JavaScript+jQuery入门CH04_DOM操作


http://www.ppmy.cn/news/50773.html

相关文章

ConcurrentHashMap是如何保证线程安全的

ConcurrentHashMap是如何保证线程安全的 定义和问题解决JDK 1.7实现原理JDK 1.8性能优化总结 定义和问题解决 ConcurrentHashMap相当于HashMap的多线程版本。 它的功能本质上和HashMap没有什么区别&#xff0c;因为HashMap在并发操作的时候会出现各种问题&#xff0c;比如&am…

Spring Boot的基础使用和< artifactId>spring-boot-maven-plugin</ artifactId>爆红的处理

Spring Boot的基础使用和< artifactId>spring-boot-maven-plugin</ artifactId>爆红的处理 Spring Boot概述 微服务概述 微服务Microservices是一种软件架构风格&#xff0c;他是以专注于单一责任与功能的小型功能区块Small Building Blocks 为基础&#xff0c;…

SpringBoot 循环依赖,如何解决?

什么是循环依赖? 循环依赖是指在Spring Boot 应用程序中,两个或多个类之间存在彼此依赖的情况,形成一个循环依赖链。 在这种情况下,当一个类在初始化时需要另一个类的实例,而另一个类又需要第一个类的实例时,就会出现循环依赖问题。这会导致应用程序无法正确地初始化和…

58 openEuler搭建Mariadb数据库服务器-管理数据库

文章目录 58 openEuler搭建Mariadb数据库服务器-管理数据库58.1 创建数据库58.2 查看数据库58.3 选择数据库58.4 删除数据库58.5 备份数据库58.6 恢复数据库 58 openEuler搭建Mariadb数据库服务器-管理数据库 58.1 创建数据库 可以使用CREATE DATABASE语句来创建数据库。 CR…

【Git 入门教程】第一节、什么是Git?

在软件开发中&#xff0c;代码的管理和版本控制非常重要。为了更好地管理代码&#xff0c;需要使用一种有效的工具来保证代码的质量和稳定性。而Git正是这样一种工具。 一、概念 Git是一种分布式版本控制系统&#xff0c;它可以追踪文件的变化&#xff0c;并且可以协同工作。它…

软件测试?月薪20k+?不会自动化测试的我真的很难....

做自动化测试后悔吗&#xff1f; 后悔&#xff0c;真的后悔&#xff01; 后悔没有早点学..... 虽然现在网上到处都在散播35的焦虑&#xff0c;姑且信之&#xff0c;那么反问你&#xff0c;如果你30岁了&#xff0c;那么给你5年&#xff0c;能够在某个领域成为专家呢&#xf…

5个方法,帮助你快速提高团队管理效率

团队中&#xff0c;大家看起来都很忙&#xff0c;但最终交付的结果却总是差强人意。会议那么多&#xff0c;但有效的却很少越管理&#xff0c;但偏偏有时候越管理越乱......相信以上这些问题&#xff0c;很多管理者都有遇到过&#xff0c;团队管理是一个项目中最关键的一环。好…

RocketMQ 5.0 时代,6 张图带你理解 Proxy!

大家好&#xff0c;我是君哥。今天来聊一聊 RocketMQ 5.0 中的 Proxy。 RocketMQ 5.0 为了更好地拥抱云原生&#xff0c;引入了无状态的 Proxy 模块&#xff0c;新的架构图如下&#xff1a; 引入 Proxy 模块后&#xff0c;Proxy 承担了协议适配、权限管理、消息管理等计算功能…