DOM知识块的笔记总结

js的dom


dom是document object model文档对象模型的缩写。

d：文档- html文档  或 xml文档
o：对象-document 对象的属性和方法
m：模型



html文件加载到内存之后会形成一颗dom树，根据这些节点对象我们可以进行脚本代码的动态修改。


在dom树中一切皆为节点对象。



节点：

由结构图我们可以看出，整个文档就是一个文档节点。
每一个html标签都是一个元素节点
标签中的文字是文本节点
标签中的属性是属性节点
一切都是节点。。。




节点树：

我们从途中可以看出，最上面的就是树根，
节点之间有父子关系，子孙关系，兄弟关系。
直接连线的就是父子关系，
有一个父亲的就是兄弟关系。






dom中的方法和属性：


查找元素节点
getElementById():寻找一个有着给定id属性值的元素，返回值是一个有着给定id属性的元素节点。
如果不存在这样的元素，返回null
该方法只能用于document对象


<script type="text/javascript">
//输出<input type="text" name="userName" id="id1" value="momo"/>value属性的值
/* var inputNode = document.getElementById("id1");
alert(inputNode.value);
  */
//输出<input type="text" name="userName" id="id1" value="momo"/>type属性的值
var inputNode = document.getElementById("id2");
alert(inputNode.type);


查找元素节点
getElementsByName():寻找有着给定name属性的所有元素，这个方法返回一个节点集合，这个集合我们把它当做数组来处理，
这个集合的length属性等于当前文档中有着给定name属性的所有元素的总个数。

<script type="text/javascript">
//通过元素的name属性获取所有元素的节点
//var inputNodes = document.getElementsByName("userName");
//输出数组的长度
//alert(inputNodes.length);
//遍历元素，输出所有value属性的值
/* for(var i=0;i<inputNodes.length;i++){
var inputNode = inputNodes[i];
alert(inputNode.value);
} */


//为我们的每一个输入框添加onchange事件，当值改变时，输出改变后的值
var inputNodes = document.getElementsByName("userName");
for(var i=0;i<inputNodes.length;i++){
var inputNode = inputNodes[i];
inputNode.onchange = function(){
alert(this.value);
};
}
</script>


查找元素节点
getElementsByTagName():寻找有着给定标签名的所有元素，返回一个节点集合，把它当做数组来出来，
这个集合的length属性等于当前文档中有着给定标签名的所有元素的总个数
该方法不必非要用在整个文档上。可以用在某个特定元素的子节点当中寻找有着给定标签名的元素。


<script type="text/javascript">
//获取所有的input元素，返回值是一个数组
var inputNodes = document.getElementsByTagName("input");
//输出数组长度
//alert(inputNodes.length);
//遍历输出value值
/* for(var i=0;i<inputNodes.length;i++){
var inputNode = inputNodes[i];
alert(inputNode.value);
} */
//输出type="text"中value属性的值 不包含按钮（button）
/* for(var i=0;i<inputNodes.length;i++){
var inputNode = inputNodes[i];
if(inputNode.type=="text"){
alert(inputNode.value);
}
} */


//输出所有下拉框select的option标签中value的值
/* var optionNodes = document.getElementsByTagName("option");
for(var i=0;i<optionNodes.length;i++){
var optionNode = optionNodes[i];
alert(optionNode.value);
*/


//输出下拉菜单中id=sele1中option标签中value属性的值
/* var sele = document.getElementById("sele1");
var optionNodes = sele.getElementsByTagName("option");
for(var i=0;i<optionNodes.length;i++){
var optionNode = optionNodes[i];
alert(optionNode.value);
} */


//点击输出按钮，输出下拉框中被选中的值
var btn = document.getElementById("btn");
btn.onclick = function(){
var optionNodes = document.getElementsByTagName("option");
for(var i=0;i<optionNodes.length;i++){
var optionNode = optionNodes[i];
if(optionNode.selected){
alert(optionNode.value);
}
}
};


</script>





查看是否存在子节点
hasChildNodes();该方法是用来检查一个元素是否有子节点，返回值是 true 或 false
var booleanValue = element.hasChildNodes();
文本节点和属性节点不可能再包含任何子节点，所以这两种节点使用hasChildNodes()方法的返回值永远是false
如果hasChildNodes()方法的返回值是false，那么childNodes，firstChild, lastChild 将是空数组和空字符串


//查看id=sele1的节点时候含有子节点
var sele = document.getElementById("sele1");
alert(sele.hasChildNodes());


//查看id=id1的节点是否含有子节点
var int = document.getElementById("id1");
alert(int.hasChildNodes());




文档中的每个节点都有一下属性：
dom属性 - nodeName

nodeName:一个字符串，内容是给定节点的名字
var name = node.nodeName;
-如果节点是元素节点，nodeName返回的是这个元素的名称
-如果是属性节点，nodeName返回的是这个属性的名称
-如果是文本节点，nodeName返回的是一个内容为#text的字符串


注意：nodeName 是一个只读属性。


dom属性 - nodeType
nodeType 返回一个整数，这个数值代表着给定节点的类型。
nodeType 属性返回的整数值对应着节点的类型，常用的有三种：
Node.ELEMENT_NODE  ----  1    --- 元素节点
Node.ATTRIBUTE_NODE  ----  2   ---属性节点
Node.TEXT_NODE    ------ 3     ---文本节点

注意：nodeType 是一个只读属性。


dom属性 - nodeValue
nodeValue 返回给定节点的当前值（字符串）
-如果给定节点是一个属性节点，返回值是这个属性的值
-如果给定节点是一个文本节点，返回值是这个文本节点的内容
-如果给定节点是一个元素节点，返回值是null


注意：nodeValue 是一个 读/写 属性，但是不能对元素节点的 nodeVale 属性设置值。
     可以为文本节点的 nodeValue属性设置一个值。
var node = document.getElementById("pid");
  if(node.firstChild.nodeType==3){
  node.firstChild.nodeValue="大宝";
  alert(node.firstChild.nodeValue);
  }




<script type="text/javascript">
//获得id=id1的元素节点，输出 nodeName,nodeType,nodeVale
/* var node = document.getElementById("id1");
alert(node.nodeName);//input
alert(node.nodeType);//1
alert(node.nodeValue);//null */


//获得id=pid的文本节点，输出nodeName,nodeType,nodeVale
/* var node = document.getElementById("pid");
var textnode = node.firstChild;
alert(textnode.nodeName);//#text
alert(textnode.nodeType);//3
alert(textnode.nodeValue);//大家好才是真的好！广州好迪！ */


//获得id=pid的属性节点，输出nodeName,nodeType,nodeVale
var node = document.getElementById("pid");
var p = node.getAttributeNode("id");
alert(p.nodeName);//id
alert(p.nodeType);//2
alert(p.nodeValue);//pid
</script>


替换节点
replaceChild():把一个给定父元素的一个子节点替换成另外一个子节点
var reger = element.replaceChild(newChild,oldChild);
<script type="text/javascript">
//点击某一个节点，替换成例外一个节点
var lol = document.getElementById("lol");
var javase = document.getElementById("javase");
lol.onclick = function(){
var parentNode = this.parentNode;
parentNode.replaceChild(javase,this);
};
</script>


查找属性值
getAttribute():返回一个给定元素的一个给定属性节点的值
var arrtibuteValue = element.getAttribute(attributeName);
给定属性的名字必须以字符串的形式传递给该方法
给定属性的值将以字符串的形式返回，如果给定属性不存在，那么该方法返回一个空字符串。


//获取<li id="javase" value="javase">javase</li>节点的value属性的值
/* var elementNode = document.getElementById("javase");
var str = elementNode.getAttribute("value");
alert(str); */


设置属性节点
setAttribute():将给定元素节点添加一个新的属性值或者改变它现有的属性值
element.setAttribute(attributeName,attributeValue);
属性的名字和属性值必须以字符串的形式传递给该方法。
如果这个属性已经存在，它的值就会被刷新
如果不存在，该方法会先创建该属性在为它赋值


//给<li id="lol" value="lol">lol</li>这个节点添加name属性，
var element = document.getElementById("lol");
element.setAttribute("name", "英雄联盟");
element.setAttribute("name", "王者荣耀");
alert(element.getAttribute("name"));


创建新的元素节点
createElement():按照给定的标签名创建一个新的元素节点。该方法只有一个参数，将要被创建的元素的名字，是一个字符串。
var reference = document.createElement(element);
该方法的返回值是一个指向新创建的节点的引用指针。返回是一个元素节点，所以他的nodeType属性值是1.


/* var li = document.createElement("li");
li.setAttribute("id", "kuihuabaodian");
li.setAttribute("value", "kuihuabaodian");

var text = document.createTextNode("葵花宝典");
li.appendChild(text);

var fu = document.getElementById("book");
fu.appendChild(li);


创建新的文本节点
createTextNode():创建一个包含给定文本的新的文本节点，这个方法的返回值是一个指向新建文本节点的引用指针。
var textNode = document.createTextNode(text);
该方法只有一个参数，该参数是新建文本节点所包含的文本内容字符串。
返回是一个文本节点，所以他的nodeType属性值是3.


插入节点
appendChild():给给定元素节点添加一个子节点。
var refer = element.appendChild(newChild);
给定子节点 newChild 成为给定元素节点 elemnt 的最后一个子节点。
该方法的返回值是一个指向新增子节点的引用指针。


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


//创建一个新的节点<li id="java" value="java">java</li>
var li = document.createElement("li");
li.setAttribute("id", "java");
li.setAttribute("value", "java");

var txt = document.createTextNode("java");
li.appendChild(txt);

//将新创建的节点插入到<li id="javaee" value="javaee">javaee</li>的前面
var ul = document.getElementById("book");
var lii = document.getElementById("javaee");

ul.insertBefore(li, lii);



删除节点
removeChild():从一个给定元素中删除一个子节点
var refer = element.removeChild(node);
返回值是一个指向被删除的子节点的引用指针。
某个节点被removeChild方法删除时，这个节点所包含的所有子节点将同时被删除。

//删除<ul id="book">节点下面的<li id="javassh" value="javassh">javassh</li>节点
var li = document.getElementById("javassh");
var ul = document.getElementById("book");
ul.removeChild(li);


遍历节点
ChildNodes:返回一个数组，这个数组由给定元素节点的子节点构成
var nodeList = node.childNodes
文本节点和属性节点不可能在包含任何子节点，所以他们的ChildNodes属性永远返回一个空数组。
如果想指导某个元素有没有子节点，可以用ChildNodes

注意：ChildNodes 属性是一个只读属性



获取第一个子节点
firstChird：该属性返回一个给定元素节点的第一个子节点。返回的是这个节点对象的指针。
var reger = node.firstChild
文本节点和属性节点不可能在包含任何子节点，所以他们的firstChild属性永远返回 null。
node.firstChild = node.ChildNodes[0];

注意：firstChild 属性是一个只读属性


获取最后一个子节点
lastChild:
nextSibling:返回一个给定节点的下一个兄弟节点。
parentNode:返回一个给定节点的父亲节点，这个属性返回的节点永远是一个元素节点。
document 没有父节点
previousSibling: 返回一个给定节点的上一个兄弟节点。



innerHTML属性
不是dom 标准的组成部分
innerHTML 属性可以用来读，写某个给定元素里的html内容


//使用innerHTML读取id=div中的文本内容
/* var div = document.getElementById("div1");
alert(div.innerHTML); */
//把<p>东方闪电</p>写入div中
/* var div = document.getElementById("div1");
div.innerHTML = "<h1>东方闪电</h1>"; */
//alert(div.innerHTML);