js中dom程式設計的應用程式：取得html元素，js字串操作以及js數字操作-js教程-PHP中文網

首頁

web前端

js教程

js中dom程式設計的應用程式：取得html元素，js字串操作以及js數字操作

不言

Aug 14, 2018 pm 05:09 PM

這篇文章帶給大家的內容是關於js中dom程式設計的應用程式：取得html元素，js字串操作以及js數字操作，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

DOM程式設計：
什麼是DOM： DOM指的是HTML的結構體系，我們HTML其實可以理解成為一棵樹，我們就吧這個樹叫DOM模型，DOM程式指的就是利用程式碼去操作這一棵樹上面的節點和元素，

1、取得html元素：
# 我們的html會被js認為是一個文檔(document)對象，js為document提供了很多方法來取得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字串操作
#取得字串長度：透過得到屬性length

//账号的长度必须是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()); //计算随机数

登入後複製

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7801

Java教學

1644

CakePHP 教程

1402

Laravel 教程

1299

PHP教程

1236

Related knowledge

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

神秘的JavaScript：它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。