HTML DOM树
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 模型被构造为对象的树。通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。
查找节点
- 通过 id 查找 HTML 元素
var x=document.getElementById("dv");
- 通过标签名查找 HTML 元素
var y=document.getElementsByTagName("p")[i];
添加节点
1. 创建节点
1>元素节点:var node =document.createElement(“标签名”);
2>文本节点:
Var textNode=document.createTextNode("文本内容");
节点.innerHtML="文本内容";//可以识别html
节点.innerText="文本内容";//非标准,有些浏览器无法识别
3>属性节点:
节点.setAttribute(“属性名”,“属性值”);
1.这是标准的方法,符合xml规范,可以添加任意的属性;
2.节点.属性名=“属性值”,例如aNode.jk=“jk”;//部分浏览器时可以使用
2. 追加节点
a. 追加到尾部:父节点.appendChild(子节点);
b. 插入到中间(插入到某一个元素的前面):父节点.insertBefore(新元素,旧元素);
demo