JavaScript-helloWorld

1.写js代码的位置

　　由helloWorld.html，helloWorld2.html，helloWorld3.html可知
　　　　>html页面的加载顺序是由上到下的
　　　　>标准的写法是helloWorld.html的写法，window.onload可以使方法是在页面加载完成后才执行的
　　　　>helloWorld2.html中的写法固然简单，但html语句和js代码耦合在了一起
　　　　>helloWorld3.html可知各个位置的区别
　　　　><script>放在整个页面的最后写又不符合js代码的书写习惯

2.获取节点

节点分为三种：元素节点;属性节点;文本节点

01.获取元素节点（3种方式）
    //只有document有这个方法，并且id要求唯一
    var taobao = document.getElementById("taobao");

    //只有document有这个方法，通过节点的name属性来获取节点
    var qqs = document.getElementsByName("qq1");

    //document和taobao（节点对象）都有这个方法，通过节点标签的名字来获取节点
    var nodes = taobao.getElementsByTagName("br");

02.读写属性节点
    01.
    //通过.的方式来获取和修改节点的属性值
    var attr = document.getElementById("attr");
    alert(attr.value);//获取属性节点的值
    attr.value = "你好";//修改属性节点的值
    02.
    node.getAttributeNode("id");

03.获取子节点的方法
    //得到父节点
    var c1 = document.getElementById("form");
    //通过.childNodes得到所有的子节点
    alert(c1.childNodes.length);
    //通过.firstChild得到第一个子节点
    alert(c1.firstChild.name);
    //通过.lastChild得到最后一个子节点
    alert(c1.lastChild);
    //通过Node对象的getElementsByTagName来获取子节点
    var cc = c1.getElementsByTagName("input");
    alert(cc[0].name);

04.读写文本节点
    文本节点一般是子节点，可以先获取到子节点，然后通过.nodeValue来获取文本内容
        var c2 = document.getElementById("form");
        alert(c2.lastChild.nodeValue);

3.节点的三个属性

    window.onload = function () {
        var btns = document.getElementsByTagName("button");
        //元素节点
        var btn = btns[0];
        alert(btn.nodeType);//1
        alert(btn.nodeName);//BUTTON
        alert(btn.nodeValue);//null
        //文本节点
        var text = btn.firstChild;
        alert(text.nodeType);//3
        alert(text.nodeName);//#text
        alert(text.nodeValue);//点我
        //属性节点
        var att = btns[1].getAttributeNode("name");
        alert(att.nodeType);//2
        alert(att.nodeName);//name
        alert(att.nodeValue);//jyf

    }
    nodeType和nodeName是只读的
    nodeValue是可以修改的
    只有文本节点的nodeValue是常用的

4.操作节点

1.创建元素节点
    document.createElement("");返回值是元素节点的引用，其中的字符串参数为TagName

2.创建文本节点
    document.createTextNode("");返回值是文本节点的引用，其中的字符串参数为文本内容
3.为元素节点添加子节点
    var element = document.createElement("li");
    element.appendChild(document.createTextNode("你好");会作为element节点的最后一个子节点添加<li>你好</li>

4.替换子节点
    bParentNode.replaceChild(aNode2, bNode);//替换子节点,把aNode2替换为bNode
    //replaceChild方法返回原子节点的引用，且新子节点（bNode）从原来的位置被移动到原节点（aNode）的位置
    aParentNode.replaceChild(bNode, aNode);
    若要使两个节点互换，需自己定义方法实现
        function replaceEach (aNode, bNode) {
            var aParentNode = aNode.parentNode;//获取父节点
            var bParentNode = bNode.parentNode;
            var aNode2 = aNode.cloneNode(true);//克隆节点，若参数为true表示带子节点的克隆
            bParentNode.replaceChild(aNode2, bNode);//替换子节点,把aNode2替换为bNode
            //replaceChild方法返回原子节点的引用，且新子节点（bNode）从原来的位置被移动到原节点（aNode）的位置
            aParentNode.replaceChild(bNode, aNode);
        }

5.获取父节点
    var aParentNode = aNode.parentNode;//获取父节点

6.删除节点
    this.parentNode.removeChild(this);返回值为被删除的节点

7.额外
    //将输入框中的内容的开头和结尾去除空格
    var reg = /^\s*|\s*$/g;
    content = content.replace(reg,"");
    document.getElementsByName("content")[0].value = content;
    //若去掉空格后为“”，那就弹出请输入名字
    if(content == "") {
        alert("请输入名字");
        return false;//若这个方法是响应在submit的onclick上面的，那么return false，表单是不会提交的
    }
    //有实验可知，就算不去掉开头和结尾的空格，添加上的开头和结束的空格也会自动去除

5.获取子节点

1.firstChild
2.lastChild
3.getElementsByTagName("");
4.childNodes

Node节点的方法，带括号的在使用时需要带括号，不带括号的直接.就能用

事件后面跟的方法的注意点：

//aNodes[i].onclick = remove3;
//这里写remove3()和remove3是不同的：
//前者表示当节点被点击时响应remove3方法的返回值，所以在页面加载完成后会直接执行remove3方法
//后者不加括号代表的remove3方法应用，会响应时执行方法体,且return false会取消节点的默认响应行为

单选框的注意点：

//若单选框节点被选中那么checked数据就会存在
    if (typeNodes[i].checked) {}

循环体中要注意的点：

        var lis = document.getElementsByTagName("li");
        for (var i = 0; i < lis.length ; i++) {
            /*可以的
            lis[i].onclick = function () {
                alert(this.firstChild.nodeValue);
            }
            */

            //lis[i].onclick = alert("nihao");
            //这样不行,一开始就会先弹出五次nihao。因为这句的意思是将alert方法的结果返回到onclick事件，所以会先执行方法

            /*这样不管点哪一个都是5，因为当点击时循环已经结束了，i就是5
            lis[i].onclick = function () {
                alert(i);
            }
            */

            lis[i].onclick = tanchu;//这样是可以的，因为tanchu是方法的引用

            //lis[i].onclick = tanchu();//这样写不行，同lis[i].onclick = alert("nihao");

            function tanchu () {
                alert(this.firstChild.nodeValue);
            }
        }

注意空白文本节点的存在