DOM编程实战:增删改查与节点操作详解
本篇笔记主要聚焦于DOM(Document Object Model)编程的相关操作,DOM是HTML和XML文档的标准对象模型,用于处理网页的结构、内容和样式。以下是关于DOM编程中几个关键知识点的详细说明: 1. **系统函数使用**: - `escape([参数])` 和 `unescape([参数])` 是JavaScript中的内置函数,前者将字符转换为通用的Unicode编码,后者则相反,将Unicode编码解码回GBK编码。这些函数常用于处理字符串中可能包含的特殊字符,以便于在网络传输或存储时保持数据的原始格式。 2. **数值解析函数**: - `parseInt([参数])` 和 `parseFloat([参数])` 分别用于解析整数和浮点数。`parseInt()`会忽略非数字字符,如果遇到非数字字符会停止解析;`parseFloat()`会解析整个字符串,直到遇到非数字字符为止。 3. **数值判断函数**: - `isNaN()` 检测一个变量是否为非数字,包括`NaN`(Not-a-Number)值。`isFinite([参数])` 则用于检查一个数值是否为有限的,即不是正负无穷大。 4. **执行代码片段**: - `eval(字符串)` 可以执行一个JavaScript代码片段,但其存在安全风险,应谨慎使用,尤其是在用户输入内容可能导致注入攻击的情况下。 5. **数组操作**: - JavaScript提供两种创建数组的方式:`var arr=[]` 或 `var arr=new Array()`。数组的元素可以通过索引访问,如`arr[0]`,也可以通过键名访问,如`arr['index']`。 6. **对象操作**: - 对象的创建可以使用`var obj={属性名:属性值}` 或 `var obj=new object()`。访问对象属性有多种方式:`obj.属性`、`obj['属性']`。遍历对象通常使用`for...in`循环,注意不要直接使用`obj.属性`,因为可能会遍历到原型链上的属性。 7. **DOM操作**: - 要控制页面的动态效果,主要通过`document`对象,它是整个文档的根节点。`style`属性用于修改元素的CSS样式,例如设置背景颜色为红色的语法是`element.style.color='red'`。 8. **节点查找与删除**: - DOM查找遵循从大到小的顺序,有时可能需要考虑元素的具体层级。节点删除时,通过`delete`操作符移除对象的属性,例如`delete element.style.color`。 9. **节点控制与CSS应用**: - DOM节点可以用来控制元素的显示、隐藏、位置等属性,通过修改style对象的属性值来实现。对于复杂的CSS样式调整,DOM提供了更丰富的接口。 这篇笔记深入介绍了DOM编程的基础操作,包括字符串处理、数值解析、对象与数组的管理、以及如何通过DOM来动态操控网页元素的样式和内容。这对于前端开发者理解和应用DOM技术,实现网页动态交互至关重要。
js常用的系统函数:
1,escape([参数]),把字符转成通用的unicode编码。
2,unescape([参数]),把unicode编码转换成GBK编码。
3,parseInt([参数]),把字符串的前缀部分分析成整形数字。如果从第一位开始就不是数字,
则返回NaN,如果是浮点数,则舍弃小数点后面的数字。
4,parseFloat([参数]),把参数转化成浮点型。
5,isNaN(),用来判断某个变量是否为非数字,NaN代表非数字,是一个特殊变量,为NaN。专门用来判断parseInt(),parseFloat().的返回值。
6,isFinite([参数]) 用来判断一个数是否为有限的,相对于正负无穷来说。
7,eval(字符串) ,执行一段js代码。
js创建数组:
var a = [];
var a = new Array();
js对象的创建:
var a = {属性名:属性值};
var a = new object();
调用对象属性的方式:
对象.属性
对象['属性'];
对象的遍历:for in
for(s in 对象 )
注意:在 for in结构中,遍历到的属性不能用对象.属性的方法来调用
还要注意的是在for in中遍历时不用加属性的引号。
例:对象[s];而不用,对象['s'];
节点的删除:删除对象的属性:delete 对象.属性;
属性的修改:所有的css属性都可以通过style来修改。
***********************************************
*---------------js操作DOM---------------------*
***********************************************
DOM节点控制页面动态效果-------〉<关键字、document>
所有的元素都有一个属性或者子对象-------〉style对象
用DOM节点修改元素属性:所有的元素都可以通过style--css来控制,格式:元素对象.style.属性=‘属性值’。
例:通过DOM查找设置一个元素背景色为红色---〉元素对象.style.color=‘red’
DOM节点查找:
由大到小来寻找,个别情况可能由字到父。
剩余9页未读,继续阅读
- 粉丝: 0
- 资源: 9
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 李兴华Java基础教程:从入门到精通
- U盘与硬盘启动安装教程:从菜鸟到专家
- C++面试宝典:动态内存管理与继承解析
- C++ STL源码深度解析:专家级剖析与关键技术
- C/C++调用DOS命令实战指南
- 神经网络补偿的多传感器航迹融合技术
- GIS中的大地坐标系与椭球体解析
- 海思Hi3515 H.264编解码处理器用户手册
- Oracle基础练习题与解答
- 谷歌地球3D建筑筛选新流程详解
- CFO与CIO携手:数据管理与企业增值的战略
- Eclipse IDE基础教程:从入门到精通
- Shell脚本专家宝典:全面学习与资源指南
- Tomcat安装指南:附带JDK配置步骤
- NA3003A电子水准仪数据格式解析与转换研究
- 自动化专业英语词汇精华:必备术语集锦