Application of dom programming in js: obtaining html elements, js string operations and js number operations-JS Tutorial-php.cn

Application of dom programming in js: obtaining html elements, js string operations and js number operations

不言

Release： 2018-08-14 17:09:33

Original

1494 people have browsed it

The content of this article is about the application of DOM programming in js: obtaining html elements, js string operations and js digital operations. It has certain reference value. Friends in need can refer to it. I hope it will help You helped.

DOM Programming:
What is DOM: DOM refers to the structural system of HTML. Our HTML can actually be understood as a tree. Let’s call this tree the DOM model. DOM programming refers to using code to operate the nodes and nodes on this tree. Element,

1. Get html element:
Our html will be considered by js as a document object. js provides many methods for document to obtain html elements and operate html elements:

   <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>

Copy after login

Through the program, we found that after changing the method of getting elements, What you get is an HTMLInputElement object, so what is an object. An object is an abstraction of a thing. Abstraction refers to describing a thing through variables. We can access attributes through this object, such as the attributes in the htmlinput object:

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

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

Copy after login

Use js to verify whether the account password is empty:

<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>

Copy after login

js string operation
Get the string length: By getting the attribute 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));

Copy after login

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

Copy after login

js mathematical operation: 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()); //计算随机数

Copy after login

Related recommendations:

Native js pair What operations can be performed on DOM? How to operate DOM with native js

JS Basics DOM and BOM Programming

Javascript & DHTML Example Programming (Tutorial) DOM Basics and Basic API_Basic Knowledge

The above is the detailed content of Application of dom programming in js: obtaining html elements, js string operations and js number operations. For more information, please follow other related articles on the PHP Chinese website!