您的位置:首页 > Web前端 > JavaScript

javascript

2016-04-29 12:02 260 查看
    //元素节点
    var bjNode = document.getElementById("bj");
    alert(bjNode.nodeType);//元素节点  1
    alert(bjNode.nodeName);//节点名:li
    alert(bjNode.nodeValue);//属性值null

    //属性节点
    var nameAttr = document.getElementById("name")
                        .getAttributeNode("name");
    alert(nameAttr.nodeType);//属性节点2
    alert(nameAttr.nodeName);//属性节点名name
    alert(nameAttr.nodeValue);//属性节点的nodeValue username
        
    //文本节点
    var textNode = bjNode.firstChild;
    alert(textNode.nodeType);//文本节点 3
    alert(textNode.nodeName);//文本 
    alert(textNode.nodeValue);//文本值
    //nodeType、nodeName只读
    //nodeValue可改变

    //创建元素节点
    var liNode = document.createElement("li");
    //创建文本节点
    var xmText = document.createTextNode("厦门");
    //将文本节点加入元素节点
    liNode.appendChild(xmText);

    //获取元素节点
    var jbNode = document.getElementById("bj");
    //克隆元素节点
    var bjNode2 = jbNode.cloneNode(true);
    //获取元素节点
    var rlNode = document.getElementById("rl");
    //获取父节点
    var gameNode = document.getElementById("game");
    //将bjNode2替换到rlNode位置
    gameNode.replaceChild(bjNode2,rlNode);

    //弹出消息
    var flag = confirm("确定要"+this.firstChild.nodeValue+"删除吗?");
    //alert(flag);

    //删除节点
    this.parentNode.removeChild(liNode);

    //取trNode父节点的父节点
    trNode.parentNode.parentNode;

    //去空格函数
    function trim(str){
        //正则表达式
        var reg = /^\s*|\s*$/g;
        //替换
        return str.replace(reg,"");
    }

    //获取属性节点
    var cityNode = document.getElementById("city");
    //获取节点内容
    cityNode.innerHTML;

    //插入节点之后
    function insertAfter(newNode,refNode){
        //获取refNode父节点
        var parentNode = refNode.parentNode;
        //判断是否有父节点
        if(parentNode){
            //获取父节点的最后一个节点
            var lastNode = parentNode.lastChild;
            //判断refNode是不是最后一个节点
            if(refNode == lastNode){
                //加入节点
                parentNode.appendChild(newNode);
            }else{
                //获取节点之后的节点
                var nextNode = refNode.nextSibling;
                //在最后的节点加入节点
                parentNode.insertBefore(newNode,nextNode);
            }
    }

    //获取最开始的value值
    this.defaultValue
    //获取当前value值
    this.value;

    //例
    window.onload = function(){
        document.getElementById("checkedAll_2").onclick = function(){
            var flag = this.checked;
            var items = document.getElementsByName("items");
            
            for(var i=0;i<items.length;i++){
                items[i].checked = flag;
            }
        }
        var items = document.getElementsByName("items");
        for(var i=0;i<items.length;i++){
            items[i].onclick = function(){
                var number = 0;
                for(var j=0;j<items.length;j++){
                    if(items[j].checked){
                        number++;
                    }
                }
                document.getElementById("checkedAll_2").checked
                =(items.length == number);
            }
        }
        //全选
        document.getElementById("CheckedAll").onclick = function(){
            for(var i=0;i<items.length;i++){
                items[i].checked = true;
            }
        }
        //全部不选
        document.getElementById("CheckedNo").onclick = function(){
            for(var i=0;i<items.length;i++){
                items[i].checked = false;
            }
        }
        //反选
        document.getElementById("CheckedRev").onclick = function(){
            for(var i=0;i<items.length;i++){
                items[i].checked = !items[i].checked;
            }
        }
        //提交
        document.getElementById("send").onclick = function(){
            for(var i=0;i<items.length;i++){
                if(items[i].checked){
                    alert(items[i].value);
                }
            }
        }
    }

    <form method="post" action="">
        你爱好的运动是?<input type="checkbox" id="checkedAll_2" />全选/全不选 <br /> <input
            type="checkbox" name="items" value="足球" />足球 <input type="checkbox"
            name="items" value="篮球" />篮球 <input type="checkbox" name="items"
            value="羽毛球" />羽毛球 <input type="checkbox" name="items" value="乒乓球" />乒乓球
        <br /> <input type="button" id="CheckedAll" value="全 选" /> <input
            type="button" id="CheckedNo" value="全不选" /> <input type="button"
            id="CheckedRev" value="反 选" /> <input type="button" id="send"
            value="提 交" />
    </form>

 

转载于:https://my.oschina.net/MoreYoungGavin/blog/668028

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: