집 > 기사 > 웹 프론트엔드 > HTML5 모바일 개발을 향한 Xiaoqiang의 길(30) - JavaScript 검토 5

HTML5 모바일 개발을 향한 Xiaoqiang의 길(30) - JavaScript 검토 5

黄舟원래의: 2017-02-04 14:25:031739검색

1. 검색

첫 번째 방법: 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>

두 번째 방법

var arr = node.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

previousSibling 이전 형제

nextSibling 다음 형제

childNodes 모든 하위 노드

firstChild 이전 하위 노드

lastChild 다음 하위 노드

브라우저 호환성 문제로 인해

를 최대한 적게 사용하세요

document.createElement(tagName); //tagName은 태그 이름을 나타냅니다.

node.appendChild(obj) / /Add

node.insertBefore(obj, refNode); //refNode의 앞에 마지막 자식으로 추가

node.replaceChild(obj, refNode); >

4. 삭제

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>

5. 스타일

className 속성을 수정합니다. 노드

예: var obj = document.getElementById('id1'); obj.className = 's1'; //s1 스타일 사용 ****예 보기: 양식 유효성 검사*** *

두 번째 방법: 노드의 스타일 속성을 수정합니다

1. 인라인 스타일이어야 합니다

2. 수정할 스타일 속성 이름에 "-"가 포함되어 있는 경우 , 예를 들어, background-color의 경우 node.style.groundColor = '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>

위는 Xiaoqiang의 HTML5 모바일 개발 경로입니다( 30) ——JavaScript 검토 5 콘텐츠, 더 많은 관련 콘텐츠를 보려면 PHP 중국어 웹사이트(www.php.cn)를 주목하세요!

성명：

이전 기사：Xiaoqiang의 HTML5 모바일 개발 로드(28) - JavaScript 검토 3다음 기사：Xiaoqiang의 HTML5 모바일 개발 로드(28) - JavaScript 검토 3

HTML5 모바일 개발을 향한 Xiaoqiang의 길(30) - JavaScript 검토 5

관련 기사