<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript">
function loadshow(){
var bod = document.body; //body元素
var forms = document.forms; //所有表单
var imgs = document.images; //所有图片
var all = document.all; //文档中所有的元素
//getElementById & getElementsByTagName
var frm1 = document.getElementById("frm1"); //getElementById方法用于根据id找寻出唯一的元素，只能用在document文档对象上，适合查找单独元素
alert(frm1.getAttribute("name")); //frm1；getAttribute获取某个元素的某一属性
var inputs = frm1.getElementsByTagName("input");//getElementsByTagName返回某一对象所包含的标签名字为xx的一组元素,可以用在任何每个node
alert(inputs.length); //3
for(i=0;i<inputs.length;i++){
alert(inputs[i].getAttribute("type")); //text，password，button
}
var script = document.getElementById("script");
//xx.childNodes获取xx节点的所有子节点（包括文本节点）
var scriptChilds = script.childNodes;
for(i=0;i<scriptChilds.length;i++){
var child = scriptChilds[i];
alert(child.innerHTML); //js,perl,php,python
//文本节点的nodeName值#text nodeType的值3，元素节点name为元素名，type值为1
alert("nodeName:"+child.nodeName+" nodeType:"+child.nodeType);
}
alert(script.firstChild.innerHTML); //xx.firstChild 获取xx节点的第一个子节点
alert(script.lastChild.innerHTML); //xx.firstChild 获取xx节点的最后一个子节点
alert(script.parentNode.getAttribute("name")); //testNode;xx.firstChild 获取xx节点的父节点
alert(script.nextSibling.getAttribute("name")); //db;xx.firstChild 获取xx节点的父节点
alert(script.previousSibling.getAttribute("name")); //develop;xx.firstChild 获取xx节点的父节点
//添加新node
var newLi1 = document.createElement("li"); //创建一个新的li元素节点
var textNode1=document.createTextNode("sqlserver");//创建一个文本节点
alert(textNode1.nodeValue); //获取文本节点的值
newLi1.appendChild(textNode1); //xx.appendChild 用于将元素或文本节点添加到xx元素的子节点列表的最后
var newLi2 = document.createElement("li");
var textNode2 = document.createTextNode("I am first");
newLi2.appendChild(textNode2);
var newLi3 = document.createElement("li");
var textNode3 = document.createTextNode("I replace the last");
newLi3.appendChild(textNode3);
var parentNode = document.getElementById("db"); //获取插入节点位置
parentNode.appendChild(newLi1); //只能使用一次
parentNode.insertBefore(newLi2,parentNode.firstChild); //xx.insertBefore在xx元素某一子节点前插入新元素，第一个参数新节点，第二个旧节点
parentNode.replaceChild(newLi3,parentNode.lastChild); //xx.replaceChild替换xx元素下的某个子元素，第一个参数为新，第二个为旧的
/*
没有insertAfter方法，可以自定义一个
function insertAfter(new,old)
{
var parent = old.parentNode;
if(parent.lastChild == old)
{
parent.appendChild(new);
}else
{
parent.insertBefore(new,old.nextSibling);
}
}
*/
var javaNode = document.getElementById("java");
var javaParent = javaNode.parentNode;
javaParent.removeChild(javaNode); //xx.removeChild(); 删除某个节点
}
</script>
</HEAD>
<BODY onload="loadshow()">
<div id="title">用户登录</div>
<div id="form"></div>
<form id="frm1" name="frm1">
<input type="text" name="username"/><br/>
<input type="password" name = "psd"/><br/>
<input type="button" value="submit"/>
</form>
<p>
<a>a</a>
<a>b</a>
<a>c</a>
</p>
<div id="testNode" name="testNode">
<ul id="develop" name="develop">
<li id="java">java</li>
<li>c</li>
<li>c++</li>
<li>.net</li>
<li>c#</li>
</ul>
<ul id="script" name="script">
<li>js</li>
<li>perl</li>
<li>php</li>
<li>python</li>
</ul>
<ul id="db" name="db">
<li>mysql</li>
<li>oracle</li>
<li>db2</li>
</ul>
</div>
</BODY>
</HTML>
分享到：
相关推荐
JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码...
JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 ...
JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改...
JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换...
理解并熟练掌握JavaScript DOM操作是成为一名优秀前端开发者的关键，这不仅能让你更好地控制网页动态行为，还能提升用户体验，使网页更具互动性和吸引力。在实际项目中，结合现代前端框架，DOM操作的效率和灵活性将...
javascript DOM 操作 javascript DOM 操作是指在客户端使用javascript语言来操作文档对象模型（Document Object Model，DOM），以便于动态地更改网页的内容和结构。下面是javascript DOM 操作的相关知识点： IE 中...
本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可...
在JavaScript中，DOM操作主要包括以下几大方面： 1. **获取元素**：`document.getElementById()`，`document.querySelector()`，`document.querySelectorAll()`等方法可以用来根据ID、CSS选择器或匹配多个元素的...
实现使用JavaScript DOM 操作实现网页局部刷新
这篇博客文章“JavaScript DOM操作一些例子”提供了实用的示例，帮助开发者更好地理解和应用DOM操作。 首先，我们需要理解DOM是什么。DOM是HTML和XML文档的结构化表示，它将网页内容组织成一个树形结构，每个元素、...
**neat：极致简洁、高效的JavaScript DOM操作库** 在当今的Web开发中，JavaScript库和框架扮演着至关重要的角色，特别是在处理DOM（Document Object Model）操作时。neat是一个专为移动端设计的JavaScript库，其...
JavaScript提供了强大的DOM操作能力，使得开发者能够创建交互性强、用户友好的网页。通过本文的介绍，我们了解到了JavaScript操作DOM的基本方法和一些高级技巧。掌握这些技能对于任何前端开发者来说都是至关重要的。...
包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含...
在JavaScript的世界里，HTML DOM（Document Object Model）是网页内容的一种结构化表示，它允许我们通过编程...随着对DOM操作的熟练掌握，开发者能够更好地理解前端开发的核心原理，为后续的Web应用开发打下坚实基础。
JavascriptDOM基本操作 dom 精品操作
3. DOM操作：在JavaScript中，DOM操作主要通过DOM提供的API完成。DOM编程涉及对节点（Node）的查询、插入、删除和修改等操作。DOM操作可以改变网页的内容、结构和样式，是创建动态网页的关键。 4. DOM节点类型：DOM...
JavaScript DOM（Document ...通过学习这套资料，开发者可以全面掌握网页制作的各种技巧，从基础的HTML和CSS布局，到复杂的JavaScript DOM操作，以及利用XML进行数据交换，最终能够创建功能丰富、交互性强的网页。
这个压缩包中的文件很可能包含300个不同的JavaScript DOM操作示例，涵盖从基础到高级的各种实践场景，例如动态更新页面内容、响应用户交互、实现动画效果等。通过学习这些实例，你可以深入理解DOM操作的实际应用，...
理解DOM的层次结构以及如何遍历和操作这个结构是JavaScript DOM编程的关键。 此外，书中还涵盖了事件处理，这是JavaScript与用户交互的重要方式。通过绑定事件监听器，开发者可以响应用户的点击、键盘输入等各种...
JavaScript DOM编程艺术是一本深入解析DOM操作的经典书籍，它的源码提供了丰富的实例，帮助开发者深入理解如何使用原生JavaScript高效地操纵网页元素。DOM（Document Object Model）是HTML和XML文档的标准表示，它将...