JavaScript学习笔记_15

DOM(Document Object Model) —— Document对象

例1：类似于getElementByID()有一个getElementsByName()，因为通常id是唯一的，而name可以重复比如复选框

注意是ElementsByName比ElementById多个s

<html>
  <head>
    <script>
        function show(){
            var cb = document.getElementsByName("myc");
            for(var i=0; i<cb.length; i++){
                if(cb[i].checked)
                    alert(cb[i].value);
            }
        }
    </script>
  </head>
  <body>
    <input type="checkbox" name="myc" value="足球">足球
    <input type="checkbox" name="myc" value="篮球">篮球
    <input type="checkbox" name="myc" value="游戏">游戏<br>
    <input type="button" onclick="show()" value="显示选项">
  </body>
</html>

例2：获取所有同类元素getElementsByTagName()，此例点击遍历会弹窗5下把所有input元素的value都输出一遍

<html>
  <head>
    <script>
        function show(){
            var cb = document.getElementsByName("myc");
            for(var i=0; i<cb.length; i++){
                if(cb[i].checked)
                    alert(cb[i].value);
            }
        }
        function travel(){
            var tn = document.getElementsByTagName("input");
            for(var j=0; j<tn.length; j++){
                alert(tn[j].value);
            }
        }
    </script>
  </head>
  <body>
    <input type="checkbox" name="myc" value="足球">足球
    <input type="checkbox" name="myc" value="篮球">篮球
    <input type="checkbox" name="myc" value="游戏">游戏<br>
    <input type="button" onclick="show()" value="显示选项">
    <input type="button" onclick="travel()" value="遍历">
  </body>
</html>

例子2：动态创建新元素，document.createElement("元素名") + 对象.appendChild(对象)

<html>
  <head>
    <script>
        function addEt(){
            var Et=document.createElement("a");  //创建一个新超链接实例
            Et.href = "http://mudccjh.com";  
            Et.target = "_blank";
            var t = document.createTextNode("重出江湖");  //创建一个新文本
            Et.appendChild(t);  //把文本t加到a元素中间
            var element=document.getElementsByName("d1");
            element[0].appendChild(Et);  //把超链接加到名为d1的div中
        }
    </script>
  </head>
  <body>
    <input type="button" value="添加超链接" onclick="addEt()">
    <div name="d1">
    </div>
  </body>
</html>

节点概念，参照文档树形结构

节点父、子和同胞

节点树中的节点彼此拥有层级关系。

父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子
同胞是拥有相同父节点的节点

节点的属性与方法

还有个父节点属性，parentNode

注：在获取节点对象时，各节点之间的注释同样也算节点，而且如果首尾标签经过换行（不是直接<div></div>形式）

　　即：<div>

　　　　</div>

　　首尾标签之间的回车也算是一个节点。

例3-1：动态删除元素，对象.removeChild(对象)，这里把创建文本写在了addEt()内部，在创建n个超链接然后删除，下次再创建会出现n+1个超链接

<html>
  <head>
    <script>
        var Et = document.createElement("a");  //创建一个新超链接实例
        Et.href = "http://mudccjh.com";  
        Et.target = "_blank";
        Et.id = "a1";
        var element=document.getElementsByName("d1");
        function addEt(){
            var t = document.createTextNode("重出江湖");  //创建一个新文本
            Et.appendChild(t);  //把文本t加到a元素中间
            element[0].appendChild(Et);  //把超链接加到名为d1的div中
        }
        function delEt(){
            element[0].removeChild(document.getElementById("a1"));
        }
    </script>
  </head>
  <body>
    <input type="button" value="添加超链接" onclick="addEt()">
    <input type="button" value="删除超链接" onclick="delEt()">
    <div name="d1" style="width: 500px; height: 400px; background-color: pink">
    </div>
  </body>
</html>

例3-2：把创建文本写到addEt()函数外，那么只能创建一个超链接对象，多次点击添加也只有一个

<html>
  <head>
    <script>
        var Et = document.createElement("a");  //创建一个新超链接实例
        Et.href = "http://mudccjh.com";  
        Et.target = "_blank";
        Et.id = "a1";
        var t = document.createTextNode("重出江湖");  //创建一个新文本
        var element=document.getElementsByName("d1");
        function addEt(){
            Et.appendChild(t);  //把文本t加到a元素中间
            element[0].appendChild(Et);  //把超链接加到名为d1的div中
        }
        function delEt(){
            element[0].removeChild(document.getElementById("a1"));
        }
    </script>
  </head>
  <body>
    <input type="button" value="添加超链接" onclick="addEt()">
    <input type="button" value="删除超链接" onclick="delEt()">
    <div name="d1" style="width: 500px; height: 400px; background-color: pink">
    </div>
  </body>
</html>

例子3-3：以上都是通过对象的父节点删除对象，如果事先不知道要删除对象的父节点，可以先获取父节点再进行删除

<html>
  <head>
    <script>
        var Et = document.createElement("a");  //创建一个新超链接实例
        Et.href = "http://mudccjh.com";  
        Et.target = "_blank";
        Et.id = "a1";
        var t = document.createTextNode("重出江湖");  //创建一个新文本
        var element=document.getElementsByName("d1");
        function addEt(){
            Et.appendChild(t);  //把文本t加到a元素中间
            element[0].appendChild(Et);  //把超链接加到名为d1的div中
        }
        function delEt(){
            //这里就只使用了超链接的id就完成了删除工作
            //直接用Et.parentNode也可以
            document.getElementById("a1").parentNode.removeChild(document.getElementById("a1"));
        }
    </script>
  </head>
  <body>
    <input type="button" value="添加超链接" onclick="addEt()">
    <input type="button" value="删除超链接" onclick="delEt()">
    <div name="d1" style="width: 500px; height: 400px; background-color: pink">
    </div>
  </body>
</html>

注：要使用body对象（document.body），必须要等body创建之后才能，不然会报null

例4：两句同样获取body对象的代码，在不同位置输出不同

输出为：null

　　　　[object HTMLBodyElement]

　　　　Hello World!

<html>
  <head>
    <script>
        document.writeln(document.body + "<br>");
    </script>
  </head>
  <body>
    <script>
        document.writeln(document.body + "<br>");
    </script>
    Hello World!
  </body>
</html>

例5：全局改变样式（Chrome效果出不来，IE可用）

<html>
  <head>
    <script>
        document.fgColor = "white";
        document.bgColor = "black";
    </script>
  </head>
  <body>
    Hello World!
  </body>
</html>

innerText会把某元素首尾标签之间的内容当作文本处理，innerHTML则当作元素处理

例6：添加文本与添加超链接元素，第一个按钮把第一个span内的内容替换成文本，第二个按钮把第二个span内的内容替换成超链接元素

<html>
  <head>
    <script>
        function addText(){
            document.getElementById("s1").innerText = "<a href = 'http://mudccjh.com' target = '_blank'>重出江湖</a>";
        }
        function addHtml(){
            document.getElementById("s2").innerHTML = "<a href = 'http://mudccjh.com' target = '_blank'>重出江湖</a>";
        }
    </script>
  </head>
  <body>
    <input type="button" value="添加文本" onclick="addText()">
    <input type="button" value="添加元素" onclick="addHtml()"><br>
    <span id = "s1">
        Hello World!
    </span><br>
    <span id = "s2">
        Hello Hadoop!
    </span>   
  </body>
</html>

例7：浮动小广告，主要使用onscroll属性

<html>
  <head>
    <script>
        function is_onscroll(){
            document.getElementById("a1").style.top = document.body.scrollTop + 130;
            document.getElementById("a1").style.left = document.body.scrollLeft;
            document.getElementById("a2").style.top = document.body.scrollTop + 150;
            document.getElementById("a2").style.left = document.body.scrollLeft;
        }
        
    </script>
  </head>
  <body onscroll="return is_onscroll()">
    <textarea rows="500" cols="500">    
        top
    
        bottom
    </textarea>
    <span id="a1" style="top: 30px; left: 0px; position: absolute; word-break: keep-all">我是小广告<br></span>
    <a id = "a2" href="http://mudccjh.com" target="_blank" style="width: 100px; top: 50px; left: 0px; position: absolute; word-break: keep-all">
        <img src = "Work.jpg" style="width: 100px">
    </a>
  </body>
</html>

发表于 2015-03-15 21:10 AthrUn_Null 阅读(111) 评论(0) 编辑收藏举报

刷新页面返回顶部

JavaScript学习笔记_15

节点父、子和同胞

公告