JavaScript操作DOM基础教程
"这篇笔记主要介绍了JavaScript中对DOM(文档对象模型)的操作,包括获取HTML元素、节点关系以及节点类型的认识。" 在JavaScript中,DOM(文档对象模型)是HTML或XML文档的一种结构化表示,它允许我们通过编程方式访问和操作页面上的元素。这篇笔记主要围绕以下几个方面展开: 1. 获取HTML元素: - `document.documentElement` 用于获取整个HTML文档的根元素,即`<html>`标签。 - `document.head` 和 `document.body` 分别用来获取文档中的`<head>`和`<body>`元素。此外,也可以通过遍历`documentElement`的子节点来获取它们,例如 `documentElement.firstChild` 和 `documentElement.lastChild`。 2. 节点关系: - `parentNode` 属性返回一个节点的父节点,如 `oHead.parentNode == oHtml` 验证了`<head>`是`<html>`的子节点。 - `previousSibling` 和 `nextSibling` 属性分别返回当前节点的前一个同级节点和后一个同级节点,例如 `oBody.previousSibling == oHead` 检查`<body>`是否紧接在`<head>`之后。 - `ownerDocument` 属性返回一个节点所属的文档对象,如 `oHead.ownerDocument == document` 确认`<head>`属于当前文档。 3. 节点类型: - `nodeType` 属性标识了节点的类型。例如,`oBody.nodeType` 返回1,这代表`<body>`是一个元素节点(Element Node)。不同的节点类型有: - `Node.ELEMENT_NODE` 值为1,表示元素节点。 - `Node.ATTRIBUTE_NODE` 值为2,表示属性节点。 - `Node.TEXT_NODE` 值为3,表示文本节点。 - `Node.DOCUMENT_NODE` 值为9,表示文档节点,通常用于`document`对象。 在实际应用中,这些基础知识可以用来添加、修改或删除HTML元素,实现动态效果和交互功能。例如,`innerHTML`属性允许我们改变元素内部的HTML内容,如`oBody.innerHTML = "ddddddddd1";` 将`<body>`的内容替换为字符串"ddddddddd1"。了解并熟练运用DOM操作是JavaScript开发中不可或缺的技能。
1.访问节点::
访问html元素:var oHtml=document.documentElement;
获取head元素:var oHead=oHtml.firstChild;
获取body元素:var oBody=oHtml.lastChild; 或者 var oBody=document.body;
也可以通过childNodes来做同样的工作:
var oHead=oHtml.childNodes[0] 或者 oHtml.childNodes.item(0);
var oBody=oHtml.childNodes[1] 或者 oHtml.childNodes.item(1);
*********************************************
<html>
<head><title>测试</title></head>
<body>
<p>测试</p>
</body>
<script type="text/javascript">
var oHtml=document.documentElement;
var oHead=oHtml.firstChild;
var oBody=oHtml.lastChild;
//或者 var oBody=document.body;
oBody.innerHTML=("ddddddddd1");
</script>
</html>
********************************************
alert(oHead.parentNode==oHtml); //父亲节点
alert(oBody.previousSibling==oHead);//前节点
alert(oHead.nextSibling==oBody);//下一节点
alert(oHead.ownerDocument==document);//ownerDocument
*********************************************
2.检测节点类型:
通过节点的nodeType属性来检验节点类型:
alert(oBody.nodeType); //输出1
需要注意的是,DOM兼容的浏览器(以FF2.0为例),拥有Node.DOCUMENT_NODE、Node.ELEMENT_NODE等常量。各常量名称与数值对照表如下:
ELEMENT_NODE 1
ATTRIBUTE_NODE 2
TEXT_NODE 3
CDATA_SECTION_NODE 4
ENTITY_REFERENCE_NODE 5
ENTITY_NODE 6
PROCESSING_INSTRCTION_NODE 7
COMMENT_NODE 8
DOCUMENT_NODE 9
DOCUMENT_TYPE_NODE 10
DOCUMENT_FRAGMENT_NODE 11
NOTATION_NODE 12
*********************************************
getElementsByName
是取得页面中标签名属性名为name的标签对象,此处的name是一个变量,具体值根据上下文来确定.标签允许name属性名可以同名,所以用此方法取得的往往是一个集合(数组)
*********************************************
<html>
<head><title>测试</title></head>
<body>
剩余8页未读,继续阅读
- 粉丝: 112
- 资源: 740
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的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二次开发入门:解决升级问题与功能扩展