博客
关于我
Python学习 Day31 DOM
阅读量:82 次
发布时间:2019-02-26

本文共 1097 字,大约阅读时间需要 3 分钟。

DOM

一、节点树

节点树是网页中所有标签之间的关系模型,DOM即文档对象模型是JS语言中内置的document对象,用于操作节点树。通过DOM可以对网页中的标签进行各种操作,如修改样式、设置属性、改变文本内容等。

DOM的核心是通过document对象操作节点树,常用属性包括documentElement、head、title、body等。例如,documentElement可以获取整个网页的根节点,head获取头标签,title获取网页标题,body获取网页主体。

DOM方法提供了丰富的操作节点的功能。其中,最常用的是getElementById方法,通过标签的id属性快速获取特定标签。需要注意的是,JS中标签是引用类型,不能直接用==或===比较,需用===比较。

二、DOM操作

DOM操作包括获取节点、设置属性、修改文本、调整样式等。获取节点可以通过点语法或方法如getElementById实现。设置属性和修改文本需要注意:表单元素(如input)用value属性存储文本,非表单元素(如div、span)用innerHTML属性。

样式操作是DOM的重要应用之一。样式可以通过行内样式、内部样式或外部样式实现。JS通过点语法可以直接修改行内样式属性,例如设置color、backgroundColor等。注意行内样式属性需用驼峰写法(如backgroundColor、fontSize)。

三、操作节点属性

通过DOM方法可以获取任意节点,进而操作其属性、文本和样式。点语法是操作属性和文本的常用手段。表单元素用value属性存储文本,非表单元素用innerHTML属性。样式操作需通过行内样式属性进行,点语法直接修改即可。

四、操作节点文本

文本操作分为两种情况:表单元素和非表单元素。表单元素(如input)用value属性存储文本,非表单元素(如div、span)用innerHTML属性。JS通过点语法可以获取和修改文本内容。示例:input.value = '新文本';div.innerHTML = '修改后的内容';

五、操作节点样式

样式操作通过行内样式实现。JS点语法可直接修改节点的行内样式属性。例如,div.style.width = '200px';div.style.backgroundColor = 'blueviolet';注意行内样式属性需用驼峰写法(如backgroundColor、fontSize)。

需要注意的是,JS操作行内样式时会覆盖现有的样式属性,需谨慎使用。建议在样式修改前,先获取当前样式状态,以确保操作后效果符合预期。

转载地址:http://drsz.baihongyu.com/

你可能感兴趣的文章
mysql /*! 50100 ... */ 条件编译
查看>>
mudbox卸载/完美解决安装失败/如何彻底卸载清除干净mudbox各种残留注册表和文件的方法...
查看>>
mysql 1264_关于mysql 出现 1264 Out of range value for column 错误的解决办法
查看>>
mysql 1593_Linux高可用(HA)之MySQL主从复制中出现1593错误码的低级错误
查看>>
mysql 5.6 修改端口_mysql5.6.24怎么修改端口号
查看>>
MySQL 8.0 恢复孤立文件每表ibd文件
查看>>
MySQL 8.0开始Group by不再排序
查看>>
mysql ansi nulls_SET ANSI_NULLS ON SET QUOTED_IDENTIFIER ON 什么意思
查看>>
multi swiper bug solution
查看>>
MySQL Binlog 日志监听与 Spring 集成实战
查看>>
MySQL binlog三种模式
查看>>
multi-angle cosine and sines
查看>>
Mysql Can't connect to MySQL server
查看>>
mysql case when 乱码_Mysql CASE WHEN 用法
查看>>
Multicast1
查看>>
mysql client library_MySQL数据库之zabbix3.x安装出现“configure: error: Not found mysqlclient library”的解决办法...
查看>>
MySQL Cluster 7.0.36 发布
查看>>
Multimodal Unsupervised Image-to-Image Translation多通道无监督图像翻译
查看>>
MySQL Cluster与MGR集群实战
查看>>
multipart/form-data与application/octet-stream的区别、application/x-www-form-urlencoded
查看>>