（14）HTML5-Dom控制

最新推荐文章于 2021-06-24 00:45:22 发布

梧桐下的四叶草

最新推荐文章于 2021-06-24 00:45:22 发布

阅读量398

点赞数 1

分类专栏： HTML5 文章标签： html5 html javascript dom

本文链接：https://blog.csdn.net/zsc2014030403015/article/details/52411682

版权

HTML5 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

文档对象模型（Document Object Model，DOM）是网站内容与javascript互通的接口。此接口可以让开发人员通过javaScript指令直接控制HTML文件里面的标签，例如通过此接口可以直接获取或设置网页文字栏（input标签）的值，达到互动的效果。

{getElementById}

要控制HTML文件里面的标签，首先要先让javascript能够找到所要控制的目标，这时可以通过“getElementById”来锁定控制标题。document.getElementById是DOM中最常见的应用，用来获取HTML特定id的元素值。

document.getElementById("id");

括号里面的‘id’就是HTML标签里面所设置的id信息，例如<div id="target“>文字</div>,用document.getElementById('target').innerHTML就可以获取id为”target“的标签中的文字信息。

直接用一个例子来示范如何使用getElementById（"test"）.value来获取文字字段的信息，存储在变量v中之后，再交给提示窗口（alert）显示。

<!DOCTYPE html>
 <head>
     <meta charset="utf-8"/>
     <script>
        function ShowValue(){
            var v=document.getElementById("test").value;
            alert(v);
        }
    </script>
 </head>
 <body >
    <input type="text" id="test">
    <input type="button" value="got you" οnclick="ShowValue()">
 </body>
</html>

既然能够”获取“文字信息，当然也可以”设置“文字信息。

<!DOCTYPE html>
 <head>
     <meta charset="utf-8"/>
     <script>
        function setValue(){
            document.getElementById("test").value="Hello";
        }
    </script>
 </head>
 <body >
    <input type="text" id="test">
    <input type="button" value="got you" οnclick="setValue()">
 </body>
</html>

其实不只是文字信息可以调整，若想要改变HTML标签的属性也是可以做到的，指令格式如下：

document.getElementById('Id 名称').style.属性='设置值';

<!DOCTYPE html>
 <head>
     <meta charset="utf-8"/>
     <script>
        function setValue(){
            document.getElementById("test").style.color="red";
        }
    </script>
 </head>
 <body >
    <input type="text" id="test">
    <input type="button" value="got you" οnclick="setValue()">
 </body>
</html>

如果有编程经验的，就会对eval（）语句的神奇功能感到不可思议。在一般程序设计语言中如果要进行数字的加减运算，需要结合”变量“与”操作数“来进行运算，但是javascriptdeeval（）语句也可以直接读入一个字符串，并自行分析字符串的变量和操作数，而后计算出加减乘除的结果，也就是只要一个eval（）一个指令，他就可以将结果算出来。

<!DOCTYPE html>
 <head>
     <meta charset="utf-8"/>
     <script>
       function calc(){
        var v=eval(document.getElementById("test").value);
        alert(v);
       }
    </script>
 </head>
 <body >
    <input type="text" id="test">
    <input type="button" value="计算" οnclick="calc()">
 </body>
</html>

梧桐下的四叶草

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（14）HTML5-Dom控制

文档对象模型（Document Object Model，DOM）是网站内容与javascript互通的接口。此接口可以让开发人员通过javaScript指令直接控制HTML文件里面的标签，例如通过此接口可以直接获取或设置网页文字栏（input标签）的值，达到互动的效果。{getElementById}要控制HTML文件里面的标签，首先要先让javascript能够找到所要控制的目标，这时
复制链接

扫一扫