JavaScript操作html

来源：互联网发布：网络语除草是什么意思编辑：程序博客网时间：2024/05/24 03:23

html对web进行定义，JavaScript对html进行操作，获取html上的数据。

一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：核心（ECMAScript）、文档对象模型（Document Object Model，简称DOM）、浏览器对象模型（Browser Object Model，简称BOM）。通过JavaScript，我们可以重构整个 HTML 文档。我们可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西，JavaScript 就需要获得对 HTML 上所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型（DOM）来获得的。DOM为我们用javascript操作html架起了一座桥梁。DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。

例如，JavaScript对网页进行的所有操作都是通过DOM进行的。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容，所以如果你下载一个JavaScript语言的参考帮助文档来查的话，就连document.write方法也找不到。文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。脚本开发人员可以通过文档对象的属性、方法和事件来掌控、操纵和创建动态的网页元素。每一个网页元素（一个HTML标签）都对应着一个对象。网页上的标签是一层层嵌套的，最外面的一层是<HTML>，文档对象模型也这样一层层嵌套着，但是通常被理解成一棵树的形状。树根是window或document对象，相当于最外层的标签的外围，也就是整个文档。

跳转到指定页面

window.location.href="...";

</script>

获取页面信息传递到后台

<?php

$data=$_GET['name'];
$destinationData=;
?>
<html>
<body>
<form name="example" method="POST" action="temp1.php?p=<?php echo $destinationData; ?>">
<textarea id="content" name="content1" cols="100" rows="46"><?php $file=fopen($destinationData,"r");
while(!feof($file))
{
echo fgets($file);
}
fclose($file);
?></textarea>
//<script type=text/javascript>
//function SubmitData()
//{
//var dataTextArea=document.getElementById("content").value;
//var dataFile="<?php echo $destinationData; ?>";
//xmlhttp=new XMLHttpRequest();
//xmlhttp.open("GET","test_dataChange.php?q="+dataTextArea+"&p="+dataFile,false);
//xmlhttp.send();
//}
//</script>
<br />
//<input type="button" name="SubmitButton" value="SubmitButton" onclick=SubmitData()>
<input type="submit" name="SubmitButton" value="SubmitButton">
</form>
</body>
</html>

网页信息保存到服务器指定文件

<?php

$file=fopen($_GET['p'],"w");
fwrite($file,$_POST['content1']);
fclose($file);
?>

通过表单来传递textarea标签和$destinationData的值，并在后台处理这些数据。

注释部分亦为传递这两个数据，但操作失败。JavaScript已经通过DOM获取了textarea标签的数据，但传递到后台显示空白。

AJAX指异步JavaScript和XML，不需要跳转页面即可对后台进行某些操作。例如，点击按钮，执行后台某个页面，但页面不跳转。

通过 AJAX，您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据。

AJAX在代码中实现格式如下：