JavaScript DOM编程学习笔记

1.节点及其类型:
    1). 元素节点
    2). 属性节点-元素的属性,可以直接通过属性的方式来操作
    3). 文本节点-是元素节点的子节点

2.在html文档中的什么位置编写JS代码?
    1). 直接在html页面中书写代码
        缺点:①JS和html混用,不利于代码的维护
            ②若click响应函数是比较复杂的,则需要先定义一个函数,任何再onclick属性中完成对函数的引用,比较麻烦
    2). 一般的,不能在body节点之前来直接获取body节点,因此此时html文档还没有加载完成,获取不到指定的节点
    3). 可以在整个html文档的最后编写类似代码,也不符合习惯
    4). 一般在body节点之前编写JS代码,但需要利用window.onload事件,
            该事件在当前文档完全加载之后被触发,所有其中的代码可以获取当前文档的任何节点
        
3.如何来获取元素节点
    1).**document.getElementById:根据id属性来获取对应的单个节点
    2).**document.getElementsByTagName:根据标签名获取指定节点名字的数组,数组对象length属性可以获取数组的长度
    3).document.getElementsByName:根据节点的name属性获取符合条件的节点数组,
        但ie和w3c标准有差别,在html文档中若某节点(li)没有name属性,则ie使用getElementsByName不能获取到节点数组,但火狐可以
    4).其他的两个方法,ie不支持,所有不建议使用

4.获取属性节点
    1).
    2). 通过元素节点的getAttributeNode 方法来获取属性节点
        任何再通过nodeValue来读写属性值

5.获取元素节点的子节点(**只有元素节点才有子节点):
    1). ChildNodes 属性获取全部的子节点,但该方法不实用,
            因为要获取指定的节点的指定子节点的集合可以直接调用元素节点的getElemenetsByTagName()方法来获取
    2). firstChild 属性获取第一个子节点
    3). lastChild 属性获取最后一个子节点

6.获取文本节点
    1). 步骤: 元素节点-->获取元素节点的子节点
    2). 若元素节点只有文本节点一个子节点,例如<li id="bj" name="BeiJing">北京</li>, <p>你喜欢哪个城市?</p>,
            可以先获取到指定的元素节点eleNode, 然后利用eleNode.firstChild.nodeValue 的方法来读写其文本节点的值

7.节点的属性
    1). nodeName: 代表当前节点的名字,只读属性
    2). nodeType: 返回对应的节点的名字只读属性
    3). nodeValue: null, 属性值, 文本值,可读写属性

8.创建一个元素节点:
    1). createElement():按照给定的标签名创建一个新的元素节点,方法只有一个参数,被创建的元素节点的名字,是一个字符串
        方法的返回值:是一个指向新建节点的引用指针,返回值是一个元素节点,所以它的 nodeType 属性值为1
        **新元素节点不会自动添加到文档里,它只是一个存在于JavaScript上下文对象
        
9.创建一个文本节点:
    1). createTextNode():创建一个包含着给定文本的新文本节点,这个方法的返回值是一个指向新建文本节点引用指针,
        它是一个文本节点,所有它的NodeType属性等于3,方法只有一个参数,新建文本节点所包含的文本字符串,新元素不会自动添加到文档里
    
10.为元素节点添加子节点:
    1). appendChild():
        var reference = element.appendChild(newChild):
        给定子节点newChild将成为给定元素节点element的最后一个子节点.
        方法的返回值是一个指向新增子节点的引用指针
        
11.节点的替换:
    1). replaceChild(): 把一个给定父元素里的一个子节点替换为另外一个子节点
        var reference = element.replaceChild(newChild, oldChild);
        返回值是一个指向已被替换的那个子节点的引用指针
    2).该节点除了替换功能以外还有移动功能
    3).该方法只能完成单向替换,若需要使用双向替换,需要自定义函数:s

12.删除节点
    1). removeChild:从一个给定元素里删除一个子节点
        var reference = element.removeChild(node);
        返回值是一个指向已被删除的子节点的引用指针
        某个节点被removeChild()方法删除时,这个节点所包含的所有子节点全部被删除
        如果想删除某一个节点,但不知道他的父节点是哪一个,parentNode可以帮忙

13.插入节点:
    1). insertBefore():把一个给定节点插入到一个给定元素节点的给定子节点前面
        var reference = element.insertBefore(newNode, targetNode);
        节点newNode将被插入到元素节点element中并出现在节点targetNode
        element必须是element元素的一个子节点
        
    2). 自定义insertAfter()方法
        //把newNode插入到refNode的后面
        function insertAfter(newNode, refNode){
            //1.测试refNode是否为其父节点的最后一个子节点
            var parentNode = refNode.parentNode;
            if(parentNode){
                var lastNode = parentNode.lastChild;
                
                //2.若是:直接把newNode插入为refNode父节点的最后一个子节点
                if(refNode == lastNode){
                    parentNode.appendChild(newNode);
                }
                //3.若不是:获取refNode的下一个兄弟节点,然后插入到其下一个兄弟节点的前面
                else{
                    var nextNode = refNode.nextSibling;
                    parentNode.insertBefore(newNode, nextNode);
                }
            }
        }

14.innerHTML属性:
    1). 浏览器几乎都支持该属性,但不是dom标准的组成部分
        innerHTML属性可以用来读,写某给定元素里的HTML内容
        
15.其他属性,参看API