Javascript之DOM
节点分类 node
元素节点 文本节点 属性节点
获取元素节点对象的方式
1. var eleNode = document.getElementById('idname');
2. var olist = document.getElementsByTagName('li'); 获取所有的li标签，是一个节点对象的集合，有点像数组，但不是数组。
3. var items = documet.getElementsByClassName('item'); 获取的依然是节点对象集合
获取和设置元素节点对象属性的方式
1. var classname = obj.getAttribute('class');
2. obj.setAttribute('class', 'header');
节点对象的三个属性
nodeName nodeValue nodeType
<div id="box">我是一个文本<!--我是注释--></div>
// 元素节点
var odiv = document.getElementById('box');
console.log(odiv.nodeName + " | " + odiv.nodeValue + " | " + odiv.nodeType);
// 属性节点
var attrnode = odiv.attributes[0];
console.log(attrnode.nodeName + " | " + attrnode.nodeValue + " | " + attrnode.nodeType);
// 文本节点
var textnode = odiv.childNodes[0];
console.log(textnode.nodeName + " | " + textnode.nodeValue + " | " + textnode.nodeType);
// 注释节点
var comment = odiv.childNodes[1];
console.log(comment.nodeName + " | " + comment.nodeValue + " | " + comment.nodeType);
节点对象的其他常用属性
var oFather = document.getElementById('father');
console.log(oFather.childNodes[0]);
console.log(oFather.firstChild);
console.log(oFather.childNodes[oFather.childNodes.length - 1]);
console.log(oFather.lastChild);
console.log(oFather.parentNode.parentNode);
console.log(oFather.nextSibling);
console.log(oFather.previousSibling);
封装获取相应节点对象的方法
<div class = "previous">我是上一个兄弟</div>
<div id = "father">
<p>我是文本1</p>
<p>我是文本2</p>
</div>
<!-- 我是注释 -->
<div class = "next">我是下一个兄弟</div>
<script type="text/javascript">
var ofather = document.getElementById("father");
function getChilds(father_obj){
var father_childs = father_obj.childNodes;
var arr = [];
for(var i = 0; i < father_childs.length; i++){
if(father_childs[i].nodeType===1){
arr.push(father_childs[i]);
}
}
return arr;
}
var childs = getChilds(ofather);
console.log(childs[0]);
function getNext(n){
var x = n.nextSibling;
while(x && x.nodeType != 1){
x = x.nextSibling;
}
return x; }
console.log(getNext(ofather));
元素节点对象的增删改查操作
<div id="father">
<p id="text">我是一个文本</p>
</div>
// 动态的操作节点
// 1. 创建节点 createElement()
// 2. 插入节点 appendChild()
// insertBefore(newNode, oldNode)
// 3. 删除节点 removeChild()
// 4. 替换节点 replaceChild(newNode, oldNode)
// 5. 创建文本节点 createTextNode()
var oDiv = document.getElementById('father');
var oActive = document.getElementById("text");
var newNode = document.createElement("p");
var newNode1 = document.createElement("a");
var newNode2 = document.createElement("p");
var newNode3 = document.createElement("span");
// var textNode = document.createTextNode("百度");
// newNode.appendChild(textNode);
newNode.innerHTML = "aaaaaaa"; //给元素节点添加文本的常用方法
newNode.setAttribute("class","box");
oDiv.appendChild(newNode);
newNode1.innerHTML = "百度一下";
newNode1.setAttribute("href", "https://www.baidu.com");
oDiv.replaceChild(newNode1,oActive);
newNode2.innerHTML = "<a href='#'>hello world</a>";
oDiv.insertBefore(newNode2, newNode1);
newNode3.innerHTML = "文本2";
oDiv.appendChild(newNode3);
oDiv.removeChild(newNode3);
newNode, newNode1, newNode2, newNode3 = null;
事件
onclick事件 鼠标点击事件
<div id="box"></div>
<script type="text/javascript">
var oDiv = document.getElementById("box");
var flag = true;
oDiv.onclick = function(){
if(flag){
oDiv.style.backgroundColor = "blue";
flag = false;
}else{
oDiv.style.backgroundColor = "red";
flag = true;
}
};
onmouseover 鼠标悬停事件
onmouseout 鼠标移开事件
onfocus和onblur事件 鼠标聚焦和鼠标失焦事件
<form action="">
<p class="name">
<label for="username">用户名：</label>
<input type="text" name="user" id="username">
</p>
<p class="pwd">
<label for="pwd">密码：</label>
<input type="password" name="wpd" id="pwd">
</p>
<input type="submit" name="">
</form>
<script type="text/javascript">
var userName = document.getElementById('username');
var newNode = document.createElement('span');
userName.onfocus = function(){
newNode.innerHTML = '请输入用户名';
newNode.setAttribute('class', 'text')
userName.parentNode.appendChild(newNode);
userName.onblur = function(){
newNode.innerHTML = '请输入正确的用户名';
newNode.setAttribute('class', 'text')
userName.parentNode.appendChild(newNode);
}
</script>
onselect内容选中事件
onchange 内容改变事件
oninput 内容实时改变事件
<textarea cols="30" rows="10">请写入个人简介，字数不少于200字</textarea>
<input type="text" name="" value="mjj">
<script type="text/javascript">
var textArea = document.getElementsByTagName('textarea')[0];
var inputObj = document.getElementsByTagName('input')[0];
textArea.onselect = function(){
console.log('内容被选中');
}
inputObj.onchange = function(){
console.log('内容被改变了');
}
inputObj.oninput = function(){
console.log('内容被实时改变了');
console.log(this.value);
}
onload 网页窗口加载事件
window.onload = function(){
}
