10、DOM（文档对象模型）

1、认识DOM

html 骨架
css 装修
javascript 物业

DOM 打破上述三者的通道。

【注】script标签一般情况下要写在head标签。

<div id = "div1">div文本</div>

1、标签元素节点对象

<div></div>

2、id = "div1" 属性节点对象
3、div文本文本节点对象

【注】元素节点对象应该如何在js中被找到。

window.onload
当页面加载完成以后，去执行的函数。

document.getElementById();

            window.onload = function(){
				var oDiv = document.getElementById("div1");
				alert(oDiv);
			}

2、node.getElementsByTagName()

document.getElementsByTagName()
格式：node.getElementsByTagName()
++功能：从node这个节点开始，找node子节点中符合标签名的所有元素++。
参数：标签名字
返回值：查找到所有符合这个标签名的所有元素节点。使用的时候，类似于数组。

        <script>
            window.onload = function(){
				/*var aDivs = document.getElementsByTagName("div");

				//aDivs使用起来和数组类似。

				alert(aDivs.length);*/


				/*var aBtns = document.getElementsByTagName("button");
				for(var i = 0; i < aBtns.length; i++){
					aBtns[i].onclick = function(){
						alert(123);
					}
				}*/

				/*
					找到div1，找到div1下的button
				*/
				var oDiv = document.getElementById("div1");
				var aBtns = oDiv.getElementsByTagName("button");
				for(var i = 0; i < aBtns.length; i++){
					aBtns[i].onclick = function(){
						alert(123);
					}
				}
			}
		</script>

	<body>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<button>按钮1</button>
		<button>按钮2</button>
		<button>按钮3</button>
		<div id = "div1">
			<button>按钮4</button>
			<button>按钮5</button>
		</div>
	</body>

3、node.getElementsByClassName()

【注】IE8以下不兼容。
node.getElementsByClassName()
参数：class的名字
返回值：找到从node节点开始，node子节点中，所有符合条件的元素。
document 代表 <html></html>

        <style>
			.red{
				background-color: red;
			}
			div{
				 100px;
				height: 100px;
				margin: 30px;
				background-color: black;
			}
		</style>
		<script>
			/*
			【注】IE8以下不兼容。
				node.getElementsByClassName()
				参数：class的名字
				返回值：找到从node节点开始，node子节点中，所有符合条件的元素。

				document 代表 <html></html>
			*/

			window.onload = function(){
				// var nodes = document.getElementsByClassName("red");

				var oDiv = document.getElementById("div1");
				var nodes = oDiv.getElementsByClassName("red");
				// alert(nodes.length);
				for(var i = 0; i < nodes.length; i++){
					nodes[i].style.backgroundColor = "blue";
				}
			}
		</script>
	<body>
		<div></div>
		<div class = "red"></div>
		<div></div>
		<div class = "red"></div>
		<div></div>
		<div id = "div1">
			<span class = "red">文本</span>
			<button class = "red">按钮</button>
		</div>
	</body>

4、document.getElementsByName(name)

document.getElementsByName();
1、只能从document开始去查
2、参数：name的值，
3、返回值：通过name的值查找到的所有符合条件的元素。

【注】name属性一般情况，使用在form表单元素中，其他标签就不要去用了。

获取元素节点的方法
1、document.getElementById(id)
2、node.getElementsByTagName(tagName)
3、node.getElementsByClassName(className)
IE8以下不兼容
4、document.getElementsByName(name)

        <script>
			window.onload = function(){
				/*
					
				*/
				var nodes = document.getElementsByName("hello");
				alert(nodes.length);

				
			}
			
		</script>
	</head>
	<body>
		<div name = "hello"></div>
		<span name = "hello"></span>
		<input type="text" name = "hello">
		<textarea name="hello" id="" cols="30" rows="10"></textarea>
	</body>

5、元素节点的属性

元素节点 === 标签
1、tagName 当前元素节点的标签名
2、innerHTML 标签间的内容

            window.onload = function(){
				var oDiv = document.getElementById("div1");
				// alert(oDiv.tagName);

				//获取
				// alert(oDiv.innerHTML);

				//设置 innerHTML中如果有标签，会解析
				oDiv.innerHTML = "<strong>粗体文本</strong>"
			}

访问属性

//alert(oDiv.id);
//alert(oDiv.title);
//alert(oDiv.className);

// alert(oDiv.style); //返回的是一个css样式对象
// alert(oDiv.style.width);
// alert(oDiv.style.height);

++对于带-的样式，要将-去掉，然后后续单词的首字母大写。++
//++alert(oDiv.style.backgroundColor);++
oDiv.title = "world";
oDiv.className = "box2";
oDiv.style.backgroundColor = "blue";

6、随机颜色

    <head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			#div1{
				 200px;
				height: 200px;
				background-color: red
			}
		</style>
		<script>
			/*
				rgba(255, 255, 255,1);

				1位十六进制 == 四位二进制
				红 两位  == 8位

				parseInt(Math.random() * 256)   [0,1)
			*/
			function randomColor(){
				var str = "rgba(" + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + ",1)";
				return str;
			}

			window.onload = function(){
				var oDiv = document.getElementById("div1");

				var i = 15;

				setInterval(function(){
					oDiv.style.backgroundColor = randomColor();
					oDiv.style.fontSize = i++ + "px";
				}, 100);
			}
		</script>


	<body>
		<div id = "div1">
			清醒吧
		</div>
	</body>

7、自定义获取元素节点

        <script>
			function elementsByClassName(node, className){
				var nodes = node.getElementsByTagName("*");
				var nodeArr = [];
				//2、通过循环，找出class = box的节点
				for(var i = 0; i < nodes.length; i++){
					if(nodes[i].className == className){
						nodeArr.push(nodes[i]);
					}
				}
				return nodeArr;
			}


			window.onload = function(){
				var oDiv = document.getElementById("div1");
				
				var nodes = elementsByClassName(oDiv, "box");

				alert(nodes.length);
				alert(nodes[1].tagName);
			}
		</script>
	<body> 
		<div id = "div1">
			<span class = "box">span</span>
			<button class = "box">button1</button>
			<button>button2</button>
		</div>
		<div class = "box">div</div>
	</body>

8、练习

写一个定时器,每个一秒修改一次div内文本颜色和文字大小.
最开始这个文字是默认大小,大小开始增大,当增大了6次以后,
文字大小开始缩小,缩小6次,文字再开始增大。


<script>
			window.onload = function(){
				var oDiv = document.getElementById("div1");

				var i = 1; //代表一共变化了多少次字体大小。
				var speed = 10; //字体大小变化的速度。



				setInterval(function(){
				    //颜色随机方法在上面
					oDiv.style.color = randomColor();
					//1、获取当前的字体大小
					var currentFontSize = parseInt(oDiv.style.fontSize);
					//2、累加
					oDiv.style.fontSize = currentFontSize + speed + "px";
					if(i % 6 == 0){
						speed *= -1;
					}
					i++;
				}, 100);
			}
		</script>
	</head>
	<body>
		
		<div id = "div1" style = "font-size: 18px">
			我是要变化的文本
		</div>
	</body>

9、总结，获取元素

        <style>
			/*选择器*/
			#div1{
				 100px;
				height: 100px;
			}
			.box{
				background-color: red
			}
			div{
				border: 1px solid black;
			}
		</style>
		<script>
			/*
				document.getElementById();
				node.getElementsByTagName();
				node.getElementsByClassName();
				document.getElementsByName();
			*/

			/*
				封装函数
				#id     通过id获取元素
				.class  通过class获取元素
				tagName 通过tagName获取元素
				name=xxx通过name获取元素
			*/
			function $(vArg){
				switch(vArg[0]){
					case "#"://id
						return document.getElementById(vArg.substring(1));
						break;
					case "."://class
						return elementsByClassName(document, vArg.substring(1));
						break;
					default:
						var subStr = vArg.substring(0, 5);
						if(subStr == "name="){
							//name
							return document.getElementsByName(vArg.substring(5));
						}else{
							//tagName
							return document.getElementsByTagName(vArg);
						}
						break;
				}
			}

			function elementsByClassName(node, className){
				var nodes = node.getElementsByTagName("*");
				var nodeArr = [];
				//2、通过循环，找出class = box的节点
				for(var i = 0; i < nodes.length; i++){
					if(nodes[i].className == className){
						nodeArr.push(nodes[i]);
					}
				}
				return nodeArr;
			}

			window.onload = function(){
				//id = div1
				// alert($("#div1").id);

				//class = "box"
				// alert($(".box").length);
				// alert($(".box")[2].tagName);

				//name='hello'
				// alert($("name=hello").length);

				//tagName
				alert($("li").length);
			}

		</script>


	<body>
		<div id = "div1" class = "box"></div>
		<span class = "box">span</span>
		<ul>
			<li>1</li>
			<li>2</li>
			<li class = "box">3</li>
		</ul>
		<input type="text" name = "hello" />
		<textarea name="hello" id="" cols="30" rows="10"></textarea>
	</body>

10、Attribute

设置属性
setAttribute()
格式：元素节点.setAttribute(key, value);

获取属性
getAttribute();
格式：元素节点.getAttribute(key)

删除属性
removeAttribute();
格式：元素节点.removeAttribute(key)

        <script>
		
			window.onload = function(){
				var oDiv = document.getElementById("div1");
				//获取属性
				// alert(oDiv.title);
				// alert(oDiv.getAttribute("title"));

				// oDiv.title = "world";
				// oDiv.setAttibute("title", "world");

				/*
					1、class
				*/
				/*alert(oDiv.className);
				oDiv.className = "box2";*/

				/*alert(oDiv.getAttribute("class"));
				oDiv.setAttribute("class", "xxx");*/

				/*
					2、自定义属性
				*/
				// alert(oDiv.xxx);
				// alert(oDiv.getAttribute("xxx"));

				// oDiv.xxx = "yyy";
				//oDiv.setAttribute("xxx", "yyy");


				/*
					3、removeAttribute()
				*/
				// oDiv.className = "";
				oDiv.removeAttribute("class");
			}
		</script>
	
	<body>
		<div id = "div1" title = "hello" class = "box"></div>
	</body>

11、节点属性

三种：
++1、元素节点++

<div></div>

++2、属性节点 id = "div1"
3、文本节点 div文本通过元素节点的子节点找到的。++

元素节点的属性：
childNodes
firstChild
lastChild

**【注】只获取子节点中的元素节点 **
children
firstElementChild
lastElementChild

parentNode 当前节点的父节点
previousSibling 找出当前节点的兄弟节点中上一个节点
nextSibling 找出当前节点的兄弟节点中下一个节点

            window.onload = function(){
				var oDiv = document.getElementById("div1");
				// alert(oDiv.childNodes.length);
				/*alert(oDiv.childNodes[0]);
				alert(oDiv.childNodes[1]);*/

				alert(oDiv.firstChild);
				alert(oDiv.lastChild);
			}

            window.onload = function(){
				var oDiv = document.getElementById("div1");
				// alert(oDiv.childNodes.length); //5
				// alert(oDiv.childNodes[0]);
				
				// alert(oDiv.children.length);
				/*alert(oDiv.children[0]);
				alert(oDiv.children[1]);*/
				/*alert(oDiv.firstElementChild.tagName);
				alert(oDiv.lastElementChild.tagName);*/


				// alert(oDiv.parentNode.tagName);

				// alert(oDiv.previousSibling);
				alert(oDiv.nextSibling)
			}

			/*
				如何忽略空白节点
			*/
		</script>

	<body>
		<strong>strong2</strong>
		<div id = "div1">
			<strong>strong</strong>
			div文本
			<span>span</span>
			xxxx
		</div>
		<h1>h1</h1>
	</body>

12、节点属性

++元素节点
文本节点
属性节点++ 都有:
nodeName nodeType nodeValue

节点属性

            window.onload = function(){
				var oDiv = document.getElementById("div1");
				/*alert(oDiv.nodeName);
				alert(oDiv.nodeType);
				alert(oDiv.nodeValue);*/

				alert(oDiv.firstChild.nodeName);  //#text
				alert(oDiv.firstChild.nodeType);  //3
				alert(oDiv.firstChild.nodeValue); //
			}

13、忽略空白节点方法

        <script>
			window.onload = function(){
				var oDiv = document.getElementById("div1");
				/*
				文本节点
					nodeName  #text
					nodeType  3
					nodeValue 文本的值
				*/

				alert(oDiv.childNodes.length);
				// alert("|" + oDiv.firstChild.nodeValue + "|");


				//字符串中的
代表换行  
进纸字符
				/*var str = "  	
    ";
				var res = /^s+$/.test(str);
				alert(res);*/

				filterSpaceNode(oDiv);
				alert(oDiv.childNodes.length);
				alert(oDiv.childNodes[0].tagName);
				alert(oDiv.childNodes[1].nodeValue);
			}

			/*
				匹配纯空白字符串(包含空格，回车，tab，换行)
				正则表达式
				/^s+$/.test()  是纯空白，返回true，否则，返回false
			*/
			function filterSpaceNode(node){
				var nodes = node.childNodes;
				//通过循环找到所有的空白节点
				for(var i = 0; i < nodes.length; i++){
					if(nodes[i].nodeType == 3 && /^s+$/.test(nodes[i].nodeValue)){
						//肯定是空白
						//将这个空白节点删除。
						node.removeChild(nodes[i]);
					}
				}
			}
		</script>
	</head>
	<body>
		<div id = "div1">
			<strong>strong</strong>
			文本
			<h1>h1</h1>
		</div>
	</body>

14、属性节点

元素节点
文本节点 : 元素节点的子节点
属性节点

节点属性

        <script>
			/*
				元素节点
				文本节点  元素节点的子节点
				属性节点
			*/

			window.onload = function(){
				/*
					attributes 获取当前元素节点所有属性节点
				*/
				var oDiv = document.getElementById("div1");
				// alert(oDiv.attributes.length);

				//oDiv.attributes.getNamedItem(key)

				//object Attr
				/*
					nodeName   该属性节点的属性名
					nodeType   2
					nodeValue  该属性节点的值
				*/
getNamedItem() 方法返回节点列表中指定属性名的值。

				// alert(oDiv.attributes.getNamedItem("id"));

				/*alert(oDiv.attributes.getNamedItem("id").nodeName);
				alert(oDiv.attributes.getNamedItem("id").nodeType);
				alert(oDiv.attributes.getNamedItem("id").nodeValue);*/


				/*alert(oDiv.attributes["id"].nodeName);
				alert(oDiv.attributes["id"].nodeType);
				alert(oDiv.attributes["id"].nodeValue);*/

				


				//object NamedNodeMap  集合
				/*
					集合：
					1、不重复
					2、无序
				*/
			}
		</script>
	</head>
	<body>
		<div  class = "box" title = "hello" name = "world" id = "div1"></div>
	</body>

15、createElement

document.write在写入内容的时候，会将原有的内容覆盖掉
document.createElement(标签名);
++返回值：创建好的该标签对象++

document.createTextNode()
功能：创建文本节点

DOM节点操作

<script>
			function btnClick(){
				//有一个span节点
				//创建一个span节点
				/*
				document.createElement(标签名);     
                返回值：创建好的该标签对象	
				*/
				var oDiv = document.getElementById("div1");
				var oSpan = document.createElement("span");
				//给span节点填充文本
				/*
					document.createTextNode()
					功能：创建文本节点
				*/
				/*var oTxt = document.createTextNode("span的内容");
				oSpan.appendChild(oTxt);*/

				oSpan.innerHTML = "span的内容";


				/*
					node1.appendChild(node2)
					功能：将node2插入到node1的子节点内，并且，是子节点的末尾。
				*/
				oDiv.appendChild(oSpan);
			}
		</script>
	</head>
	<body>
		<button onclick = "btnClick();">按钮</button>
		<div id = "div1">
			<strong>strong</strong>
			<h1>h1</h1>
		</div>
	</body>

16、insertBefore

        <script>
			function btnClick(){
				/*
					insertBefore()
					格式：父节点.insertBefore(node1, node2)
					功能：将node1节点插入到node2节点的前面
				*/

				var oStrong = document.createElement("strong");
				var oDiv2 = document.getElementById("div2");
				var oDiv1 = document.getElementById("div1")
				// oDiv2.parentNode.insertBefore(oStrong, oDiv2);

				oDiv2.appendChild(oStrong);

				setTimeout(function(){
					oDiv1.appendChild(oStrong);
				}, 4000);

			}

			//node1插入到node2的后面
			function insertAfter(node1, node2){
				//1、node2后面还有别的元素
				//2、node2已经是最后一个了，直接插入到
				if(node2 == node2.parentNode.lastChild){
					node2.parentNode.appendChild(node1);
				}else{
					node2.parentNode.insertBefore(node1, node2.nextSibling);
				}
			}
		</script>
	</head>
	<body>
		<button onclick = "btnClick();">按钮</button>
		<div id = "div2"></div>
		<div id = "div1"></div>
	</body>

17、节点操作

        <script>
			function btnClick(){
				/*
					replaceChild()
					格式：父节点.replaceChild(node1, node2);
					功能：用node1替换node2
				*/

				/*var oSpan = document.createElement("span");
				var oDiv = document.getElementById("div1");
				oDiv.parentNode.replaceChild(oSpan, oDiv);*/

				/*
					cloneNode()
					参数：true/false 如果true，将该标签和标签间内容，全部克隆
					返回值：新克隆好的元素节点
				*/
				/*var oDiv = document.getElementById("div1")
				var newNode = oDiv.cloneNode(true);
				document.body.appendChild(newNode);*/

				/*
					removeChild()
					格式：parentNode.removeChild(node)
					功能：删除node这个节点
				*/
				var oDiv = document.getElementById("div1")
				oDiv.parentNode.removeChild(oDiv);
			}

		</script>
	</head>
	<body>
		<button onclick = "btnClick();">按钮</button>
		<div id = "div1">div1</div>
	</body>

相关阅读:
(转)RSS在.net下面的调用以及使用
 WEB打印的一些资料，做项目的时候用到转来（转）
asp.net编码技巧汇集(转)也有自己的一些
 ASP.NET 中 DataGrid 导出到 Excel 的封装实现 (转)
(转)上传与下载需要考虑的
 正则表达式之全部符号解释(转)
开发过程遇到的无法打包问题的解决！
传入参数,导出dbf以及删除dbf的sql 存储过程
 (转贴)MDSN关于.net连接池的讨论
 一个SessionInterPagesHelper类 (转)挺不错的想法
原文地址：https://www.cnblogs.com/zhongchao666/p/9275510.html