DOM即是文档对象模型。因为DOM里面含有一些方法,可以通过这些方法对页面的某一个元素进行点击、更改、删除等操作。
DOM采用树形来表示页面中的元素结构,每一个元素都是树形中的一个节点。
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>DOMtitle>
<script>
script>
head>
<body>
<h1>h1>
<p>p>
body>
html>
上图即是一个html文件的树形结构,每一个元素即是一个节点。我们在操作元素时候,就是把一个元素看成一个对象,然后使用这个对象的属性和方法进行操作。
节点类型
常用的节点分为三种,分别是元素节点、属性节点、文本节点。
<div class="wrapper">DOM节点类型div>
div是元素节点,wrapper是属性节点,"DOM节点类型"是文本节点。
创建元素
动态DOM操作:首先用createElement( )创建一个元素节点,之后需要使用createTextNode( )创建一个文本节点,然后将文本节点加入到文本节点中组装成“有文本内容的元素”,最后将插入到已存在HTML的某元素中。
用法:
var a1 = document.createElement("元素名"); //创建元素节点
var txt = document.createTextNode("文本内容"); //创建文本节点 a1.appendChild(txt); //文本节点插入到元素节点
a2.appendChild(a1); //元素节点插入到已存在的元素中
插入元素
插入元素有两种,其中一种是appendChild( ),就像上方的创建元素中,将子元素加入到父元素中最后一个子元素之后。另一种是insertBefore( ),这一种是插入到父元素中某一子元素之前。
insertBefore( )用法:
A.insertBefore(B,ref);
A是父元素,B是新子元素,ref是指定子元素。
获取元素
获取元素即是获取元素节点,可以通过以下六种方式获取指定元素节点。
1、getElementById( )根据最后的Id可以推出这是根据id来获取元素。
举例:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>getElementById例子title>
<script>
window.onload = function(){
var div1 = document.getElementById("wrapper");
div1.style.color = "red";
}
script>
head>
<body>
<div id="wrapper">也太帅了吧div>
body>
html>
window.onload表示整个页面加载完后执行的代码块,因为