JavaScript DOM编程学习笔记

最新推荐文章于 2024-08-22 10:43:59 发布

原创最新推荐文章于 2024-08-22 10:43:59 发布 · 293 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

前端大杂烩同时被 2 个专栏收录

13 篇文章

订阅专栏

JavaScript

4 篇文章

订阅专栏

本文深入解析了JavaScript如何与HTML文档交互，包括JS代码在HTML文档中的放置位置、获取及操作DOM元素的方法、节点的创建与操作等核心知识点。

1.在 html 文档的什么位置编写 js 代码？

一般地, 在 body 节点之前编写 js 代码, 但需要利用 window.onload 事件,　该事件在当前文档完全加载之后被触发, 所以其中的代码可以获取到当前文档的任何节点。

<!DOCTYPE html>
<html>
	<head>
		<title>TestJavaScriptDom.html</title>
		<meta name="content-type" content="text/html; charset=UTF-8">
		<script type="text/javascript">
			
			/*
			 * 一般地, 不能在 body 节点之前来直接获取 body 内的节点, 
			 * 因为此时 html 文档树还没有加载完成,获取不到指定的节点。
			 */
			var btnNum = document.getElementsByTagName("button");
			alert("按钮个数：" + btnNum.length);//弹出窗口打印结果 0.
			
			/* 
			 * window.onload 事件在整个 HTML 文档被完全加载后出发执行. 
			 * 所以在其中可以获取到 HTML 文档的任何元素.
			 * 1. 当整个 HTML 文档完全加载成功后触发 window.onload 事件.
			 * 事件触发时, 执行后面 function 里边的函数体.
			*/
			window.onload = function() {
				//2. 获取所有的 button 节点. 并取得第一个元素
				var btn = document.getElementsByTagName("button")[0];
				//3. 为 button 的 onclick 事件赋值: 当点击 button 时, 执行函数体
				btn.onclick = function() {
					//4. 弹出 helloworld
					alert("helloworld");
				}
			}
		</script>
	</head>

	<body>
		<button>button1</button>
		<!-- HTML 代码和 JS 代码耦合在一起. 不推荐 -->
		<button onclick="alert('helloworld !!');">button2</button>
	</body>
</html>

<!-- 
	在整个 HTML 文档被加载后, 获取其中的节点. 
	把  script 节点放在 html 文档的最后 
	但不符合些 JS 代码的习惯. 
-->
<script type="text/javascript">
	//1. 获取 button
	var btns = document.getElementsByTagName("button");
	alert("按钮个数：" + btns.length);

	//2. 为 button 添加 onclick 响应函数
	btns[0].onclick = function() {
		alert("helloworld!!!");
	}
</script>

2. 获取指定的元素节点的三个方法

/*
 * 1.根据 id 属性获取对应的单个节点,
 * 在编写 HTML 文档时, 需确保 id 属性值是唯一的.
 * 该方法为 document 对象的方法
 */
document.getElementById("IDName");
/*
 * 2.使用标签名获取指定节点的集合. 
 */
document.getElementsByTagName("TagName");
/*
 * 3.根据节点的 name 属性获取符合条件的节点数组
 */
document.getElementsByName("Name");

3.获取属性节点的方法

通过元素节点 . 的方式来获取属性值和设置属性值.

//属性节点即为某一指定的元素节点的属性. 
//1. 先获取指定的那个元素节点
var nameNode = document.getElementById("name");

//2. 再读取指定属性的值
alert(nameNode.value);

//3. 设置指定的属性的值.
nameNode.value = "newValue";
/*
 * 或者通过getAttributeNode来获取属性节点
	var nameAttr = nameNode.getAttributeNode("value");
	alert(nameAttr);
	alert("--" + nameAttr.nodeValue);
	nameAttr.nodeValue = "newValue";
*/

4.获取元素节点的子节点的方法

//获取元素节点的子节点, 例获取 #city (<ul>)节点的所有子节点.
//1. 获取 #city 节点
var cityNode = document.getElementById("city");

//2. 利用元素节点的 childNodes 方法可以获取指定元素节点的所有子节点.
//但该方法不实用. 因为如果要获取指定的节点的指定子节点的集合, 可以直
//接调用元素节点的 getElementsByTagName() 方法来获取.
cityNode.childNodes;

//3. 获取 #city 节点的所有 li (<li>)子节点.
var cityLiNodes = cityNode.getElementsByTagName("li");
alert(cityLiNodes.length);

//4. 获取指定节点的第一个子节点和最后一个子节点. 
cityNode.firstChild;
cityNode.lastChild;

5.获取文本节点的方法

元素节点 --> 获取元素节点的子节点

若元素节点只有文本节点一个子节点,
例如 <li id="bj" name="BeiJing">北京</li>, <p>你喜欢哪个城市?</p>,
可以先获取到指定的元素节点 eleNode,然后利用 eleNode.firstChild.nodeValue 的方法来读写其文本节点的值。

//文本节点一定是元素节点的子节点. 
//1. 获取文本节点所在的元素节点
var bjNode = document.getElementById("IdName");
//2. 通过 firstChild 定义为到文本节点
var bjTextNode = bjNode.firstChild;
//3. 通过操作文本节点的 nodeValue 属性来读写文本节点的值. 
alert(bjTextNode.nodeValue);
bjTextNode.nodeValue = "newValue";

6.节点的属性

.nodeName: 代表当前节点的名字,是只读属性.
如果给定节点是一个文本节点, nodeName 属性将返回内容为 #text 的字符串
.nodeType：返回一个整数, 这个数值代表着给定节点的类型.，是只读属性.
1 -- 元素节点, 2 -- 属性节点, 3 -- 文本节点
.nodeValue：返回给定节点的当前值(字符串). 可读写的属性
①. 元素节点: 返回值是 null.
②. 属性节点: 返回值是这个属性的值
③. 文本节点: 返回值是这个文本节点的内容

7.创建一个元素节点

.createElement(): 按照给定的标签名创建一个新的元素节点.
方法只有一个参数：被创建的元素节点的名字, 是一个字符串.
方法的返回值：是一个指向新建节点的引用指针. 返回值是一个元素节点, 所以它的 nodeType 属性值等于 1.
新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象.

8.为元素节点添加子节点

.appendChild(): var reference = element.appendChild(newChild): 给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点, 方法的返回值是一个指向新增子节点的引用指针.

9.创建一个文本节点

.createTextNode(): 创建一个包含着给定文本的新文本节点. 这个方法的返回值是一个指向新建文本节点引用指针. 它是一个文本节点, 所以它的 nodeType 属性等于 3.方法只有一个参数：新建文本节点所包含的文本字符串. 新元素节点不会自动添加到文档里

//7、8、9例子		
//1. document.createElement(elementTagName)
//新创建一个元素节点, 返回值为指向元素节点的引用
//<li></li>
var liNode = document.createElement("li");

//2. 创建 "厦门" 的文本节点
//document.createTextNode(string) 创建一个文本节点
//参数为文本值, 返回该文本节点的引用. 
var xmText = document.createTextNode("厦门");
//<li>厦门</li>
liNode.appendChild(xmText);

10.节点的替换

.replaceChild(): 把一个给定父元素里的一个子节点替换为另外一个子节点
var reference = element.replaceChild(newChild,oldChild);
返回值是一个指向已被替换的那个子节点的引用指针
该节点除了替换功能以外还有移动的功能.

该方法只能完成单向替换, 若需要使用双向替换, 需要自定义函数:

function replaceEach(aNode, bNode){
		
		if(aNode == bNode){
			return;
		}
		
		var aParentNode = aNode.parentNode;
		//若 aNode 有父节点
		if(aParentNode){
			var bParentNode = bNode.parentNode;
			
			//若 bNode 有父节点	
			if(bParentNode){
				var tempNode = aNode.cloneNode(true);
				bParentNode.replaceChild(tempNode, bNode);
				aParentNode.replaceChild(bNode, aNode);	
			}
		}
		
}

11.删除节点

.removeChild(): 从一个给定元素里删除一个子节点
var reference = element.removeChild(node);
返回值是一个指向已被删除的子节点的引用指针. 某个节点被 removeChild() 方法删除时, 这个节点所包含的所有子节
点将同时被删除. 如果想删除某个节点, 但不知道它的父节点是哪一个, parentNode 属性可以帮忙。

12.插入节点

.insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面
var reference = element.insertBefore(newNode,targetNode);
节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面. 节点 targetNode 必须是 element 元素的一个子节点。