HTML DOM操作

HTML DOM

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

DOM节点类型

• 文档节点 （document，唯一）
• 元素节点 （那些个标签div，p之类）
• 属性节点（class，src这种）
• 文本节点（插入在p，div内的文本）

查找元素方式

//查找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('div').innerText; 
//输出为"" 
var input= document.getElementById('input').innerText;  

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

<div id="div"><span>Hello World</span></div>

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

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

<div id="div" class="div class">
  <span id="span">Hello World</span>
</div>

var div = document.getElementById('div');
var span = document.getElementById('span');

//输出为null，因为div属于元素节点，元素节点是没有值的
console.log(div.nodeValue);  

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

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

中文在线API

w3cschool