js 通DOM 操作HTML
<!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=gb2312" />
<title>4.3 DOM访问文档</title>
<style type="text/css">
<!--
.mao {
font-family: "草体";
font-size: 18px;
font-style: italic;
color: #0000FF;
}
.song {
font-family: "宋体";
font-size: 24px;
font-style: italic;
color: #FF00FF;
}
-->
</style>
<script language="javascript" type="text/javascript">
//--------------------------------------------
/*var p3 = document.getElementsByTagName('p')[3];//根据 TagName 获取元素
p3.className = 'song';*/
//--------------------------------------------
/*var p2 = document.getElementById('p2');//根据 Id 获取元素
p2.className = 'song';*/
//--------------------------------------------
/*var p1 = document.getElementsByTagName('p')[0].firstChild;//获取子节点
p1.nodeValue = p1.nodeName;//nodeType 中1表示元素结点,3表示文本结点 */
//--------------------------------------------
/*var pTags = document.getElementsByTagName('p');//遍历 p 元素
for(var pTag = 0;pTag < pTags.length;pTag ++){
var tag = pTags[pTag].firstChild;
tag.nodeValue = tag.nodeName;
}*/
//--------------------------------------------
/*var bodyTag = document.getElementsByTagName('body')[0];//遍历子节点
var tags = bodyTag.childNodes;
var info = "info: \n"
for(var num = 0;num < tags.length ;num ++){//IE 与其它不同的是不会把换行符当作文本节点
var tag = tags[num];
info +="\t" + tag.nodeName + "\n";
}
alert(info);*/
//--------------------------------------------
/*var aHref = document.getElementById('aHref');//遍历父节点
while(aHref.nodeName != "BODY"){
alert(aHref.nodeName);
aHref = aHref.parentNode;
}
alert(aHref.nodeName);*/
//--------------------------------------------
/*var p2 = document.getElementById('p2');
var info = "info: \n";
var temp = p2;
while(temp != null){//当前节点的next 点
info += "next: " + temp.nodeName + "\n";
temp = temp.nextSibling;
}
temp = p2;
while(temp != null){//当前节点的 back 节点
info += "back: " + temp.nodeName + "\n";
temp = temp.previousSibling;
}
alert(info);*/
//--------------------------------------------
/*var imgTag = document.getElementsByTagName("img")[0];
//imgTag.src = 'http://mimg.126.net/logo/126logo.gif';
//alert(imgTag.getAttribute('src') )
imgTag.setAttribute("src","http://mimg.126.net/logo/126logo.gif");//修改元素属性
imgTag.setAttribute("title","126电子邮箱");*/
/*var aHref = document.createElement('a');//创建一个标签节点
aHref.setAttribute('href','http://g.cn');
var textInfo = document.createTextNode('一首歌');//创建一个文本节点
aHref.appendChild(textInfo);//添加子节点
var aOld = document.getElementsByTagName('a')[1];
var bodyTag = document.getElementsByTagName('body')[0];
bodyTag.replaceChild(aHref,aOld);//替换一个节点
//bodyTag.insertBefore(aHref,aOld);//把 aHerf 插入到 aOld 之前
//bodyTag.removeChild(aOld);//移除节点*/
//--------------------------------------------
function funOnload(){
}
function display(){
var hTag = document.getElementsByTagName('h1')[0];
hTag.innerHTML="innerHTML,<a href='http://g.cn' >12345,上山打老虎</a>";
}
</script>
</head>
<body onload="funOnload()">
<p class="mao">显示1</p>
<p class="mao" id="p2">显示2</p>
<p class="mao"><a href="http://www.google.com" id="aHref">www.google.com</a></p>
<p class="mao">显示4</p>
<img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" alt="google" title="谷歌" />
<a href="javascript:display();">href</a>
<noscript>noscript</noscript>
<h1></h1>
</body>
</html>
分享到：
相关推荐
JavaScript DOM（Document Object Model）是Web开发中的一个关键概念，它允许我们通过JavaScript与HTML或XML文档进行交互。DOM是一个树形结构，将网页内容表示为节点和对象，每个元素、属性、文本甚至注释都是一个...
在这个压缩包文件“javascript_DOM操作.rar”中，我们可以找到一个名为“javascript_DOM操作.docx”的文档，它很可能是详细介绍了JavaScript与DOM交互的相关知识。 首先，DOM是网页内容的树状表示，它将HTML或XML...
3. DOM操作：在JavaScript中，DOM操作主要通过DOM提供的API完成。DOM编程涉及对节点（Node）的查询、插入、删除和修改等操作。DOM操作可以改变网页的内容、结构和样式，是创建动态网页的关键。 4. DOM节点类型：DOM...
DOM是Web开发中的核心组件，它允许程序员通过JavaScript来操作HTML和XML文档的结构、内容和样式。这本书的附录和源码提供了丰富的实践案例和深入的代码示例，帮助读者更好地理解和掌握JavaScript在DOM编程中的应用。...
JavaScript操作DOM（Document Object Model）是网页开发中的核心技能之一，它允许我们动态地修改、添加和删除HTML或XML文档的结构与内容。DOM是一种树形结构，将页面元素视为对象，提供了丰富的接口来实现对这些对象...
JavaScript DOM（Document Object Model）操作是前端开发中的基础技能，它允许我们通过代码与网页的结构进行交互。在这个“Javascript_Dom操作案例”中，我们将深入探讨如何利用JavaScript有效地操纵DOM元素，提升...
JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源...
通过DOM，我们可以用JavaScript来查找、访问、修改或删除文档的任何部分。DOM的主要接口有Node、Element、Document等，它们分别代表了节点、元素节点和整个文档。例如，`document.getElementById()` 可以找到具有...
根据提供的文件信息，我们可以推断出这是一本关于JavaScript DOM编程技术的书籍——《JavaScript DOM编程艺术（第2版）》。尽管实际书籍内容并未给出，但从标题、描述及部分链接信息来看，这本书主要涉及JavaScript...
JavaScript 是一种强大的语言，它允许开发者与网页上的 DOM（文档对象模型）交互。通过JavaScript，我们可以创建、修改、删除和操作网页元素，从而实现动态的网页效果。本文将详细介绍如何使用 JavaScript 来创建和...
《JavaScript DOM编程艺术》是Jeremy Keith所著的一本关于JavaScript和DOM（文档对象模型）编程的经典图书，它不仅阐述了JavaScript和DOM的基本知识，还着重讲解了DOM编程技术背后的思路和原则。本书被赞誉为Web设计...
JavaScript DOM编程艺术是一本深入解析DOM操作的经典书籍，它的源码提供了丰富的实例，帮助开发者深入理解如何使用原生JavaScript高效地操纵网页元素。DOM（Document Object Model）是HTML和XML文档的标准表示，它将...
DOM是Web页面的结构化表示，它允许我们通过编程方式操纵HTML和XML文档。这本书为初学者提供了全面的指导，深入浅出地介绍了JavaScript与DOM结合的各种技巧和方法。 首先，书中的核心知识点围绕JavaScript语言基础...
JavaScript-DOM编程艺术是关于如何使用JavaScript操作网页文档对象模型（Document Object Model，简称DOM）的技术。DOM是一种标准，它提供了表示和操作HTML或XML文档的接口。通过DOM，JavaScript可以访问和修改网页...
IE 中遍历 DOM 文档：在IE中，可以使用以下属性和方法来遍历DOM文档： * documentElement：文档根元素的引用 * attributes：节点属性数组 * childNodes：节点子节点数组 * firstChild：第一个子节点引用 * ...
这篇教程——"JavaScript学习手册十四：HTML DOM-文档元素的操作（二）"深入探讨了如何使用JavaScript来操纵HTML文档中的元素，进一步提升网页动态性和交互性。 DOM是HTML和XML文档的一种结构化表示，它将网页内容...
JavaScript和DOM Enlightenment是关于Web开发中的核心技术的深入学习资源，主要涵盖了JavaScript编程语言以及文档对象模型（Document Object Model）的应用。这两个概念对于任何希望成为前端开发者的人来说都是至关...
DOM是HTML和XML文档的结构化表示，JavaScript通过DOM API能够对网页内容进行动态操作，实现丰富的交互效果。以下是对这本书中核心知识点的详细阐述： 1. **JavaScript基础**：在深入DOM之前，首先需要理解...
在《JavaScript+DOM编程艺术》中，作者将深入讲解如何通过JavaScript访问和操作DOM，包括选择元素、遍历DOM树、修改节点内容和样式、事件处理以及动画效果等。这些技术是创建响应式和交互式网页必不可少的工具。 书...
《初识JavaScript与DOM脚本和Ajax》这本书深入浅出地介绍了JavaScript编程、DOM操作以及Ajax技术的基础知识，是Web开发者的入门指南。JavaScript作为Web前端的核心语言，DOM（Document Object Model）则提供了对HTML...