`

脚本化文档DOM之二

 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
#d1{width:500px;  }
#d2,#d3,#d4,#d5,#d6,#d7,#d8,#d9,d10
{
	width:500px;
	height:30px;
	background-color:#dedede;	
}
.ss
{
	border:1px solid red;	
}
</style>
<body>
<div id="d1">
	<div id="d2">1text</div>
    <div id="d3">2</div>
    <div id="d4">3</div>
    <div id="d5">4</div>
    <div id="d6">5</div>
    <div id="d7">6</div>
    <div id="d8">7</div>
</div>
<script>
var d1 = document.getElementById("d1");
document.write("d1的个数IE支持d1.childNodes.length：" + d1.childNodes.length+"<br/>");
document.write("d1的个数Firefox chrome opera safari支持d1.childElementCount：" + d1.childElementCount+"<br/>");
document.write("d1的第一个元素的内容IE：" + d1.firstChild.innerText+"<br/>");
document.write("d1的第一个元素的内容Firefox chrome opera safari：" + d1.firstElementChild.textContent+"<br/>");
document.write("d1的最后一个元素的内容IE：" + d1.lastChild.innerText+"<br/>");
document.write("d1的最后一个元素的内容Firefox chrome opera safari：" + d1.lastElementChild.textContent+"<br/>");
document.write("d1的第三个元素的内容IE：" + d1.childNodes[2].innerText+"<br/>");
document.write("d1的第三个元素的内容Firefox chrome opera safari：" + d1.children[0].textContent+"<br/>");
document.write("以上Webkit o不兼容<br/>");
document.write("d1的第三个元素的下一个元素的内容：" + d1.childNodes[2].nextSibling.innerText+"<br/>");
document.write("d1的第三个元素的上一个元素的内容：" + d1.childNodes[2].previousSibling.innerText+"<br/>");
document.write("d1的第三个元素的下一个元素的内容：" + d1.childNodes[2].nextSibling.textContent+"<br/>");
document.write("d1的第三个元素的上一个元素的内容：" + d1.childNodes[2].previousSibling.textContent+"<br/>");
document.write("d1的第一个元素的名称：" + d1.nodeName+"<br/>");
document.write("d1的第一个元素的类型：" + d1.nodeType+"<br/>");
document.write("以上FF不兼容<br/>");
document.write("d1添加属性：" + d1.setAttribute("class","ss")+"<br/>");
document.write("d1获取属性：" + d1.getAttribute("class")+"<br/>");
var d9 = document.createElement("div");
d9.className="d9";
d9.innerHTML="8";
d9.setAttribute("id","d9");
d9.style.fontSize="20px";
d9.style.backgroundColor="red";
var d10 = document.createElement("div");
d10.setAttribute("id","d10");
d10.innerHTML="9";
document.write("d1添加一个元素：" + d1.appendChild(d9)+"<br/>");
document.write("d1替换一个元素：" + d1.replaceChild(d10,d9)+"<br/>");
document.write("d1删除一个元素：" + d1.removeChild(d10)+"<br/>");


</script>
总结：
IE支持的API                          FF Safari Opera Chrome支持
Element.childNodes.length           Element.children.length(支持所有浏览器百标准) or Element.childElementCount
Element.firstChild                  Element.firstElementChild
Element.lastChild	                Element.firstElementChild
Element.innerText(只有FF不支持)      Element.textContent
所有浏览器都技术的API
innerHTML            
Element.childNodes[0] 
Element.nextSibling
Element.previousSibling
Element.nodeName
Element.nodeType
document.createElement("元素");
setAttribute()
getAttribute()
appendChild()
replaceChild("新创建的元素对象","替换的元素对象")
removeChild()


</body>
</html>

 

分享到：
| 脚本化文档DOM之一
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript脚本化文档

    Microsoft的IE4引入了一个更全面的DOM，允许对所有元素进行访问和脚本化，甚至允许动态修改文档内容。这两种遗留的DOM在现今的浏览器中仍被保留，尤其是Netscape的0级别DOM，它是W3C标准的一部分。 随着Internet ...

    基于Jscript脚本技术的SVG文档的DOM解析

    综上所述，基于Jscript脚本技术的SVG文档DOM解析技术为动态图形的实现提供了强大的支持。通过结合DOM接口和Jscript脚本，可以高效地操纵SVG文档，实现实时更新和动态展示的功能。这种方法不仅适用于网络化测试系统的...

    DOM4J帮助文档及使用教程

    2. **安装与配置**：指导用户如何将DOM4J添加到Java项目中，包括Maven依赖、Gradle构建脚本或者直接添加JAR文件。 3. **基本概念**：介绍DOM4J中的核心类，如`Document`（文档对象）、`Element`（元素）、`...

    DOM文档对象中文手册

    DOM（Document Object Model）是W3C组织定义的一种标准，它是一种与语言无关的接口，允许程序和脚本动态地访问和更新HTML、XML以及SVG等文档的内容、结构和样式。DOM将整个文档构建成一个树形结构，每个节点代表文档...

    DOM中文文档

    DOM是一种与语言无关的接口，允许程序员和脚本语言（如JavaScript）通过统一的方式来访问和操作文档中的元素、属性和文本。中文DOM文档则为中文使用者提供了更加易懂的解释和示例，以便更好地理解和应用DOM技术。 *...

    非常实用的DOM文档对象中文手册

    2. **DOM树**：在DOM中，文档被解析成一棵树，根节点是整个文档，子节点可以是元素、文本、注释或其他类型的节点。通过遍历这棵树，可以访问到文档的每一个部分。 3. **元素节点**：元素节点是DOM树中最常见的节点...

    js dom 文档

    它允许开发者在服务器端执行JavaScript，模拟浏览器环境进行DOM操作，这对于测试、爬虫和自动化脚本编写非常有用。jsdom库提供了一系列API，如`jsdom.env()`用于创建一个新的DOM环境，`window.document`则代表了这个...

    文档对象模型(DOM)的帮助文档

    文档对象模型（DOM，Document Object Model）是一种跨平台和语言中立的接口，使得程序和脚本能够动态地访问和更新文档的内容、结构和样式。DOM 主要用于处理 XML 和 HTML 文档，但在本篇文章中我们将聚焦于 XML。 #...

    常用手册 DOM文档对象模型.chm

    DOM是W3C（World Wide Web Consortium）制定的一种标准，它为HTML和XML文档提供了一个结构化的表示，并定义了一套标准的编程接口来操作这些文档。 DOM文档对象模型允许开发人员通过JavaScript或其他脚本语言与HTML...

    DOM文档下载

    在Web开发领域，DOM（Document Object Model）是HTML和XML文档的一种标准表示，它将网页内容组织成一个树形结构，允许开发者通过JavaScript或其他脚本语言对页面进行动态操作。DOM文档提供了访问和修改网页内容的...

    DOM文档对象模型中文参考手册.rar

    DOM（Document Object Model）是万维网联盟（W3C）制定的一种标准，它提供了一种结构化的表示XML或HTML文档的方法，并允许编程语言与这些文档进行交互。DOM将整个文档视为一个由节点组成的树形结构，每个节点代表...

    脚本控制台 甲子版 通过控制台查看目的网页的DOM文档树,执行JavaScript脚本

    2，通过控制台查看目的网页的DOM文档树,执行JavaScript脚本， 界面介绍: 1, 命令历史窗口：保存命令的历史 2, 命令窗口 直接输入javascript语句，如：document.title; 将返回被调试页面的页面标题； ...

    dom dom4j script帮助文档

    DOM将文档解析为一个可操作的对象树，允许开发者通过JavaScript或其他编程语言来访问和修改文档的内容、结构和样式。DOM4J是Java领域中广泛使用的DOM解析器，它提供了更高效和灵活的方式来处理XML文档，包括读取、...

    DOM解析XML文档

    DOM是一种与平台和语言无关的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。在XML文档中，DOM将整个文档视为一棵由节点组成的树，其中根节点代表整个文档，而其他节点则表示元素、属性、文本等...

    文档对象模型（DOM）

    文档对象模型（DOM）是Web开发中至关重要的一个部分，它提供了一种标准化的方式来解析、访问和修改HTML或XML文档的结构。DOM将文档视为一棵由节点组成的树，每个节点代表文档的一个部分，如元素、文本、注释等。DOM...

    DOM文档对象方法和属性中文文档

    DOM（Document Object Model）是W3C组织定义的一种标准，用于表示XML和HTML文档的结构化接口。DOM将文档解析为一个由节点组成的树形结构，使得开发者可以通过编程方式访问和操作文档的任意部分。本文档集合包含了...

    微软的VBS/JS脚本帮助文档

    微软的VBS/JS脚本帮助文档是一份珍贵的资源，尤其对于那些在Web开发领域工作，特别是使用经典ASP（Active Server Pages）技术的开发者来说。尽管这份文档可能相对较旧，但它仍然包含了丰富的信息，可以帮助开发者...

    从dhtml到dom脚本编程

    ### 从DHTML到DOM脚本编程：理解与实践 #### DHTML与DOM的基本概念 - **DHTML**: DHTML代表动态HTML，它并非一种独立的技术或标准，而是结合了HTML、CSS、JavaScript等技术来创建具有动态效果的网页。通过DHTML，...

Magicbox
Global site tag (gtag.js) - Google Analytics