小強的HTML5行動開發之路（30）－ JavaScript回顧5-html教學-PHP中文網

小強的HTML5行動開發之路（30）－ JavaScript回顧5

黄舟

發布： 2017-02-04 14:25:03

原創

1743 人瀏覽過

一、查找

第一種方式：依據id查找

var obj = document.getElementById(id); //document是HTMLDocument的實例

<html>  
    <head>  
        <script>  
            function f1(){  
                var obj = document.getElementById(&#39;a1&#39;); //双引号，单引号都可以  
                //innerHTML属性：可以访问或者设置节点的html的属性值  
                //alert(obj.innerHTML);   
                obj.innerHTML = "为什么点我"; //双引号单引号都可以  
            }  
            function f2(){  
                var obj = document.getElementById(&#39;d1&#39;);  
                alert(obj.innerHTML);  
            }  
            function f3(){  
                var obj = document.getElementById(&#39;username&#39;);  
                //value属性：可以获取文本输入框的值和改变值  
                alert(obj.value); //获得值  
                obj.value = &#39;abc&#39;;//改变值  
            }  
              
        </script>  
    </head>  
  
    <body style="font-size:30px;font-style:italic;">  
        <!--javascript:; 表示是一个空白的js语句-->  
        <a href="javascript:;" id="a1" onclick="f1();">click me</a><br/>  
        <div id="d1" ><span>你好</span></div><br/>  
        <input type="text" id="username" name="username"/><br/>  
        <input type="button" value="点我吧" onclick="f3();"/>  
    </body>  
</html>

登入後複製

getElementsByTagName('tagName');

<html>  
    <head>  
        <style>  
            ul{  
                list-style-type:none;     
            }  
            ul li{  
                float:left;  
                border:1px solid black;  
                margin-left:10px;  
                width:100px;  
                height:40px;  
                background-color:red;  
                cursor:pointer;               
            }  
            .selected{  
                background-color:#ff88ee;  
            }  
        </style>  
        <script src="myjs.js"></script>  
        <script>  
            function doAction(index){  
                var arr = $(&#39;u1&#39;).getElementsByTagName(&#39;li&#39;);  
                for(i=0; i<arr.length; i++){  
                    arr[i].className = &#39;&#39;;  
                }  
                var obj = $(&#39;l&#39;+index);  
                obj.className = &#39;selected&#39;;  
            }  
        </script>  
    </head>  
    <body style="font-size:30px;">  
        <ul id="u1">  
            <li onmouseover="doAction(1);" id="l1">选项一</li>  
            <li onmouseover="doAction(2);" id="l2">选项二</li>  
            <li onmouseover="doAction(3);" id="l3">选项三</li>  
        </ul>  
    </body>  
</html>

登入後複製

第三種方式

使用遍歷的方式（瀏覽器相容性差）

parentNode
節點

prevSibling 前一個兄弟

firstChild 前一個子節點

lastChild 後一個子節點

遍歷的方式因為有瀏覽器的相容性問題，盡量少用

二、創建

標記名

三、添加

node.appendChild(obj); //作為最後一個孩子添加

node.insertBefore(obj, refreNode); //添加到refNode的前面. refNode); //替換refNode

四、刪除

node.removeChild(obj);

<html>  
    <head>  
        <script src="myjs.js"></script>  
        <script>  
            function f1(){  
                var obj = document.createElement(&#39;div&#39;);      
                obj.innerHTML = &#39;兴趣最重要...&#39;;  
                obj.className = &#39;s1&#39;;  
            //  $(&#39;d1&#39;).appendChild(obj);     
            //  $(&#39;d1&#39;).insertBefore(obj, $(&#39;a1&#39;));   
            //  $(&#39;d1&#39;).replaceChild(obj, $(&#39;a1&#39;));  
                $(&#39;d1&#39;).removeChild($(&#39;a1&#39;));  
            }  
        </script>  
        <style>  
            .s1{  
                width:200px;  
                height:100px;  
                background-color:red;  
            }  
        </style>  
    </head>  
          
    <body style="font-size:30px;" id="d1">  
<!--         <a href="javascript:alert(&#39;hello&#39;);">如何学好java</a>  -->  
        <a id="a1" href="javascript:;" onclick="f1();">如何学好java</a>  
    </body>  
</html>

登入後複製

五、樣式

第一種方式：修改節點的類別的class著色getElementById('id1'); obj.className = 's1'; //使用s1樣式 ****見範例：表單驗證****

第二種方式：修改節點的style屬性

1.必須是內嵌樣式

2.如果要修改的樣式屬性名稱包括"-"，例如background-color,則要按照以下方式修改node.style.backgroundColor = 'red';

<html>  
    <head>  
        <style>  
            #d1{  
                width:80px;  
                height:80px;  
                background-color:blue;  
                position:relative;  
            }  
        </style>  
        <script src="myjs.js"></script>  
        <script>  
            function f1(){  
                var v1 = parseInt($(&#39;d1&#39;).style.left);  
                $(&#39;d1&#39;).style.left = v1 + 50 + &#39;px&#39;;  
            }  
        </script>  
    </head>  
    <body>  
        <div id="d1" style="left:10px;"></div>  
        <input type="button" value="click me"  
        onclick="f1();"/>  
    </body>  
</html>

登入後複製

如何禁止瀏覽器的兩種預設行為：

點擊連接，瀏覽器會向href屬性指向的地址發送請求

點擊表單提交按鈕，瀏覽器會提交表單

禁止的方式

<a href="" onclick="return false;"></a>
<from onsubmint="return false;"></form>

登入後複製

以上就是小強的HTML5移動開發之路（ 30）－ JavaScript回顧5的內容，更多相關內容請關注PHP中文網（www.php.cn）！