javascript复习3 DOM的一些操作处理。 2020-4-15

发表于 作者 jiukeshuju 
            //var dv = document.getElementsByTagName("div");
            //var sp = dv.getElementsByTagName("span");
            //alert(typeof sp);
            //查到DIV的对象有两个0，1，再查div下边的span，有3个span,   ob[0],ob[1],ob[2]
            //ob.nodeName      //null
            //ob.nodeValue     //null
            //ob.innHTML       //span1

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
<script type="text/javascript">

//页面加载完成
window.onload = function() {

var divObj = document.getElementsByTagName("div")[0];
// 通过具体的元素节点调用
// getElementsByTagName()
// 方法，获取当前节点的指定标签名孩子节点

var spanObjs = divObj.getElementsByTagName("span");
// alert(spanObjs[0]);  弹 object HTMLSpanElement
//  alert(spanObjs.length); 弹出3

var h3Obj = document.createElement("h3")// <h3></h3>

//  alert(h3Obj);
h3Obj.innerHTML = "我是h3标签"; // <h3>我是h3标签</h3>

// appendChild(oNode)
// 方法给标签对象添加子节点。oNode是要添加的子节点。
divObj.appendChild(h3Obj); // 把我创建的h3标签添加到div中

// removeChild(oNode)
// removeChild方法删除子节点。oNode是要删除的孩子节点
var span02Obj = document.getElementById("span02");
divObj.removeChild(span02Obj);

// getAttribute(sAttributeName)
// getAttribute方法获取属性值。sAttributeName是要获取的属性名
alert( span02Obj.getAttribute("id") );

// cloneNode( [bCloneChildren])
// cloneNode方法克隆一个对象。bCloneChildren表示是否需要克隆孩子节点
var h2Obj = document.getElementsByTagName("h2")[0];
//  alert(h2Obj.innerHTML);
var h2CloneObj = h2Obj.cloneNode(true); // <h2></h2>

//  alert(h2CloneObj.innerHTML);
divObj.appendChild(h2CloneObj);

}

</script>
    </head>
    <body>
    <div>   
        <h1>111</h1>
        <span >span1</span>
        <span id="span02" >span2</span>
        <span>span3</span>
        <h2><a href="1">111</a></h2>
    </div>
</body>
</html>

================================================================

<html>
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />

<script type="text/javascript">
window.onload = function(){
    //1.查找#bj节点
    document.getElementById("btn01").onclick=function(){
        //查找id为bj的标签对象
        var liObj = document.getElementById("bj");          
        alert(liObj.innerHTML);
    }

    //2.查找所有li节点
    var btn02Ele = document.getElementById("btn02");
    btn02Ele.onclick = function(){
        var liObjs = document.getElementsByTagName("li");
        for(var i=0;i<liObjs.length;i++){
            alert(liObjs[i].innerHTML);
        }
        alert(liObjs.length);
    };

       //3.查找name=gender的所有节点
    var btn03Ele = document.getElementById("btn03");
    btn03Ele.onclick = function(){
        alert( document.getElementsByName("gender").length );
    };

    //4.查找#city下所有li节点
    var btn04Ele = document.getElementById("btn04");
    btn04Ele.onclick = function(){
        //1.先通过id属性查找id属性值为city的节点
        var cityObj = document.getElementById("city");

        //2.通过city节点对象.getElementsByTagName方法查找它的孩子节点
        alert( cityObj.getElementsByTagName("li").length );
    };

    //5.返回#city的所有子节点
    var btn05Ele = document.getElementById("btn05");

    btn05Ele.onclick = function(){

        //1.先通过id属性查找id属性值为city的节点
        var cityObj = document.getElementById("city");

        //2.通过city节点.childNodes获取所有的孩子节点
        alert( cityObj.childNodes.length );
    };

    //6.返回#phone的第一个子节点
    var btn06Ele = document.getElementById("btn06");
    btn06Ele.onclick = function(){
        //1.先获取id为phone的节点
        var phoneObj = document.getElementById("phone");
        //2.通过phone节点对象.firstChild获取第一个孩子节点
        alert( phoneObj.firstChild.innerHTML );
    };

    //7.返回#bj的父节点
    var btn07Ele = document.getElementById("btn07");
    btn07Ele.onclick = function(){
        alert( document.getElementById("bj").parentNode.innerHTML );
    };

    //8.返回#android的前一个兄弟节点
    var btn08Ele = document.getElementById("btn08");
    btn08Ele.onclick = function(){
        alert( document.getElementById("android").previousSibling.innerHTML );
    };

    //9.读取#username的value属性值
    var btn09Ele = document.getElementById("btn09");
    btn09Ele.onclick = function(){
        //1.先获取标签对象
        var usernameObj = document.getElementById("username");
        //2.通过标签对象.value属性值获取文本内容
        alert( usernameObj.value );
    };

    //10.设置#username的value属性值
    var btn10Ele = document.getElementById("btn10");
    btn10Ele.onclick = function(){
        //1.先获取标签对象
        var usernameObj = document.getElementById("username");
        //2.通过标签对象.value属性修改文本内容
        usernameObj.value = "hello world！";
    };

    //11.返回#bj的文本值
    var btn11Ele = document.getElementById("btn11");
    btn11Ele.onclick = function(){
        //1、先获取标签对象
        var liObj = document.getElementById("bj");
        //2.通过标签对象.innerHTML或innerText属性获取文本内容
  // alert(liObj.innerHTML); // 获取起始标签和结尾标签中所有的内容
        alert(liObj.innerText); // 获取起始标签和结尾标签中所有的文本 内容（全过滤掉标签）
    };
};

</script>
</head>
<body>
<div id="total">
<div class="inner">
    <p>
        你喜欢哪个城市?
    </p>

    <ul id="city">
        <li id="bj"><a href="#">北京</a></li>
        <li>北京</li>
        <li>上海</li>
        <li>深证</li>
    </ul>

    <br>
    <br>

    <p>
        你喜欢的水果?
    </p>

    <ul id="game">
        <li id="rl">苹果</li>
        <li>香蕉</li>
        <li>哈密瓜</li>
        <li>草莓</li>
    </ul>

    <br />
    <br />

    <p>
        你喜欢的手机是?
    </p>

    <ul id="phone"><li>小米</li><li id="android">苹果</li><li>华为</li></ul>
</div>

<div class="inner">
    gender:
    <input type="radio" name="gender" value="male"/>
    Male
    <input type="radio" name="gender" value="female"/>
    Female
    <br>
    <br>
    name:
    <input type="text" name="name" id="username" value="nice to meet you"/>
</div>
</div>
<div id="btnList">

<div><button id="btn01">查找#bj节点</button></div>
<div><button id="btn02">查找所有li节点</button></div>
<div><button id="btn03">查找name=gender的所有节点</button></div>
<div><button id="btn04">查找#city下所有li节点</button></div>
<div><button id="btn05">返回#city的所有子节点</button></div>
<div><button id="btn06">返回#phone的第一个子节点</button></div>
<div><button id="btn07">返回#bj的父节点</button></div>
<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
<div><button id="btn09">返回#username的value属性值</button></div>
<div><button id="btn10">设置#username的value属性值</button></div>
<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>

=================================================================

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
<script type="text/javascript">

//页面加载完成
window.onload = function() {
    var a = document.getElementsByTagName("span");
    alert(a[2].innerHTML);

}   
</script>
    </head>
    <body>
    <div>   
        <h1>111</h1>
        <span >span1</span>
        <span id="span02" >span2</span>
        <span>span3</span>
        <h2><a href="1">111</a></h2>
    </div>
</body>
</html>

发表评论