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 btn-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);

Atas ialah kandungan terperinci HTML DOM操作的详细介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!