前端之HTML DOM操作

HTML DOM

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

DOM节点类型

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

document中的open()定义和用法

open() 方法可打开一个新文档，并擦除当前文档的内容。

语法

 document.open(mimetype,replace)

参数描述

mimetype 可选。规定正在写的文档的类型。默认值是 "text/html"。

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('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);