JavaScript高级篇之DOM文档,简单封装及调用、动态添加、删除样式（六）资源-CSDN文库

33 浏览量 2020-12-04 10:55:34 上传评论收藏 141KB PDF 举报

http://www.cnblogs.com/TomXu/archive/2012/02/16/2351331.html , 在回来看这里文章,你一定会有更深刻的认识。因为我在这里介绍概念上的东西比较少,看下面的例子,对初学的朋友可能会有些吃力! 1、DOM的架构代码如下: <html> <head> <title>document</title> </head> <body> <h1>CSS Demo</h1> <p>我喜欢美女,特别是高个的美女</p> </body> </html> 这个文档的DOM表示如下图：图片表示一个HTML文档的树. 所有DOM树结构表现为不同种类的No 【JavaScript DOM操作详解】在JavaScript中，DOM（Document Object Model）是HTML或XML文档的抽象表示，它将文档转换为一个可编程的对象模型。通过DOM，我们可以访问和修改页面中的任何元素，包括添加、删除和更新元素的样式。本文将深入讲解DOM的基本概念和常见操作，包括DOM的架构、元素的获取与操作以及动态修改样式。 1. **DOM的架构** DOM将HTML或XML文档视为一棵树形结构，每个HTML标签和文本内容都对应着一个Node对象。在这个例子中： ```html <html> <head> <title>document</title> </head> <body> <h1>CSS Demo</h1> <p>我喜欢美女,特别是高个的美女</p> </body> </html> ``` 对应的DOM树中，`html`是根节点，`head`和`body`是其子节点，`title`、`h1`和`p`则是它们的子节点。Node对象拥有如`firstChild`、`lastChild`、`nextSibling`、`previousSibling`和`parentNode`等属性，用于遍历和操作这些节点。 2. **元素的获取与操作** - `getElementById`: 通过ID获取元素，如`document.getElementById('container')`。 - `getElementsByTagName`: 通过标签名获取元素集合，如`document.getElementsByTagName('li')`。 - `querySelector`和`querySelectorAll`: `querySelector`返回匹配CSS选择器的第一个元素，`querySelectorAll`返回匹配的所有元素。 3. **动态添加、删除和替换元素** - `appendChild`: 在元素末尾添加新子节点。 - `removeChild`: 删除指定的子节点。 - `replaceChild`: 用新的节点替换现有子节点。 - `insertBefore`: 在指定子节点之前插入新节点。 4. **修改元素内容与样式** - `innerHTML`: 获取或设置元素的HTML内容。 - `innerText`或`textContent`: 获取或设置元素的文本内容。 - `style`属性: 直接修改元素的内联样式，如`element.style.backgroundColor = 'red'`。 5. **案例分析** - 示例1：获取元素总数 ```javascript Tools.getElementCount = function(e) { var count = 0; elementTotal(e); document.table.txt.value = "element: " + count; function elementTotal(e) { if (e.nodeType == 1) count++; var children = e.childNodes; for (var i = 0; i < children.length; i++) { elementTotal(children[i]); } } }; ``` - 示例2：将文本全部转换为大写 ```javascript Tools.ModifyElement = function modify(e) { if (e.nodeType == 3) e.data = e.data.toUpperCase(); else { for (var i = e.firstChild; i != null; i = i.nextSibling) { modify(i); } } }; ``` 在实际应用中，你可以通过按钮调用这些函数，例如： ```html <button type="button" onclick="Tools.ModifyElement(document)">全部大写</button> ``` 理解并熟练掌握DOM操作是JavaScript开发中的基础技能，这允许我们创建交互式的网页，并动态地更新页面内容。通过封装这些操作，我们可以创建可重用的函数，使代码更简洁、更易于维护。在实际项目中，结合事件监听、动画效果和AJAX请求，DOM操作成为实现网页动态性的关键。

资源详情

资源评论

资源推荐