HTML DOM 用法

在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML。

一、属性
1、innerHTML 属性
可通过节点的 innerHTML 属性来访问文本节点的值。

元素节点 <title>,包含值为 "test" 的**文本节点**
<title>
test
</title>

2、nodeName 属性

nodeName 属性规定节点的名称。
nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document
注释:nodeName 始终包含 HTML 元素的大写字母标签名。

3、nodeValue 属性

nodeValue 属性规定节点的值。
元素节点的 nodeValue 是 undefinednull
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值

4、nodeType 属性
nodeType 属性返回节点的类型。nodeType 是只读的

元素  1
属性  2
文本  3
注释  8
文档  9

二、方法
1、getElementById() 方法
getElementById() 方法返回带有指定 ID 的元素

2、getElementsByTagName() 方法
getElementsByTagName() 返回带有指定标签名的所有元素

<!DOCTYPE html>
<html>
<body>

<p>Hello World!</p>
<p>DOM 很有用!</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>

<script> x=document.getElementsByTagName("p"); //document.write("第一段文本:" + x.item(0).innerHTML); document.write("第一段的文本: " + x[0].innerHTML); </script>

</body>
</html>

三、操作
1、修改 HTML 元素
改变元素内容的最简答的方法是使用 innerHTML 属性

<html>
<body>

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

<script> document.getElementById("p1").innerHTML="New text!"; </script>

</body>
</html>

2、改变 HTML 样式

<html>

<body>
<p id="p2">Hello world!</p>

<script> document.getElementById("p2").style.color="blue"; </script>

</body>
</html>

3、创建新的HTML元素
如需向 HTML DOM 添加新元素,您首先必须创建该元素(元素节点),然后把它追加到已有的元素上

<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script> var para=document.createElement("p"); para.style.color = "blue"; var node=document.createTextNode("This is new."); para.appendChild(node); var element=document.getElementById("div1"); element.appendChild(para); </script>

</body>
</html>

HTML DOM 用法_第1张图片

you should know :

定义和用法
<div> 可定义文档中的分区或节(division/section)。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
如果用 idclass 来标记 <div>,那么该标签的作用会变得更加有效。
用法
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 classid 应用额外的样式。
不必为每一个 <div> 都加上类或 id,虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 classid 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。

你可能感兴趣的:(html,dom)