DOM
文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素,属性和文本的树结构
HTML DOM - 改变 HTML
改变 HTML 输出流
- 在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容。
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
改变 HTML 内容
- 修改 HTML 内容的最简单的方法是使用 innerHTML 属性。
- 语法:document.getElementById(id).innerHTML=新的 HTML
<html>
<body>
//改变了 <p>元素的内容:
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
</body>
</html>
改变 HTML 属性
- 语法:document.getElementById(id).attribute=新属性值
//改变了 <img> 元素的 src 属性:
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
HTML DOM - 改变CSS
改变 HTML 样式
- 语法:document.getElementById(id).style.property=新样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
</body>
</html>
HTML DOM Document 对象
在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:
文档是一个文档节点。
所有的HTML元素都是元素节点。
所有 HTML 属性都是属性节点。
文本插入到 HTML
元素是文本节点。
注释是注释节点。
Document 对象
当浏览器载入 HTML 文档, 它就会成为 Document 对象。
Document 对象是 HTML 文档的根节点。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。
HTML文档有节点构成的集合,DOM节点有:
- 元素节点,html , body ,p 等都是元素节点,及标签
- 文本节点,向用户展示的内容,如列表标签li中的javascript,DOM,css 等文本
- 属性节点:元素属性,a标签的连接属性href=“”
节点属性
在DOM中,每个节点都有一个对象,DOM节点有三个重要的属性:
nodeName
:节点的名称nodeValue
:节点的值nodeType
:节点的类型
nodeName属性:节点的名称,是只读的
- 元素节点的nodeNme与标签名相同
- 元素节点的nodeName是属性的名称
- 文本节点的nodeName永远是#text
- 文档节点的nodeName永远是#document
nodeValue属性:节点的值
- 元素节点的nodeValue是undefined或null
文
- 本节点的nodeValue是文本自身
- 属性节点的nodeValue是属性的值
nodeType属性:节点的类型,是只读的,以下常用的几种节点类型:
元素:1
属性:2
文本:3
注释:8
文档:9
HTML DOM 事件
HTML 事件的例子:
当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时
例如:
//当用户在 <h1> 元素上点击时,会改变其内容
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
</body>
</html>
HTML 事件属性
如需向 HTML 元素分配 事件,可以使用事件属性。
//名为 ok的函数将在按钮被点击时执行。
<button onclick="ok()">点这里</button>
HTML DOM 元素 (节点)
举例:
创建元素节点和文本节点
- createElement方法可创建元素节点,此方法可返回一个Element对象。
语法:document.createElement(tagName) 参数:tagName,
字符串值,这个字符串用来指明创建元素的类型。 与appendChild 或 insertBefore方法联合使用,将元素显示在页面中 - createTextNode()方法创建新的文本节点,返回新创建的Text节点 语法:document.createTextNode(data) 参数:data字符串值,可规定此节点的文本
var element = document.createElement("div");
element.className = "message";//设置div元素的类名
var textNode = document.createTextNode("hello world");
element.appendChild(textNode);//将textNode插入节点element中
document.body.appendChild(element);//将element插入文档中
插入节点appendChild()
-
在指定节点的最后一个子节点列表后添加一个新的子节点。
语法:appendChild(newnode)
newnode:指定追加的节点
<div id="text">
<p id="x1">HTML</p>
<p id="x2">CSS</p>
</div>
<script>
var node = document.getElementById("text");
var newnode = document.createElement("p");
newnode.innerHTML = "this is a new p";
node.appendChild(newnode);
</script>
插入节点insertBefore()
- insertBefore()方法可在已有的子节点前插入一个新的子节点 语法:insertBefore(newnode,node);
参数:newnode 要插入的新节点 node:指定此节点前插入节点
<div id="text">
<p id="x1">HTML</p>
<p id="x2">CSS</p>
</div>
<script>
var node = document.getElementById("text");
var newnode = document.createElement("p");
var nodex1 = document.getElementById("x1");
newnode.innerHTML = "this is a new p";
node.insertBefore(newnode,nodex1);
</script>
删除节点removeChild()
- removeChild() 方法从子节点列表中删除某个节点。如果删除成功,此方法可返回被删除的节点。如失败,则返回null
语法:nodeObject.removeChild(node) 参数:node,必须,指定需要删除的节点
<div id="text">
<p id="x1">HTML</p>
<p id="x2">CSS</p>
</div>
<script>
var node = document.getElementById("text");
var nodex1 = document.getElementById("x1");
node.removeChild(nodex1);
</script>
替换节点元素replaceChild
- replaceChild实现子节点(对象)的替换。返回被替换对象的引用
语法:node.replaceChild(newnode,oldnew) 参数:newnode 必需,用于替换oldnew的对象。
oldnew 必需,被newnode替换的对象
getElementsByName()方法
getElementsByName()方法返回带有指定名称的节点对象的集合
- 语法: document.getElementsByName(name)
- 文档中的name属性可能不唯一,所有getElementsByName()方法返回的是元素的数组,而不是一个元素
- 和数组类似也有length属性,可以和访问数组一样的方法来访问,从0开始
getElementsByTagName()方法
getElementsByTagName()方法 返回带有指定标签名的节点对象的结合,返回元素顺序是他们在文档中的书序
- 语法: getElementsByTagName(tagname)
- tagName是标签的名称,如p ,a img等标签名
- 和数组类似也有length属性,可以和访问数组一样的方法来访问,从0开始
setAttribute()方法
setAttribute()方法增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值
- 语法:elementNode.setAttribute(name,value)
- name: 要设置的属性名
- value: 要设置的属性值
- 把指定的属性设置为指定的值,如果不存在具有指定名称的属性,该方法将创建一个新属性
- 类似于getAttribute方法,setAttribute方法只能通过元素节点对象调用的函数
getAttribute()方法
getAttribute()方法通过元素节点的属性名称获取属性值
- 语法:elementNode.getAttribute(name)
- elementNode:使用getElementById(),getElementsByTagName()等方法,获取到的元素节点
- name: 要想查询的元素节点的属性名字