<script type="text/javascript">
//document.getElementsByTagName();
function SearchDom(){
//得到该页面中所有li标签的对象数组
var oli=document.getElementsByTagName("li");
//数组长度,第一个对象的标签名,第四个对象的文本节点的值.
alert("长度:"+oli.length+" 标签名:"+oli[0].tagName+" 第四个li元素的子节点的值:"+ oli[3].childNodes[0].nodeValue);
var oul=document.getElementsByTagName("ul");
var ol2=oul[1].getElementsByTagName("li");
alert("长度:"+ol2.length+"标签名:"+oli[1].tagName+" 第二个元素的文本节点值:"+ol2[1].childNodes[0].nodeValue);
}
</script>
</head>
<body onload="SearchDom()">
<ul>客户端语言
<li>HTML</li>
<li>Javascript</li>
<li>Css</li>
</ul>
<ul>服务端语言
<li>asp.net</li>
<li>jsp</li>
<li>php</li>
</ul>
</body>
</html>
<script type="text/javascript">
//document.getElementById();
function SearchDom(){
var myid=document.getElementById("myid");
alert(myid.tagName+" "+myid.childNodes[0].nodeValue);
}
</script>
</head>
<body onload="SearchDom()">
<ul>客户端语言
<li>HTML</li>
<li>Javascript</li>
<li id="myid">Css</li>
</ul>
<ul>服务端语言
<li>asp.net</li>
<li>jsp</li>
<li>php</li>
</ul>
</body>
</html>
<script type="text/javascript">
/*父子关系:在访问元素之后Dom提供给我们最重要的一种关系,它可以通过某一个元素遍历其他元素*/
/*在DOM模型中只要获得了某一个元素,便可以通过父子关系,遍历整个HTML文档,通过DOM我们对文档拥有空前的控制能力*/
function MyDOMInspector(){
var str="";
var myList=document.getElementById("myList");
if(myList.hasChildNodes())
var child=myList.childNodes;
for(var i=0;i<child.length;i++)
str+=child[i].childNodes[0].nodeValue+"\n";
//str+=child[i].tagName+"\n";
//str+=child[i].nodeName+"\n";
alert(str);
}
</script>
</head>
<body onload="MyDOMInspector()">
<ul id="myList">
<li>苹果</li>
<li>香蕉</li>
<li>菜牙</li>
<li>橘子</li>
<li>西瓜</li>
<li>草莓</li>
</ul>
</body>
</html>
<script type="text/javascript">
/*节点属性*/
function property(){
var img=document.getElementsByTagName("img")[0];//都打该页面的第一个图片标签的DOM对象
alert(img.getAttribute("title"));
}
</script>
</head>
<body onload="property()">
<img title="情人坡" src="file:///D|/我的文档/My Pictures/Sunset.jpg"/>
</body>
</html>
<script type="text/javascript">
/*创建新节点*/
function createP(){
var newP=document.createElement("p");
var text=document.createTextNode("这是一段感人的故事!");
newP.appendChild(text);
document.body.appendChild(newP);
}
</script>
</head>
<body onload="createP()">
<p>事先写一行文字在这里!</p>
</body>
</html>
<script type="text/javascript">
/*InnerHTML点*/
function test(){
var mydiv=document.getElementById("mydiv");
alert(mydiv.innerHTML);
mydiv.innerHTML="<span>你是小白!</span>"
}
</script>
</head>
<body onload="test()">
<div id="mydiv">
我是呆瓜!
</div>
</body>
</html>
分享到：
相关推荐
JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码...
这个“dom4j示例”压缩包很可能是包含了一些示例代码，帮助学习者理解DOM4J的工作原理和常用操作。 DOM4J的核心概念包括元素（Element）、属性（Attribute）、文本（Text）以及命名空间（Namespace）。在XML文档中...
### DOM4J 示例详解 #### 一、DOM4J简介 DOM4J（Document Object Model for Java）是一款用于处理XML的高效、灵活且易于使用的Java库。它支持DOM、SAX、JDOM等多种模型，并提供了丰富的API来创建、读取、修改和...
示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript ...
根据JavaScript DOM 编程艺术这本书之前所介绍的内容，做的本书最后的一个综合简单示例
**DOM4J教程详解与示例程序解析** DOM4J是一个强大的Java库，它提供了灵活且高效的处理XML文档的能力。这个教程将深入介绍DOM4J的核心概念，操作XML的常见方法，以及如何通过示例程序来实践这些知识。 1. **DOM4J...
JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改...
JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换...
优点是操作灵活，适合小到中等大小的XML文档；缺点是如果XML文件过大，可能导致内存消耗过高。 3. **Pull解析器** Android特有的Pull解析器类似于SAX，也是事件驱动的，但API设计更简洁，易于使用。它提供了一种...
这个"dom4j练习示例(备忘用)"压缩包很可能是包含了一些代码示例，帮助学习者理解和掌握DOM4J的核心功能。 在DOM4J中，XML文档被表示为一个树形结构，根节点是Document对象，而其他元素、属性、文本等都是其子节点。...
5. **DOM操作示例**：创建新的元素节点`var newElement = document.createElement('div')`，然后通过`appendChild()`将其添加到已存在的元素中，或者使用`innerHTML`改变元素的内容。 掌握JavaScript DOM和基础语法...
dom4j_API_示例讲解.pdf dom4j_API_示例讲解.pdf dom4j_API_示例讲解.pdf dom4j_API_示例讲解.pdf dom4j_API_示例讲解.pdf dom4j_API_示例讲解.pdf dom4j_API_示例讲解.pdf dom4j_API_示例讲解.pdf dom4j_API_示例...
### DOM4J用法示例详解 #### 一、引言 在Java开发中，DOM4J是一个非常流行且强大的轻量级XML处理框架。它提供了简单易用的API来读取、创建、修改和删除XML文件。DOM4J不仅支持DOM标准，还支持XPath查询语言，使得对...
包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含...
在这个“java dom4j 简单示例”中，我们将探讨如何在Spring框架的上下文中，结合数据库操作，使用DOM4J生成XML文档，并进一步利用Transformer进行XSLT转换。 首先，DOM4J的核心概念是Document对象，它代表整个XML...
JavaScript 事件处理 示例代码 包含表格表单创建、样式设置、事件绑定（表格、表单、复选框）、事件处理 JavaScript 事件处理 示例代码 包含表格表单创建、样式设置、事件绑定（表格、表单、复选框）、事件处理...
DOM示例代码.pdf
至于`读写XML示例`，这个文件可能包含了一些实际的Java代码示例，演示了如何使用DOM4J进行XML操作。通过阅读和理解这些示例，你可以更好地掌握DOM4J的使用方法。 总之，DOM4J是一个强大且易于使用的工具，对于处理...