节点概念
DOM把所有的html都转换为节点
整个文档 是一个节点
元素 是节点
元素属性 是节点
元素内容 是节点
注释 也是节点
<div id="d1">hello HTML DOM</div>
<script>
var div1 = document.getElementById("d1");
p("文档节点"+document);
p("元素"+div1);
p("属性节点"+div1.attributes[0]);
p("内容节点"+div1.childNodes[0]);
</script>
获取节点
方法 | 功能 |
---|---|
document.getElementById | 通过id获取元素节点 |
getElementsByTagName | 通过标签名称获取元素节点 |
getElementsByClassName | 通过类名获取元素节点 |
getElementsByName | 通过表单元素的name获取元素节点 |
attributes | 获取属性节点 |
childNodes | 获取内容节点 |
DOM样式
无
DOM事件
事件 | 简介 |
---|---|
onfocus ,onblur | 焦点事件 (获取,丢失) |
onmousedown,onmouseup,onmouseover,onmousemove,onmouseout | 鼠标事件 (按下,松开,经过,进入,退出) |
onkeydown,onkeypress,onkeyup | 键盘事件 (按下,按下,弹起) |
onclick,ondblclick | 点击事件 |
onchange | 变化事件 |
onsubmit | 提交事件 |
onload | 加载事件 |
this | 当前组件 |
return false | 阻止事件的发生 |
onkeydown
可以获取所有键,除了打印键Prts
可以获取用户是否点击了修饰键 (ctrl,shift,alt)
不能判断输入的是大写还是小写
onkeypress
只能获取字符键
不能获取用户是否点击了修饰键 (ctrl,shift,alt)
可以判断输入的是大写还是小写
节点关系
parentNode | 父节点关系 |
previousSibling,nextSibling | 同胞节点关系 |
childNodes | 子节点关系 |
<div id="parentDiv">
<div id="d1">第一个div</div>
<div id="d2">第二个div</div>
<div id="d3">第三个div</div>
</div>
创建节点
createElement 创建元素节点
<div id="d">Hello HTML DOM</div>
<button onclick="add()">在div中追加一个hr元素</button>
<script>
function add(){
var hr=document.createElement("hr");
var div1 = document.getElementById("d");
div1.appendChild(hr);
}
</script>
createTextNode 创建文本节点
<div id="d">Hello HTML DOM</div>
<script>
function add(){
var p=document.createElement("p");
var text = document.createTextNode("这是通过DOM创建出来的<p>");
p.appendChild(text);
var div1 = document.getElementById("d");
div1.appendChild(p);
}
</script>
<button onclick="add()">在div中追加一个p元素</button>
createAttribute 创建属性节点
<div id="d">Hello HTML DOM<br></div>
<script>
function add(){
var a=document.createElement("a");
var content = document.createTextNode("http://yellow.com");
a.appendChild(content);
var href = document.createAttribute("href");
href.nodeValue="http://yellow.com";
a.setAttributeNode(href);
var div1 = document.getElementById("d");
div1.appendChild(a);
}
</script>
<button onclick="add()">在div中追加一个超链</button>
删除节点
removeChild 删除元素节点
要删除某个元素节点有两步
第一:先获取该元素的父节点
第二:通过父节点,调用removeChild 删除该节点
<div id="parentDiv">
<div id="div1">安全的div</div>
<div id="div2">即将被删除的div</div>
</div>
<button onclick="removeDiv()">删除第二个div</button>
<script>
function removeDiv(){
var parentDiv = document.getElementById("parentDiv");
var div2= document.getElementById("div2");
parentDiv.removeChild(div2);
}
</script>
removeAttribute 删除属性节点
第一:先获取该元素节点
第二:元素节点,调用removeAttribute删除指定属性节点
<script>
<a id="link" href="http://12306.com">http://12306.com</a>
<br>
<button onclick="removeHref()">删除超链的href属性</button>
function removeHref(){
var link= document.getElementById("link");
link.removeAttribute("href");
}
</script>
removeChild 删除文本节点
第一:通过childNodes[0] 获取文本节点
注:children[0] 只能获取第一个子元素节点,不能获取文本节点
第二:通过removeChild删除该文本节点
但是这种方式比较麻烦,一般都是直接通过innerHTML设置为空即可。
注: 通过innerHTML=""的方式,同样会导致文本子节点被删除。
<div id="parentDiv"> 这里是文本</div>
<button onclick="removeDiv1()">通过removechild删除div下的文本节点</button>
<button onclick="removeDiv2()">通过innerHTML让内容置空</button>
<button onclick="recover()">恢复内容</button>
<script>
function removeDiv1(){
var parentDiv = document.getElementById("parentDiv");
var textNode = parentDiv.childNodes[0];
parentDiv.removeChild(textNode);
}
function removeDiv2(){
var parentDiv = document.getElementById("parentDiv");
parentDiv.innerHTML="";
}
function recover(){
var parentDiv = document.getElementById("parentDiv");
parentDiv.innerHTML="这里是文本 ";
}
</script>
替换节点
replaceChild
与删除节点一样,替换节点也需要先获取父节点,然后通过父节点替换子节点。
- 获取父节点
- 创建子节点
- 获取被替换子节点
- 通过replaceChild进行替换
注: replaceChild 第一个参数是保留的节点,第二个参数是被替换的节点
<div id="parentDiv">
<div id="d1">第一个div</div>
<div id="d2">第二个div</div>
<div id="d3">第三个div</div>
</div>
<script>
function replaceDiv(){
var d4= document.createElement("div");
var text = document.createTextNode("第四个div");
d4.appendChild(text);
var d3 = document.getElementById("d3");
var parentDiv = document.getElementById("parentDiv");
parentDiv.replaceChild(d4,d3);
}
</script>
<button onclick="replaceDiv()">替换第3个div</button>
插入节点
appendChild 追加节点
通过appendChild追加节点。 追加节点一定是把新的节点插在最后面
- 创建新节点
- 获取父节点
- 通过appendChild追加
insertBefore 在前方插入节点
有时候,需要在指定位置插入节点,而不是只是追加在后面。
这个时候就需要用到insertBefore
- 创建新节点
- 获取父节点
- 获取需要加入的子节点
- 通过insertBefore插入
注: insertBefore的第一个参数是新元素,第二个参数是插入位置
<div id="parentDiv">
<div id="d1">第一个div</div>
<div id="d2">第二个div</div>
<div id="d3">第三个div</div>
</div>
<button onclick="appendDiv()">追加第4个div</button>
<button onclick="insertDiv()">在第二和第三之间,插入第二点五个div</button>
<script>
function appendDiv(){
var d4= document.createElement("div");
var text = document.createTextNode("第四个div");
d4.appendChild(text);
var parentDiv = document.getElementById("parentDiv");
parentDiv.appendChild(d4);
}
</script>
<script>
function insertDiv(){
var d25= document.createElement("div");
var text = document.createTextNode("第二点五个div");
d25.appendChild(text);
var parentDiv = document.getElementById("parentDiv");
var d3 = document.getElementById("d3");
parentDiv.insertBefore(d25,d3);
}
</script>