`

javascript DOM(二)

 
阅读更多

 

8. 创建一个元素节点:

1). createElement(): 按照给定的标签名创建一个新的元素节点. 方法只有一个参数:被创建的元素节点的名字, 是一个字符串.

                       方法的返回值:是一个指向新建节点的引用指针. 返回值是一个元素节点, 所以它的 nodeType 属性值等于 1.

                         **新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象.

 

9. 创建一个文本节点:

1). createTextNode(): 创建一个包含着给定文本的新文本节点. 这个方法的返回值是一个指向新建文本节点引用指针. 它是一个文本节点, 所以它的 nodeType 属性等

 

于 3.

                        方法只有一个参数:新建文本节点所包含的文本字符串. 新元素节点不会自动添加到文档里

                        

10. 为元素节点添加子节点:

1). appendChild(): var reference = element.appendChild(newChild): 给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点.

                     方法的返回值是一个指向新增子节点的引用指针.

 

 

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<script type="text/javascript">
			
			window.onload = function(){
				//创建一个 <li>纽约</li> 节点, 并把该节点添加为 #bj 节点的最后一个子节点
				//1. 创建一个 <li></li> 节点
				var nyNode = document.createElement("li");
				
				//2. 创建一个文本节点 "纽约"
				var nyText = document.createTextNode("纽约");
				
				//3. 把新创建的文本节点添加为 nyNode 节点的子节点: <li>纽约</li>
				nyNode.appendChild(nyText);
				
				//4. 把 nyNode 节点添加为 #bj 节点的最后一个子节点
				document.getElementById("city").appendChild(nyNode);
			};
						
		</script>
		
	</head>
	<body>
		<p>你喜欢哪个城市?</p>
		<ul id="city">
			<li id="bj" name="BeiJing">北京</li>
			<li>上海</li>
			<li>东京</li>
			<li>首尔</li>
		</ul>
		
		<br><br>
		<p>你喜欢哪款单机游戏?</p>
		<ul id="game">
			<li id="rl">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li>魔兽</li>
		</ul>
		
		<br><br>
		gender: 
			<input type="radio" name="gender" value="male"/>Male
			<input type="radio" name="gender" value="female"/>Female
	</body>
</html>	

 

 

 

 

 

 

 

 

 

0
1
分享到:
评论

相关推荐

    JavaScript DOM编程艺术【第2版&高清】.pdf

    但是,根据标题《JavaScript DOM编程艺术【第2版&高清】.pdf》和描述“JavaScript DOM编程艺术,高清资源,无比经典,值得拥有”,我们可以推断这本书主要讲述了JavaScript中DOM(文档对象模型)的相关编程技术。...

    JavaScript DOM编程艺术(第2版pdf)+源代码

    JavaScript DOM编程艺术(第2版)是一本深受程序员喜爱的JavaScript技术书籍,专注于讲解如何使用JavaScript与Document Object Model(DOM)进行交互。DOM是Web页面的结构化表示,它允许我们通过编程方式操纵HTML和XML...

    JavaScript dom操作 dom元素查询 示例代码

    JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码...

    JavaScriptDOM编程艺术(第2版)PDF版本下载.txt

    ### 二、DOM概念详解 #### 2.1 DOM定义 DOM(Document Object Model,文档对象模型)是HTML或XML文档的一种树形结构表示法,它将文档视为节点树。通过DOM,开发者可以访问文档中的所有元素,并能对文档进行修改。...

    随书光盘+PDF JavaScript DOM编程艺术(第2版)-源代码2.5MB PDF114MB .zip

    JavaScript DOM编程艺术(第2版)是一本深受开发者欢迎的书籍,主要涵盖了JavaScript语言在Web前端开发中的应用,特别是关于DOM(Document Object Model)的深入理解和实践。这本书的随书光盘包含了源代码和PDF电子版...

    JavaScript DOM编程艺术.pdf

    《JavaScript DOM编程艺术》是Jeremy Keith所著的一本关于JavaScript和DOM(文档对象模型)编程的经典图书,它不仅阐述了JavaScript和DOM的基本知识,还着重讲解了DOM编程技术背后的思路和原则。本书被赞誉为Web设计...

    经典之作javascript dom编程艺术源码

    JavaScript DOM编程艺术是一本深入解析DOM操作的经典书籍,它的源码提供了丰富的实例,帮助开发者深入理解如何使用原生JavaScript高效地操纵网页元素。DOM(Document Object Model)是HTML和XML文档的标准表示,它将...

    JavaScript dom操作 删除元素 示例代码

    JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 ...

    JavaScript_DOM编程艺术第二版(中文)

    JavaScript DOM编程艺术第二版是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍,主要面向希望提升JavaScript客户端开发技能的程序员。DOM是Web页面的结构化表示,JavaScript通过DOM API可以...

    JavaScript DOM编程艺术(中文第2版).pdf

    javascript入门必备,本书讲述了JavaScript和DOM的基础知识,但重点放在DOM编程技术背后的思路和原则:预留退路、循序渐进和以用户为中心等,这些概念对于任何前端Web开发工作都非常重要。本书将这些概念贯穿在书中...

    JavaScriptDOM编程艺术第二版

    JavaScript DOM编程艺术第二版是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍,主要面向希望提升JavaScript技能并掌握网页动态效果开发的Web开发者。DOM是HTML和XML文档的编程接口,它允许...

    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 dom2 源码及pdf

    JavaScript DOM2是Web开发中的重要概念,它代表了Document Object Model的第二级规范,这是一个用于HTML和XML文档的标准API。这个标准由W3C(万维网联盟)制定,允许开发者通过JavaScript或者其他兼容的语言来操纵...

    javascriptDom编程艺术+源码

    《JavaScript DOM编程艺术》是一本深受开发者欢迎的JavaScript学习书籍,专注于DOM(Document Object Model)这一核心概念。DOM是Web页面的结构模型,通过JavaScript与DOM的交互,开发者可以实现对网页内容的动态...

    JavascriptDOM基本操作

    JavascriptDOM基本操作 dom 精品操作

    JavaScript.DOM编程艺术(第2版)附录及源码.rar

    《JavaScript.DOM编程艺术(第2版)》是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍。DOM是Web开发中的核心组件,它允许程序员通过JavaScript来操作HTML和XML文档的结构、内容和样式。这本书...

    javascript Dom 编程艺术

    本 书在简洁明快地讲述JavaScript和DOM的基本知识之后,通过几个实例演示了专业水准的网页开发技术,透彻阐述了平稳退化等一批至关重要的 JavaScript编程原则和最佳实践,并全面探讨了HTML5以及jQuery等JavaScript库...

    JavaScript DOM编程艺术 第2版 及源码

    《JavaScript DOM编程艺术 第2版》是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍。DOM是Web页面的结构模型,JavaScript通过DOM API能够对网页内容进行动态操作,实现丰富的交互效果。这...

Global site tag (gtag.js) - Google Analytics