Maison >interface Web >js tutoriel >Application de la programmation dom en js : obtention d'éléments html, d'opérations de chaîne js et d'opérations de nombres js

Application de la programmation dom en js : obtention d'éléments html, d'opérations de chaîne js et d'opérations de nombres js

不言original: 2018-08-14 17:09:331479parcourir

Ce que cet article vous apporte concerne l'application de la programmation dom en js : obtention d'éléments html, d'opérations de chaîne js et d'opérations numériques js. J'espère que ce sera le cas. utile pour vous. Vous avez aidé.

Programmation DOM :
Qu'est-ce que DOM : DOM fait référence au système structurel du HTML. Notre HTML peut en fait être compris comme un arbre. Appelons cet arbre le modèle DOM qui fait référence à l'utilisation de code pour faire fonctionner les nœuds et les nœuds de cet arbre. 🎜>

1. Obtenir l'élément HTML : Notre html sera considéré par js comme un objet document. js fournit de nombreuses méthodes pour que le document obtienne des éléments html et exploite des éléments 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>

Grâce au programme, nous avons constaté que la méthode d'obtention des éléments a été modifiée. . Ce que vous obtenez après l'appel est un objet HTMLInputElement, donc qu'est-ce qu'un objet. Un objet est une abstraction d'une chose. L'abstraction fait référence à la description d'une chose à travers des variables. Nous pouvons accéder aux attributs via cet objet, tels que les attributs de l'objet htmlinput :

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

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

Utilisez js pour vérifier si le mot de passe du compte est vide :

<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 opération de chaîne
Obtenir la longueur de la chaîne : obtenir la longueur de l'attribut

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

Opération mathématique 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()); //计算随机数

Connexe recommandations :

Quelles opérations les js natifs peuvent-ils effectuer sur DOM ? Comment faire fonctionner DOM avec JS natif

Bases JS Programmation DOM et BOM

Exemples de programmation Javascript et DHTML (Tutoriel) Bases du DOM et API de base_Connaissances de base

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Que sont les arguments en js ? Comment utiliser les arguments en jsArticle suivant：Que sont les arguments en js ? Comment utiliser les arguments en js

Articles Liés

Voir plus