js에서 dom 프로그래밍 적용: html 요소 얻기, js 문자열 작업 및 js 숫자 작업-JS 튜토리얼-php.cn

js에서 dom 프로그래밍 적용: html 요소 얻기, js 문자열 작업 및 js 숫자 작업

不言

풀어 주다： 2018-08-14 17:09:33

원래의

1457명이 탐색했습니다.

이 기사는 js에서 dom 프로그래밍을 적용하는 방법, 즉 html 요소 가져오기, js 문자열 작업 및 js 디지털 작업에 대한 내용을 제공하므로 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 도와주세요.

DOM 프로그래밍:
DOM이란 무엇입니까? DOM은 실제로 HTML의 구조 시스템을 나타냅니다. 이 트리를 DOM 모델이라고 부르겠습니다. DOM 프로그래밍은 이 트리의 노드와 노드를 작동하는 것을 의미합니다. 🎜🎜#

1 HTML 요소 가져오기: js는 html을 문서 객체로 간주합니다. js는 문서에 html 요소를 얻고 html 요소를 조작하는 다양한 방법을 제공합니다.

   <html>
    <head>

        <script>
            function zhanghao() {
                //获取html元素
                var yuansu = document.getElementById("zhangsan2");
                alert(yuansu);
            }        </script>

    </head>

    <body>
        <form>
            账号：<input id="zhanghao1" type="text"><br>
            密码：<input id="zhangsan2" type="password"><br>
            <input type="submit" value="登录"><br>
            <button onclick="zhanghao()"> 获取账号 </button>
        </form>

    </body></html>

로그인 후 복사

프로그램을 통해 요소를 얻는 방법은 다음과 같습니다. 호출 후에 얻는 것은 HTMLInputElement 객체이므로 객체란 무엇입니까? 객체는 사물의 추상화입니다. 추상화는 변수를 통해 사물을 설명하는 것을 말합니다. 이 객체를 통해 htmlinput 객체의 속성과 같은 속성에 액세스할 수 있습니다:

function zhanghao() {
                //获取html元素
                var yuansu = document.getElementById("zhanghao1");

                yuansu.style.color = "red";
                yuansu.value= "zhangsan";
            }

로그인 후 복사

js를 사용하여 계정 비밀번호가 비어 있는지 확인하세요:

<html>
    <head>

        <script>

            //我们验证账号是否为空， 密码是否为空，如果为空，弹出请输入账号/密码
            function yanzheng() {

                var zhanghao = document.getElementById("zhanghao1").value;                var mima = document.getElementById("zhanghao2").value;                if(zhanghao == &#39;&#39;) {
                    alert("请输入 账号！");
                }   
                if(mima == &#39;&#39;) {
                    alert("请输入密码!");
                }

            }        </script>
    </head>

    <body>
        <form>
            账号：<input  id="zhanghao1" type="text" ><br>
            密码：<input id="zhanghao2" type="password"><br>
            <input type="submit" value="登录"><br>
            <input type="reset" value="重置">
            <a onclick="yanzheng()"> 验证账号密码 </a>
        </form>

    </body></html>

로그인 후 복사

js 문자열 연산
문자열 길이 가져오기: 속성 길이 가져오기

//账号的长度必须是6-18位
                var changdu = zhanghao.length;                
                if(6>changdu || changdu > 18) {
                    alert("请输入6-18位的账号！");
                }

字符串常用方法：//常用字符串方法
                var zhanghao = "abcdefg"
                alert(zhanghao.charAt(0)); //根据下标返回对应的字符
                alert(zhanghao.concat("===","++++","&&&&"));//拼接字符串，和+类似
                alert(zhanghao.indexOf("m"));  //判断是否包含某个字符串

                var word="you are SB";
                alert(word.replace("SB","***"));  //替换字符串

                document.write("X" + "1".sub());    //下标
                document.write("X" + "2".sup());    //上标


                var zhanghao = "zhangsan ni hao ";
                document.write(zhanghao.substr(3,4) + "...");  //截取字符串
                document.write(zhanghao.substring(3,4));

로그인 후 복사

js的获取日期：//获取当前操作系统的时间
                var xianzai = new Date();
                document.write(xianzai.toLocaleString());

로그인 후 복사

js 수학적 연산: Math

                document.write("<br>");
                document.write(Math.pow(2,3)); 
                document.write("<br>");
                document.write(Math.pow(2,10));
                document.write("<br>");
                document.write(Math.sqrt(2));

                document.write("<br>");
                document.write(Math.random()); //计算随机数

로그인 후 복사

#🎜 🎜#관련 추천 ：

DOM에서 네이티브 js가 수행할 수 있는 작업은 무엇인가요? 네이티브 js를 사용하여 DOM을 작동하는 방법 Javascript & DHTML 예제 프로그래밍(튜토리얼) DOM 기본 및 기본 API_기본 지식

위 내용은 js에서 dom 프로그래밍 적용: html 요소 얻기, js 문자열 작업 및 js 숫자 작업의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!