DOM
DOM
- 1.概念
- 2.DOM加载顺序(html从代码-->真正显示)
- 3.节点
- 4.document方法和属性
- 5.Element 对象
1.概念
文档对象模型(document object model )
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：DOM Tree
2.DOM加载顺序(html从代码–>真正显示)
- 解析HTML结构(从上向下的过程)
- 加载外部脚本和样式表文件
- 解析并执行脚本代码
- 构造HTML DOM模型
- 加载图片等外部文件
- 页面加载完毕
3.节点
dom树中的节点彼此拥有层级关系(由节点构成)
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
- 在节点树中，顶端节点被称为根（root）
- 每个节点都有父节点、除了根（它没有父节点）
- 一个节点可拥有任意数量的子节点
- 父、子 和同胞(兄弟或姐妹）节点。
- 同胞是拥有相同父节点的节点
4.document方法和属性
获得节点的常用方法
- getElementById()
- getElementsByName()
- getElementsByTagName()
5.Element 对象
- Element 对象表示 HTML 元素(节点)对象
- Element 对象是拥有类型为元素节点、文本节点、注释节点等子节点的节点(标签)
- 部分方法
element.appendChild()向元素添加新的子节点，作为最后一个子节点
<ul id="myList"><li>Coffeeli><li>Teali>ul>
<input id="input">
<button onclick="myFunction()">添加button>
<script>
function myFunction(){
var node=document.createElement("LI");
var input=document.getElementById("input")
var textnode=document.createTextNode(input.value);
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
script>
element.removeChild():从元素中移除子节点
<ul id="myList"><li>Coffeeli><li>Teali><li>Milkli><li>1li><li>2li><li>3li>ul>
节点位置:<input id="input">
<button onclick="myFunction()">删除button>
<script>
function myFunction(){
var input=document.getElementById("input")
var list=document.getElementById("myList");
list.removeChild(list.childNodes[input.value]);
}
script>
element.replaceChild():替换元素中的子节点
Eg1:
<ul id="myList"><li>Coffeeli><li>Teali><li>Milkli>ul>
节点位置:<input id="inputN"> 替换内容:<input id="inputS">
<button onclick="myFunction()">试一下button>
<script>
function myFunction(){
var inputN=document.getElementById("inputN")
var inputS=document.getElementById("inputS")
var textnode=document.createTextNode(inputS.value);
var item=document.getElementById("myList").childNodes[inputN.value];
item.replaceChild(textnode,item.childNodes[0]);
}
script>
Eg2:
var inputN=document.getElementById("imgchange")
var img=document.createElement("img");
img.src=“----";
inputN.replaceChild(img,inputN.childNodes[1]);
Element 对象表示 HTML 元素(节点)
Element 对象是拥有类型为元素节点、文本节点、注释节点的子节点
部分方法：
innerText&innerHTML
function changeLink(){
document.getElementById('aaa').innerHTML="<H1>cskaoyanH1>";
document.getElementById('aaa').innerText="<H1>cskaoyanH1>";
document.getElementById('aaa').href="http://www.cskaoyan.com";
document.getElementById('aaa').target="_blank";
}
script>
head>
<body>
<a id="aaa" href="http://www.microsoft.com">123a>
<input type="button" onclick="changeLink()" value="更改链接">