dom基础自学

Day01：

1、每当你的html需要调用js时，都应该让html中的内容执行完毕，才可以调用js，否则会出现缺少参数的状况。这里有两种方法来解决这个问题：

1. 将调用js的命令行发在html文档的最后
2. 使用onload方法

window.function() {   /!*使用onload方法可以解决文档未加
                             载完的问题，当执行到这里是，先
                             将html文档加载完毕，再执行onload里的内容*!/
    }

2、通过id来查找元素
document.getElementById(‘box’)；
用来获取id为box的标签节点，然后可以对该标签进行各种操作。

1. tagName：获取该标签的标签名（div，p，ul等等，就是说明这是什么标签）
2. innerHTML：获取该标签中的文本内容，包括子标签
3. id：获取该标签id的值，这里div的id=box，则返回box
4. title：获取title的值，同上
5. style：获取style中的内容，这里返回的是[object CSSStyleDeclaration]
6. 也可以获取style中具体的内容：style.color，返回style中color的值，返回red
7. className：返回class的值

3、通过元素名来获取节点列表，得到的是一个数组。html内容如下：

	<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

此时js中写var box=document.getElementsByTagName(‘li’)； 获取的是所有li标签元素，而不是li中的内容。现在输出box，得到的是一个数组，输入box.length，返回3（一共有3个li）。

	alert(box[0]);*!/
    alert(box[0].tagName);//获取第一个li的标签名  LI
    alert(box[0].innerHTML);    //获取第一个li中的文本内容（也可以修改）

4、document.getElementsByName：根据标签中的name属性来找到元素

<input name="test" type="checkbox" value="ceshi" checked="checked" />

js里写var box=document.getElementsByName(‘test’)[0]； 因为input标签的name属性值为test，所以定位在此处，然后可以通过box.value和box.name来获取该标签下的所对应的属性的值

5、当定位到某个元素时，可以为该元素添加和修改属性和值
添加和修改：setAttribute 如果添加的属性不存在则添加，存在则覆盖
删除：removeAttribute

/*window.function () {
    var box=document.getElementById('box');
    box.setAttribute('class','pox'); //为指定的节点添加属性和值,如果已存在则覆盖
    box.setAttribute('style','color:red');//ie7即以下不支持
}*/
/*window.function (){
    var box=document.getElementById('box');
    box.removeAttribute('style');//移除指定节点的某个属性
}*/

6、DOM节点
DOM节点有三种，分别是元素节点1、属性节点2和文本节点3，这些节点有三个常用属性：nodeName、nodeType和nodeValue

1. nodeType：获取指定元素的元素节点
2. nodeName：获取元素的名称
3. nodeValue：获取元素的值

window.function (){
    var box=document.getElementById('box');
    // alert(box.nodeType);//输出1，输出nodetype   元素节点为1
    // alert(box.childNodes);//获取当前元素的所有子节点
    alert(box.childNodes[0].nodeValue);//获取文本节点的文本内容
    alert(box.childNodes[1].innerHTML);//获取元素节点中的内容
}

使用getElementById找到指定的元素位置
使用childNodes方法，获取当前元素的所有子节点，返回的是一个数组
然后可以得到该数组的具体某一项

nodeValue和innerHTML的区别在于，前者返回文本节点本身的内容，后者返回元素内部的所有内容包括子节点的内容

分别使用nodeValue和innerHTML来修改文本内容

/*
window.function (){
    var pox=document.getElementById('pox');
    pox.innerHTML = '123<strong>123</strong>132';//修改整个div中的内容，并且可以带上strong标签
    pox.childNodes[0].nodeValue='<strong>666</strong>';//只修改div节点下第一个文本节点的文本内容，并且带上strong无效，变成了文本
}*/

Day2

昨天其实有一段讲的是如何忽略或清除html中的空白文本字符，本来我以为没啥用，今天看了看还是有用处的。比如我想通过定位好的元素，向他的后方添加一个节点，就需要用到清除空白字符方法。
为什么呢？
先看看我们是如何向元素后方添加一个节点的呢，目前已经知道insertBefore（）方法可以向该元素前创建一个节点。但是只有向前添加的，没有向后添加的方法。最简单的解决办法就是直接向该元素的下一个元素前添加一个节点，这样就达到了预期的效果。
代码如下

    var box = document.getElementById('booox'); //首先定位到boox的div元素处
    var p = document.createElement('p');	//创建一个元素p
    var text = document.createTextNode('123');	//创建一个文本节点test，文本内容为123
    p.appendChild(text);	//向p元素中添加这个text文本节点
    function insertAfter(newElement,targetElement) { //创建一个向后方添加节点的函数，参数为新节点和目标节点
       var parent = targetElement.parentNode;		//先取到目标节点的父节点
           parent.insertBefore(newElement, targetElement.nextSibling); //在父节点下的目标节点的后面一个元素的前面添加一个节点（有点乱）
    }
    insertAfter(p,box);

其实现在已经完成了想要的效果，但是如果目标节点已经是父节点的最后一个节点了，这时只要在父节点的最后插入一个子节点就可以了（代码优化），这时就需要加一个判断，如果当前目标节点时其父节点的最后一个子节点，那么此时直接使用appenChild（）方法，可以直接向其后方添加一个节点。
这时，问题就出现了：现在除IE浏览器外，其他浏览器无法自动忽略html文档中的空白字符，这时我的目标节点div已经是body中的最后一个节点了，但是标签之间还有换行和空格，他们以文本节点的形式，也算成了一个节点，我就没办法判断到当前目标节点时最后一个了，这时我就需要用上刚开始说的清除空白文本节点的方法了。
代码如下：

window.function () {
    var body = document.getElementsByTagName('body')[0]; //通过body定位，得到的时一个数组，选第一个
    filterSpanceNode(body.childNodes).length;	// 调用自定义的函数，来过滤掉空白文本节点
    var box = document.getElementById('booox');	//定位到id为boox的div上
    var p = document.createElement('p');	
    var text = document.createTextNode('123');
    p.appendChild(text);
    function insertAfter(newElement,targetElement) {
       var parent = targetElement.parentNode;
       if(parent.lastChild === targetElement){	//比上一段代码多了一个if判断，如果目标节点就是其父节点的最后一个子节点，name执行下面代码
           alert('last');	
           parent.appendChild(newElement);	//直接在父节点的最后插入了新节点
       }	
       else {
           parent.insertBefore(newElement, targetElement.nextSibling);
       }
    }
    insertAfter(p,box);//调用自定义函数，将新节点和目标节点传过去。
}

function filterSpanceNode(nodes) {  //创建清除空白文本节点方法
    for(var i=0;i<nodes.length;i++){	//获取当前body里所有子节点总数，开始一个循环
            if(nodes[i].nodeType === 3 && /^\s+$/.test(nodes[i].nodeValue)){ //当某个元素为文本节点且内容为空格时，执行下面一行代码
                nodes[i].parentNode.removeChild(nodes[i]);//删除该元素
            }
        }
    return nodes;//吧body里的所有元素过了一遍之后，返回nodes这个数组，这时数组中已经没有空白的文本节点了
}

这里总算是吧昨天忽略的东西补上了。。。

今天新学的是什么呢？
节点的操作

1. createElement（）：创建一个元素节点
2. appendChild（）：将一个新节点添加到某个子节点列表的尾部
3. creatTextNode（）：创建一个文本节点
4. insertBefore（）：在目标节点前插入一个节点
5. repalceChild（a，b）：把节点b换成节点a
6. cloneNode（ture ||false）:克隆节点，ture把节点中的内容一起克隆，false只克隆节点标签，不克隆内容
7. removeChild（）：删除指定节点