JavaScript操作DOM基础教程

需积分: 9 51 浏览量更新于2024-09-11 收藏 8KB TXT 举报

"这篇笔记主要介绍了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>
********************************************

剩余8页未读，继续阅读

ozhy111

粉丝: 114
资源: 740

JavaScript操作DOM基础教程

学习javascript DOM笔记：节点属性和层级结构详解

JavaScript DOM编程艺术：读书笔记与基础解析

JavaScript入门笔记：Dom0、Dom2与Dom3事件详解

树懒_day04.1_javascript_DOM笔记

JavaScript_DOM_编程艺术读书笔记

JavaScript_DOM编程—新版学习笔记.txt

笔记.zip_JavaScript__JavaScript_

javascript DOM笔记 1

JavaScript_notes:JavaScript 笔记

day03_JavaScript预习笔记1

最新资源