Java EE之旅05-JS基础（下）

js的BOM

回归一下，JS最初由网景公司创造，JS基本组成包括：

1. 核心（ECMAScript）：描述了JS的语法和基本对象
2. 浏览器对象模型（BOM）：与浏览器交互的方法和接口
3. 文档对象模型 （DOM）：处理网页内容的方法和接口

下面先来介绍BOM。

(1)window对象
    弹框的方法：
        提示框：alert("提示信息");
        确认框：confirm("确认信息");
            有返回值：如果点击确认返回true  如果点击取消 返回false
            var res = confirm("您确认要删除吗？");
            alert(res);
        输入框：prompt("提示信息");
            有返回值：如果点击确认返回输入框的文本 点击取消返回null
            var res =  prompt("请输入密码？");
            alert(res);
    open方法：
        window.open("url地址");           
        open("../jsCore/demo10.html");
        
    定时器：
        setTimeout(函数,毫秒值);
            setTimeout(
                function(){
                    alert("xx");
                },
                3000
            );
        clearTimeout(定时器的名称);
            var timer;
            var fn = function(){
                alert("x");
                timer = setTimeout(fn,2000);
            };
            var closer = function(){
                clearTimeout(timer);
            };
            fn();
        setInterval(函数,毫秒值);
        clearInterval(定时器的名称)
            var timer = setInterval(
            function(){
                alert("nihao");
            },
            2000
        );
        var closer = function(){
            clearInterval(timer);
        };
    
    注意：
        setTimeout在执行时，是在载入后延迟指定时间后，去执行一次表达式，记住，次数是一次性的。 
        setInterval则不一样，它从载入后，每隔指定的时间就执行一次表达式，周而复始的。

    需求：注册后5秒钟跳转首页
    恭喜您注册成功，5秒后跳转到首页，如果不跳转请点击这里
    
    
(2)location对象
    location.href="url地址";
(3)history对象
    back();
    forward();
    go();
    后一页
    
    
    
    
    

JS的DOM

1、理解一下文档对象模型

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

2、dom方法和属性

(1)getElementById-通过id获得元素节点对象
    例子：
    

        
        
    

    //输出id为mid的标签的信息
    var inputNode = document.getElementById("mid");
    alert("type:" + inputNode.type + "\nvalue:" + inputNode.value);

(2)getElementsByName-通过name获得节点对象集合（因为name同名可以有多个）
    例子：
    

        

        

        

        
    

    //通过元素的name属性获取所有元素的引用
    var inputNodes = document.getElementsByName("myname");
    //测试该数据的长度
    alert(inputNodes.length);
    //遍历元素,输出所有value属性的值
    for (var i = 0; i < inputNodes.length; i++) {
        var inputNode = inputNodes[i];
        alert(inputNode.value);
    }
    //为每个文本框()增加chanage事件,当值改变时,输出改变的值
    for (var i = 0; i < inputNodes.length; i++) {
        var inputNode = inputNodes[i];
        inputNode.onchange = function () {
            alert(this.value);
        };
    }

(3)getElementsByTagName-通过标签名称获得元素节点的集合

(4)hasChildNodes-查看元素节点是否含有子节点

(5)nodeName、nodeType、nodeValue属性

    每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
    nodeName（节点名称） 
    nodeValue（节点值） 
    nodeType（节点类型）

        1.nodeName
        nodeName 属性含有某个节点的名称。
        
        元素节点的 nodeName 是标签名称 
        属性节点的 nodeName 是属性名称 
        文本节点的 nodeName 永远是 #text 
        文档节点的 nodeName 永远是 #document 
        注释：nodeName 所包含的 XML 元素的标签名称永远是大写的

        2.nodeValue
        对于文本节点，nodeValue 属性包含文本。
        对于属性节点，nodeValue 属性包含属性值。
        nodeValue 属性对于文档节点和元素节点是不可用的。

        3.nodeType
        nodeType 属性可返回节点的类型。
        
        最重要的节点类型是：
        
        元素类型 节点类型 
        元素  1 
        属性      2 
        文本  3 
        注释  8 
        文档  9 

(6)childNodes属性-子节点集合；parentNode(this.parentNode)-父节点

(7)replaceChild-父节点替换子节点
    例子：
    

        
北京
        
上海
        
 重庆
    
    
    

        
反恐
        
魔兽
        
传奇
    
   
  
    //点击北京节点，将被反恐节点替换
    var bj = document.getElementById("bj");
    var fk = document.getElementById("fk");
    bj.onclick = function(){
        //
        var parentNode = this.parentNode;
        parentNode.replaceChild(fk,this);
    };

(8)查找、设置属性节点
    例子：
    

        
北京
        
上海
        
重庆
    

    var bj = document.getElementById("bj");
    alert(bj.getAttribute("value"));
    bj.setAttribute("value", "哈哈");
    alert(bj.getAttribute("value"));

(9)节点的创建与添加、删除
    例子：
    

        
北京
        
上海
        
重庆
    
    
    
    //增加城市节点 
天津
放置到city下
    var li = document.createElement("li");
    li.setAttribute("id", "tj");
    li.setAttribute("value", "tianjin");
    
    var txt = document.createTextNode("天津");
    li.appendChild(txt);
    
    var city = document.getElementById("city");
    
    city.appendChild(li);
    //city.insertBefore(tj, cq);
    //city.removeChild(tj);

(10)innerHTML属性(比较重要)
    例子：
    
jquery

    //将
今天
写到div的层中
    var div = document.getElementById("subject");
    div.innerHTML = "
今天
";

    //使用innerHTML读出id=subject中的文本内容
    var div = document.getElementById("subject");
    alert(div.innerHTML);