HTML5学习准备——HTML DOM

 

HTML DOM学习

The HTML DOM defines the objects and properties of all HTML elements, and the methods (interface) to access them.

HTML DOM定义了所有HTML元素的对象和内容以及可以操作他们的方法（接口）

In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

HTML DOM是一种关于获得，改变，增加，删除HTML元素的标准

 

HTML中的所有东西都是节点node

The entire document is a document node 整个文档是一个document node

Every HTML element is an element node 每个HTML元素是一个element node

The text in the HTML elements are text nodes 每个文本是一个text node

Every HTML attribute is an attribute node 每个HTML属性是一个attribute node

Comments are comment nodes 每个注释是comment nodes

 

DOM树形结构 根 父 子 兄弟 概念

 

DOM的一些properties

x.innerHTML - the text value of x x节点的文本值

x.nodeName - the name of x x节点的名称

x.nodeValue - the value of x x节点的值

x.parentNode - the parent node of x x节点的父节点

x.childNodes - the child nodes of x x节点的子节点

x.attributes - the attributes nodes of x x节点的属性

DOM的一些methods

x.getElementById(id) - get the element with a specified id 获得特定id的元素

x.getElementsByTagName(name) - get all elements with a specified tag name 获得特定name的所有元素

x.appendChild(node) - insert a child node to x 为x节点增加一个节点

x.removeChild(node) - remove a child node from x 从x节点移除一个节点

 

例子：

<p id="intro">Hello World!</p>

txt=document.getElementById("intro").innerHTML;

txt为Hello World！

同样的

txt=document.getElementById("intro").childNodes[0].nodeValue;

txt也是Hello World！

再者

x=document.getElementsByTagName("p");

x[0].innerHTML为Hello World！

 

Node Properties 节点的重要内容

nodeName 只读

nodeValue 对element节点为undefined

nodeType 只读 Element 1 Attribute 2 Text 3 Comment 8 Document 9

 

关于DOM的操作可以配合在js中使用，配合各种event或其他等

依旧来自：http://www.w3schools.com HTML DOM教程的整理