HTML DOM操作的詳細介紹

HTML DOM

當網頁被載入時，瀏覽器會建立頁面的文件物件模型（Document Object Model）。

DOM節點類型

文件節點（document，唯一）

元素節點（那些個標籤div，p之類）

屬性節點（class，src這種）

文字節點（插入在p，div內的文字）

document中的open()定義和用法

open() 方法可開啟一個新文檔，並擦除目前文檔的內容。

語法

document.open(mimetype,replace)

說明

該方法將擦除目前HTML 文件的內容，開始一個新的文檔，新文檔用write() 方法或writeln() 方法編寫。

提示和註解

重要事項：呼叫open() 方法開啟一個新文件並且用write() 方法設定文件內容後，必須記住用close 方法關閉文檔，並迫使其內容顯示出來。

註解：屬於被覆寫的文件的一部分的腳本或事件句柄不能呼叫該方法，因為腳本或事件句柄本身也會被覆寫。

function createNewDoc()
{
 var newDoc = document.open("test/html","replace");
 var txt = "学习 DOM 非常有趣！";
 newDoc.write(txt);
 newDoc.close();
}<input type="button" value="打开并写入一个新文档" onclick="createNewDoc()"/>

找出元素方式

//找出id為shanghai的元素
var shanghai= docment.getElementById('shanggai');
//找出name為city的元素集合
var citys = docment.getElementByNames('city');
//找出class為btn btn-info的元素集合
var buttons = getElementsByClassName('btn b#-info');
# //在citys物件中尋找標籤名稱為li的元素集合
var li = citys.getElementsByTagName('li');

改變標籤內容和屬性

//获取id为"div"的元素
var node = document.getElementById('div');
//增加或改变元素属性
document.getElementById('div').setAttribute("class","window j");
//返回节点名称
var name = node.nodeName;
//返回节点类型
var type = node.nodeType;
//返回父节点
var parent = node.parentNode;
//返回子节点集合
var childs = node.childNodes;
//删除当前节点
node.parentNode.removeChild(node);
//创建节点
var div = document.createElement('DIV');
//替换节点(新的节点，被替换的节点)
node.parentNode.replaceChild(div, node);
//添加子节点
node.appendChild(div);

innerText、innerHTML、nodeValue 三者的区别

innerText： 设置或获取位于启始标签和结束标签之间的字符串

<div id="div">Hello World</div>
<input type="text" id="input" />//输出为"Hello World"var div = document.getElementById(&#39;div&#39;).innerText; 
//输出为"" var input= document.getElementById(&#39;input&#39;).innerText;

innerHTML： 设置或返回位于启始标签和结束标签之间的 HTML文本

<div id="div"><span>Hello World</span></div>//输出为"
<span>Hello World</span>"var div = document.getElementById(&#39;div&#39;).innerHTML;

nodeValue： 设置或返回属性节点和文本节点的值。

<div id="div" class="div class">
  <span id="span">Hello World</span>
</div>var div = document.getElementById(&#39;div&#39;);var span = document.getElementById(&#39;span&#39;);//输出为null，因为div属于元素节点，元素节点是没有值的console.log(div.nodeValue);  

//输出为"div class" 属性节点是有值的console.log(div.getAttributeNode(&#39;class&#39;).nodeValue);  
//输出为"div"console.log(div.getAttributeNode(&#39;id&#39;).nodeValue);  

//输出为"Hello World"，span实际上有一个子节点，该节点是一个文本节点，//文本节点虽然没有标签，但它依然是一个节点console.log(span.childNodes[0].nodeValue);

以上是HTML DOM操作的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！