JavaScript DOM操作详解:创建、插入与删除元素
"这篇笔记主要介绍了JavaScript操作DOM(文档对象模型)的一些高级技巧,包括创建、插入、删除和显示元素,以及Node接口的相关API。适合移动开发初学者学习和巩固DOM知识。" 在JavaScript中,DOM是网页内容的结构化表示,允许我们通过编程方式对HTML或XML文档进行修改。本篇笔记主要涵盖了以下知识点: 1. 创建HTML元素 - 使用`document.createElement()`方法可以创建新的HTML元素,例如`createElement("div")`将创建一个`<div>`元素。 - `setAttribute()`方法用于设置新创建元素的属性,例如`setAttribute("class", "myClass")`将设置类名属性。 - `innerHTML`属性则用于设置或获取元素内部的HTML内容。 2. 插入元素 - 通过`getElementsByTagName()`方法可以获取具有特定标签的所有元素,然后使用`appendChild()`将新创建的元素添加到它们的子节点列表中。 - 除了使用标签名选择器外,还可以直接使用`document.body.appendChild()`将元素添加到`<body>`标签内。 3. 删除元素 - `removeChild()`方法用于删除指定的子节点。需要传入要删除的元素作为参数。 - `previousSibling`和`nextSibling`属性可以帮助找到相邻的元素,以便进行删除操作。 - `insertBefore()`方法可以将一个节点插入到另一个节点之前,实现元素位置的调整。 4. 显示元素 - `window.showModalDialog()`函数用于打开模态对话框,`sURL`参数指定对话框要显示的URL,`vArguments`参数传递给对话框的数据,`sFeatures`参数定义对话框的特性,如大小、位置等。 5. Node接口的常用API - `innerHTML`:读写元素的HTML内容。 - `appendChild()`:将新节点添加到父节点的子节点末尾。 - `createTextNode()`:创建一个新的文本节点。 - `insertBefore()`:在已有的子节点前插入新节点。 - `removeChild()`:从父节点移除子节点。 - `firstChild`:获取节点的第一个子节点。 - `lastChild`:获取节点的最后一个子节点。 - `nextSibling`:获取节点的下一个兄弟节点。 - `previousSibling`:获取节点的上一个兄弟节点。 - `parentNode`:获取节点的父节点。 学习这些高级DOM操作对于任何JavaScript开发者来说都是至关重要的,特别是在进行网页动态效果处理、交互设计以及前端数据绑定时。熟练掌握DOM操作能够帮助你更高效地更新和控制页面内容,提升用户体验。
day04_JavaScript_DOM笔记
1.创建新元素节点
1.1.创建<div>元素节点
从创建新节点,让程序从document->html->body & head
createElement("div");
setAttribute(); innerHTML
1.2.将<div>节点的值传递
1.通过标签
document.getElementsByTagName.appenfChild(divElement);
2.通过body
document.body.appendChild(divElement);
2.新元素节点的属性
2.1.创建文本节点
var divElement = document.createElement("div");
var textElement = document.createTextNode("...");
2.2.将文本节点传递到元素节点中
插入:父节点.appendChild(子节点);
插入:父节点.insertBefore(新子节点,插的子节点);
删除:父节点.removeChild(字节点);
previousSibling:返回一个给定节点的上一个兄弟节点
2.3.显示弹出窗口
语法:
vReturnValue = window . showModalDialog ( sURL,
vArguments , sFeatures )
参数说明:
sURL--必选参数,用来指定对话框要显示的文档的URL。
vArguments--可选参数,用来向对话框传递参数。传递的参数类 型不限,包括数组等。对话框通window.dialogArguments来取得 传递进来的参数。
sFeatures--可选参数,用来描述对话框的外观等信息,可以使用一个或 几个,用分号“;”隔开。
3.Node接口的API(续)
下载后可阅读完整内容,剩余1页未读,立即下载
- 粉丝: 0
- 资源: 35
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- C++标准程序库:权威指南
- Java解惑:奇数判断误区与改进方法
- C++编程必读:20种设计模式详解与实战
- LM3S8962微控制器数据手册
- 51单片机C语言实战教程:从入门到精通
- Spring3.0权威指南:JavaEE6实战
- Win32多线程程序设计详解
- Lucene2.9.1开发全攻略:从环境配置到索引创建
- 内存虚拟硬盘技术:提升电脑速度的秘密武器
- Java操作数据库:保存与显示图片到数据库及页面
- ISO14001:2004环境管理体系要求详解
- ShopExV4.8二次开发详解
- 企业形象与产品推广一站式网站建设技术方案揭秘
- Shopex二次开发:触发器与控制器重定向技术详解
- FPGA开发实战指南:创新设计与进阶技巧
- ShopExV4.8二次开发入门:解决升级问题与功能扩展