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

首頁

web前端

html教學

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

黄舟

Feb 04, 2017 pm 02:25 PM

一、查找

第一種方式：依據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）！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web開發人員的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構，使用標籤如、等。 2.CSS控製網頁樣式，使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互，通過事件監聽和DOM操作。

HTML，CSS和JavaScript的角色：核心職責Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

HTML容易為初學者學習嗎？Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML中起始標籤的示例是什麼？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

See all articles