（14）HTML5-Dom控制

来源：互联网发布：apache modwsgi 编辑：程序博客网时间：2024/06/05 13:55

文档对象模型（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" onclick="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" onclick="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" onclick="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="计算" onclick="calc()"> </body></html>

1 0