JS——HTML 文档对象模型
文档的根元素是<HTML>
<HTML>分为两部分<head>和<body>
<head>里面是<title>和<script>
<body>里面是各个元素 eg:<a> <p> <h>等
每个元素可以看作一个对象,具有属性、事件
<html> <head> <title></title> <scrip src=""></src> </head> <body> </body> </html>
网页被加载时,浏览器会创建页面的文档对象模型。
JS拥有足够的能力改变HTML中的元素,并对其中的事件做出反应.
为了操作HTML中的元素,需要首先获取HTML中的元素,有以下三种方式:
通过ID获取元素
通过标签名获取元素
通过类名获取元素
<!--通过ID--> var x=document.getElementById("main"); <!--通过标签名--> var y=x.getElementsByTagName("p");
部分事件:
onmouseover
onmouseout
onmousedown
onmouseup
onload //应该是只适用于body元素
onfocus //获取焦点时
创建一个新元素的步骤:
var para=document.createElement("p"); //创建新元素
//创建文本节点 并给新创建的元素追加节点
para.appendChild(node);
var node=document.createTextNode("这是新段落。");
//这时只是创建了一个元素,但并没有添加到页面中
//应该首先获取页面中的一个元素 然后在这个元素后面追加新建的元素
var element=document.getElementById("div1");
element.appendChild(para);