javascript DOM笔记

最新推荐文章于 2022-05-10 09:45:37 发布

Cao Lilu

最新推荐文章于 2022-05-10 09:45:37 发布

阅读量416

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/crown_0726/article/details/43303857

版权

前端开发专栏收录该内容

46 篇文章 0 订阅

订阅专栏

1、第一个DOM程序

【实例】
<script type="text/javascript">

window.onload = function(){
	var btn = document.getElementsByTagName("button")[0];
	btn.onclick = function(){
		alert("Hellow!!!");
	}
}
</script>

2、获取元素的节点

document.getElementById();
根据元素的id获取元素节点
document.getElementsByTagName();
根据元素节点的元素名称获取元素
document.getElementsByName();
注意：这个根据元素的name获取元素节点方法，在IE的实现方式上和W3C标准有差别，在html文档中若某元素（比如li）没有name属性，那么IE是没法使用这个方法取得改元素的。

3、读写属性的属性节点

首先，先获取指定的节点
var nameNode = document.getElementById('name');
第二，读取指定节点的值
alert(nameNode.value);
第三设置属性的值
nameNode.value = '小强';
4、获取元素的子节点

	<ul id="city">
        <li id="beijing">北京</li>
        <li>上海</li>
        <li>天津</li>
        <li>广州</li>
    </ul>

在上面代码中获取ul的子元素一共有以下几种方法：
先获取ul元素
var cityNode = document.getElementById("city");
第一种方法:
alert(cityNode.childNodes.length);
打印的结果为9个，连空格都加上了，因此这种方法不实用。
第二种方法：
var cityLiNodes = cityNode.getElementsByTagName("li");
这种获取的方法是比较实用的。
第三种方法：
cityNode.firstChild;
cityNode.lastChild;
这两个方法用的时候也是要慎用的，获取第一个元素，则父元素与第一个元素之间不能有空格，否则会获取到空格，同理，获取最后一个元素也是如此。
5、获取元素的文本值
第一步，获取文本节点所在的元素节点
var bjNode = document.getElementById("bj");
第二步，通过firstChild定义到文本节点
var bjTextNode = bjNode.firstChild;
第三步，通过操作文本节点的nodeValue属性来读写文本节点的值
bjTextNode.nodeValue;

6、元素节点，属性节点，文本节点

	<ul id="city">
        <li id="beijing">北京</li>
        <li>上海</li>
        <li>天津</li>
        <li>广州</li>
    </ul>
	<input id="sh" name="sh" />

6.1 元素节点的三个属性
var bjNode = document.getElementById("city");
alert(bjNode.nodeType); // 1
alert(bjNode.nodeName); // ul
alert(bjNode.nodeValue); // null,元素节点没有nodeValue
6.2 属性节点的三个属性
var nameAttr = document.getElementById("sh").getAttributeNode("name");;
alert(nameAttr.nodeType); // 2
alert(nameAttr.nodeName); // 属性节点的属性名，这里是name
alert(nameAttr.nodeValue); // 属性节点的属性值，这里是sh
6.3 文本节点的三个属性
var textNode = bjNode.firstChild;
alert(textNode.nodeType); // 3
alert(textNode.nodeName); // 节点名：#text
alert(textNode.nodeValue); // 文本节点的nodeValue值，这里是北京

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

8、创建一个文本节点
（1）createElement():创建一个包含着给定文本的新文本节点，这个方法的返回值是一个指向新文本节点的指针，返回值是一个文本节点。方法只有一个参数，新建文本节点多包含的文本节点，新元素节点不会自动添加到文档里，只是一个存在javascript上下文的对象。

9、为元素节点添加子节点
（1）appendChild():
var reference = element.appendChild(newChild);
给定子节点newChild将会成为给定元素element的最后一个节点。方法的返回值是一个指向新增子节点的引用指针。

【实例】
//新创建一个元素节点, 并把该节点添加为文档中指定节点的子节点
window.onload = function(){
	alert(1);
	
	//1. document.createElement(elementTagName)
	//新创建一个元素节点, 返回值为指向元素节点的引用
	//<li></li>
	var liNode = document.createElement("li");
	
	//2. 创建 "厦门" 的文本节点
	//document.createTextNode(string) 创建一个文本节点
	//参数为文本值, 返回该文本节点的引用. 
	var xmText = document.createTextNode("厦门");
	//<li>厦门</li>
	liNode.appendChild(xmText);
	
	var cityNode = document.getElementById("city");
	//2. elementNode.appendChild(newChild): 为 elementNode
	//新添加 newChild 子节点, 该子节点将作为 elementNode 的最后
	//一个子节点. 
	cityNode.appendChild(liNode);

10、用正则表达式去除空格
var reg = /^\s*|\s*$/g;
namVal = nameVal.replace(reg , "");

11、节点的替换
replaceChild():把一个给定的父元素里的一个子元素替换成为另一个子节点
var reference = element.replaceChild(newChild,oldChild);
返回值是一个指向已被替换的那个子节点的引用指针
该节点除了替换功能以外还有移动的功能，也就说，用来替换进行替换的节点就不存在了。
该方法只能完成单项替换，若需要进行双向替换，需要自己定义函数。

12、节点的克隆
var bjNode = document.getElementById("bj");
var bjNodeClone = bjNode.cloneNode(true);
这里面的参数，true表示连其子节点一并克隆；false反之。

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

【实例】
var liNode = document.getElementsByTagName("li");
for(var i = 0;i < liNode.length;i++){
	liNode[i].onclick = function(){
		var flag = confirm("确定要删除吗");
		if(flag){
			this.parentNode.removeChild(this);
		}
	}
}

14、插入节点
.insertBefore()：把一个给定节点插入到一个给定元素节点的给定子节点的前面，
var reference = element.insertBefore(newNode,tragetNode);
节点newNode将被插入到元素节点element中并出现在节点tragetNode的前面。
不仅有插入的功能，还有移动的功能。

【实例】
var cityNode = document.getElementById("city");
var bjNode = document.getElementById("bj");
var rlNode = document.getElementById("rl");
cityNode.insertBefore(rlNode,bjNode);
【实例】
自写insertAfter()方法
// 把newNode插入到refNode的后面
function insertAfter(newNode, refNode){
	1、测试refNode是否为其父节点的最后一个节点
	var parentNode refNode.parentNode;
	if(parentNode){
		var lastNode = parentNode.lastChild;
		// 2、若是：直接把newNode插入为refNode父节点的最后一个节点。
		if(refNode == lastChild){
			parentNode.appendChild(newChild);
		}
		// 3、若不是：获取refNode的下一个兄弟节点，然后插入到其下一个兄弟节点的前面
		else{
			var nextNode = refNode.nextSibling;
			parentNode.insertBefore(newNode, nextNode);
		}
	}
}

15、innerHTML属性
浏览器几乎都支持的属性，但不是 DOM标准的组成部分。
innerHTML属性可以用来读，写某给定元素里的HTML内容。
16、js写的checkbox全选

【实例】
来源：摘取别人的实例

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	
	//需求: 若 #checkedAll_2 被选中, 则 name=items 的 checkbox 都被选中
	//若 #checkedAll_2 取消选中, 则 name=items 的 checkbox 都取消选中
	//若 name=items 的 checkbox 都被选中, 则 #checkedAll_2 的 checkbox 也被选中
	//若 name=items 的 checkbox 有一个没有被选中, 则 #checkedAll_2 取消选择.

	//提示: 事件需要加给  #checkedAll_2, 获取 name=items 的 checkbox 数组
	//判断是否被选中, 若被选择, 则 name=items 的 checkbox 都要被选择
	//若没有被选择, 则 name=items 的 checkbox 都要取消选择
	//根据是否存在 checked 属性来判断是否被选择, 可以使其 checked = true 被选择
	//checked = false 取消选择. 
	
	//还需要给每个  name=items 的 checkbox 加响应函数
	//判断  name=items 的 checkbox 是否都被选中: 选择的个数和总个数是否相等.
	//若都被选择: 则使  #checkedAll_2 被选择
	//若没有都被选择: 则使  #checkedAll_2 取消选择
	
	window.onload = function(){
		document.getElementById("checkedAll_2").onclick = function(){
			
			var flag = this.checked;
			var items = document.getElementsByName("items");
			
			for(var i = 0; i < items.length; i++){
				items[i].checked = flag;
			}
			
		}
		
		var items = document.getElementsByName("items");
		
		for(var i = 0; i < items.length; i++){
			items[i].onclick = function(){
				//记录有多少个 items 被选中了
				var number = 0;
				for(var j = 0; j < items.length; j++){
					if(items[j].checked){
						number++;
					}
				}
				
				document.getElementById("checkedAll_2").checked = 
					(items.length == number);
			}
		}
		
		document.getElementById("CheckedAll").onclick = function(){
			for(var i = 0; i < items.length; i++){
				items[i].checked = true;
			}
		}
		
		document.getElementById("CheckedNo").onclick = function(){
			for(var i = 0; i < items.length; i++){
				items[i].checked = false;
			}
		}
		
		document.getElementById("CheckedRev").onclick = function(){
			for(var i = 0; i < items.length; i++){
				items[i].checked = !items[i].checked;
			}
		}
		
		document.getElementById("send").onclick = function(){
			for(var i = 0; i < items.length; i++){
				if(items[i].checked){
					alert(items[i].value);
				}
			}
		}
	}
	
	
</script>
</head>
<body>

	<form method="post" action="">
		你爱好的运动是？
		<input type="checkbox" id="checkedAll_2" />全选/全不选 <br /> 
		<input type="checkbox" name="items" value="足球" />足球 
		<input type="checkbox" name="items" value="篮球" />篮球 
		<input type="checkbox" name="items" value="羽毛球" />羽毛球 
		<input type="checkbox" name="items" value="乒乓球" />乒乓球
		<br /> 
		<input type="button" id="CheckedAll" value="全　选" /> 
		<input type="button" id="CheckedNo" value="全不选" /> 
		<input type="button" id="CheckedRev" value="反　选" /> <input type="button" id="send" value="提　交" />
	</form>

</body>
</html>