DOM

DOM
DOM 是Document Object Model( 文档对象模型 )的缩写。DOM是把html里面的各种数据当作对象进行操作的一种思路。
一.节点概念
1.节点概念
DOM把所有的html都转换为节点，整个文档是节点，元素是节点，元素属性是节点，元素内容是节点。注释也是节点
document 得到对应文档节点 [object HTMLDocument]
document.getElementById("d1") 得到对应元素节点 [object HTMLDivElement]
document.getElementBYId("d1").attrubutes[0] 得到对应属性节点 [object Attr]
document.getElementBYId("d1").childNodes[0] 得到对应内容节点 [object Text]
二.获取节点
1.通过id获取元素节点
document.getElementById("d1");
2.通过标签名称获取元素节点
var divs = document.getElementsByTagName("div");
divs[i] 注意 根据标签名称获取一个元素数组
3.通过类名获取元素节点
var elements= document.getElementsByClassName("d");
elements[i] 注意 getElementsByClassName 根据class返回一个节点数组
4.通过表单元素的name获取元素节点
var elements= document.getElementsByName("userName"); userName是根据name属性的值
elements[i]
5.为什么会获取不到?
因为javascript是解释语言，是顺序执行的,在执行到 document.getElementById的时候，div标签还没有加载，所以无法获取
6.获取属性节点
getElementById获取元素节点，然后通过元素节点的attributes获取其下所有的属性节点。
var div1 = document.getElementById("d1");
var as = div1.attributes;
as[i].nodeName
as[i].nodeValue
as["id"].nodeValue div的id属性值
7.获取内容节点
首先通过document.getElementById获取元素节点，然后通过childNodes获取其所有的子节点。 其中第一个子节点，就是其内容节点，
然后借助nodeName和nodeValue把内容节点的名称和值打印出来。
var div1 = document.getElementById("d1");
var content = div1.childNodes[0];
content.nodeName div的内容节点名
content.nodeValue div的内容节点值
三.节点的属性
1.节点名称
nodeName表示一个节点的名字
document.nodeName 文档的节点名， 固定的 #document
div1.nodeName 元素的节点名 对应的标签名 div
div1.attributes[0].nodeName 属性的节点名 对应的属性名 id
div1.childNodes[0].nodeName 内容的节点名 固定的 #text
2.节点值
nodeValue表示一个节点的值
document.nodeValue 文档的节点值 null
div1.nodeValue 元素的节点值 null
div1.attributes[0].nodeValue 属性的节点值 对应的属性值 d1
div1.childNodes[0].nodeValue 内容的节点值 内容 即： #text
3.节点的类型
document.nodeType 文档的节点类型 9
div1.nodeType 元素的节点类型 1
div1.attributes[0].nodeType 属性的节点类型 2
div1.childNodes[0].nodeType 内容的节点类型 3
4.修改元素的文本内容
第一种：document.getElementById("d1").childNodes[0].nodeValue= "通过childNode[0].value改变内容";
第二种：document.getElementById("d1").innerHTML= "通过innerHTML改变内容";
5.元素上自定义属性值得获取
第一种：input1.getAttribute("test")
第二种：input1.attributes["test"].nodeValue
四.样式
一个元素节点的style属性即对应的css

1. 隐藏和显示 通过给元素的style.display 赋值，改变显示还是隐藏
   var d = document.getElementById("d");
   d.style.display="none"; 隐藏
   d.style.display="block"; 显示
   2.改变背景色 通过给元素的style.backgroundColor赋值，修改样式
   d1.style.backgroundColor="green";
   五.事件
   1焦点事件
   焦点相关的事件，分别有获取焦点和失去焦点
   当组件失去焦点的时候。会触发onblur事件，当组件获取焦点的时候，会触发onfocus事件
   document.getElementById("message").innerHTML="输入框1获取了焦点";
   document.getElementById("message").innerHTML="输入框1丢失了焦点";
   2.鼠标事件（鼠标事件，鼠标按下，鼠标弹起，鼠标经过，鼠标进入，鼠标退出几个事件组成）
   当在组件上鼠标按下的时候，会触发onmousedown事件
   当在组件上鼠标弹起的时候，会触发onmouseup事件
   当在组件上鼠标经过的时候，会触发onmousemove事件
   当在组件上鼠标进入的时候，会触发onmouseover事件
   当在组件上鼠标退出的时候，会触发onmouseout事件
   3.键盘事件
   键盘事件，由键盘按下keydown，键盘按下keypress,键盘弹起onkeyup几个事件组成
   当在组件上键盘按下的时候，会触发onkeydown事件 e.keyCode;
   当在组件上键盘按下的时候，也会触发onkeypress事件 e.keyCode
   当在组件上键盘弹起的时候，会触发onkeyup事件
   注: onkeypress 是当按下并弹起的组合动作，这个说法是错误的
   都是用于表示键盘按下，onkeydown和onkeypress的区别在什么呢？
   onkeydown（可以获取修饰键，但无法获取大小写）
   可以获取所有键，除了打印键Prts
   可以获取用户是否点击了修饰键 (ctrl,shift,alt)
   不能判断输入的是大写还是小写
   onkeypress （无法获取修饰键，但可以获取大小写）
   只能获取字符键
   不能获取用户是否点击了修饰键 (ctrl,shift,alt)
   可以判断输入的是大写还是小写
   但是！ 在不同的浏览器上，以上规则是不成立的,你无法控制用户到底使用哪种浏览器。 所以，只要记得keydown和keypress都表示点下了键。。。即可
   4.点击事件 点击事件，由单击，双击按两个事件组成
   当在组件上单击的时候，会触发onclick事件
   当在组件上双击的时候，会触发ondblclick事件
   注1：在组件上，按下空格或则回车键也可以造成单击的效果，但是却不能造成双击的效果
   5.变化事件 当组件的值发生变化的时候，会触发onchange事件
   注：对于输入框而言，只有在失去焦点的时候，才会触发onchange，所以需要点击一下"按钮" 造成输入框失去焦点
   onchange
   6.提交事件
   当form元素@提交的时候，会触发onsubmit事件
   onsubmit
   7.加载事件
   当整个文档加载成功，或者一个图片加载成功，会触发加载事件,当body元素或者img@加载的时候，会触发onload事件
   onload
   8.当前组件
   this表示触发事件的组件，可以在调用函数的时候，作为参数传进去
   singleClick(this) this代表代表button类型的组件
   9.阻止事件的发生
   阻止原本表单的提交，当onSubmit得到的返回值是false的时候，表单的提交功能就被取消了
   onsubmit="return login()"

六.节点关系
1.父节点关系
DIV->DIV[id=parentDiv]->body->html->document
parentNode 获取父节点
2.同胞节点关系
previousSibling 获取前一个同胞节点
nextSibling 获取后一个同胞节点
注意：d1和d2标签是紧挨着的，所以到d2前一个节点是d1，通过previousSibling获取前一个节点
d2和d3标签不是紧挨着点，标签之间任何字符，空白，换行都会产生文本元素，所以获取到节点为#text
3.子节点关系
firstChild 第一个子节点
lastChild 最后一个子节点
childNodes 所有子节点
注意：firstChild如果父节点的开始标签和第一个元素的开始标签之间有文本、空格、换行，那么firstChild第一个子节点将会是文本节点，不会是第一个元素节点，lastChild和firstChild同理。本例中第三个元素的结束标签与div的结束标签紧挨着，所以最后一个子节点就是第三个标签，
div.childNodes.length子节点的个数是六个，应为parentDiv的子节点是文本节点接着一个元素节点。
4.childNodes和children的区别
document.getElementById("parentDiv").childNodes.length 结果为6
document.getElementById("parentDiv").children.length 结果为3
childNodes和children都可以获取一个元素节点的子节点，childNodes会包含文本节点，children会排出文本节点

七.创建节点
1.创建元素节点
var hr=document.createElement("hr"); 通过createElement创建新的元素节点，标签名称为

---

var div1 = document.getElementById("d"); 获取元素节点
div1.appendChild(hr); 接着把该元素节点，通过appendChild加入另一个元素节点中
2.创建文本节点(内容节点) 一般将内容节点追加到元素节点中
var text=document.createTextNode("字符串")； 通过createTextNode创建一个内容节点text
div1.appendChild(text);
3.创建属性节点
var a=document.createElement("a");
var content=document.createTextNode("http://12306.com");
a.appendChild(content);
var href=document.createAttribute("href"); //双引号中的等同于标签中的属性名
href.nodeValue="http://12306.com";
a.setAttributeNode(href); //该属性设置到元素节点上。
var div1=document.getElementById("d");
div1.appendChild(a);
一般思路：首先创建一个元素节点a，接着创建一个内容节点content，把内容节点加入到元素节点，然后通过createAttribute创建一个属性节点href，设置href的值为12306.com，通过setAttributeNode把该属性设置到元素节点上。

八.删除节点
1.删除元素节点 removeChild
var parentDiv = document.getElementById("parentDiv");
var div2= document.getElementById("div2");
parentDiv.removeChild(div2);
一般思路：第一：先获取该元素的父节点，第二，通过父节点，调用removeChild删除该节点
2.删除属性节点
var link=document.getElementById("link");
link.removeAttribute("href");
一般思路：第一：先获取该元素节点，第二，调用removeAttribute删除指定的元素节点
3.删除文本节点
var parentDiv = document.getElementById("parentDiv");
var textNode = parentDiv.childNodes[0]; （注children(）[0]只能获取第一个子元素节点，不能获取文本节点）
parentDiv.removeChild(textNode);
第一种方法：通过childNodes[0]获取文本节点，再通过removeChild删除该文本节点
parentDiv.innerHTML="";
第二种方法：通过childNodes[0]获取文本节点， 通过innerHTML=""的方式删除文本节点

九.替换节点 通过replaceChild进行节点的替换
var parentDiv = document.getElementById("parentDiv");
var d4 = document.createElement("div");
var text = document.createTextNode("第四个div");
d4.appendChild(text);
var d3 = document.getElementById("d3");
parentDiv.replaceChild(d4, d3); //第一个参数是保留的节点，第二个参数是被替换的节点
一般思路：1.获取父节点 2.创建子节点 3.获取被替换子节点 4.通过replaceChild进行替换

十.插入节点
appendChild 追加节点
insertBefore 在前方插入节点
3.动态加载js 对应传统加载js文件的办法 <script src="/study/hello.js"></script>
var newScript=document.createElement('script');
newScript.src='http://how2j.cn/study/test3041.js';
var firstScript = document.getElementsByTagName("script")[0];
firstScript.parentNode.insertBefore(newScript,firstScript);