DOM

前端小白1995
235 阅读3分钟

当网页加载时，浏览器会创建页面的DOM(document object model)，文档对象模型，通常把dom看作一棵树，dom把文档看作一棵家谱树。通过dom可以访问所有的html元素，及其文本和属性。

DOM中节点的分类

节点（node）包括三类：

  • 元素节点(element node)
  • 文本节点(text node)
  • 属性节点(attribute node)

如何获取节点对象

获取元素节点

...
<body>
    <h1>
        元素节点
    </h1>
    <p title="node">
        如何获取元素节点对象
    </p>
    <ul id="ul_lists">
        <li class="item">document.getElementById()</li>
        <li class="item">document.getElementsByClassName()</li>
        <li>document.getElementsByTagName</li>
    </ul>
</body>

document.getElementById("ul_lists");

获取到

<ul id="ul_lists">
    <li></li>
    ....
</ul>

document.getElementsByTagName('li');

获取到一个节点对象集合，可以通过索引获取想要的内容，有点像数组，不推荐使用，太low了

document.getElementsByClassName('item');

获取到也是一个节点对象集合，可以通过索引获取想要的内容。

获取节点属性值

var op = document.getElementsByTagName('p')[0];
//获取属性
var tValue=op.getAttribute('title');//node

设置节点属性值

//设置属性
op.setAttribute('title','newNode');

节点属性

节点的名称：nodeName

节点的名称，是只读的

  1. 元素节点的nodeName与标签名相同
  2. 属性节点的nodeName与属性名相同
  3. 文本节点的nodeName永远是#text
  4. 文档节点的nodeName永远是#document
  5. 注释节点的nodeName永远是#comment

节点的值：nodeValue

  1. 元素节点的nodeValue是undefined或null
  2. 文本节点的nodeValue是文本自身
  3. 属性节点的nodeValue是属性的值
  4. 注释节点的nodeValue是注释文本

节点的类型：nodeType

节点的类型，是只读的

元素类型节点类型
元素1
属性2
文本3
注释8
文档9
<body>
    <div id="box" title="mytext">
        我是一个文本节点
        <!--我是注释-->
    </div>
</body>

//1.元素节点
var oDiv = document.getElementById("box");
console.log(oDiv.nodeName);//DIV
console.log(oDiv.nodeValue);//null
console.log(oDiv.nodeType);//1

//2.属性节点
console.log(oDiv.attributes);//集合
var attrNode=oDiv.attributes [0];
console.log(attrNode.nodeName);//id
console.log(attrNode.nodeValue);//box
console.log(attrNode.nodeType);//2

//3.文本节点
console.log(oDiv.childNodes);//集合
var textNode = oDiv.childNodes[0];
console.log(textNode.nodeName);//#text
console.log(textNode.nodeValue);//mytext
console.log(textNode.nodeType);//3

//4.注释节点
var commentNode = oDiv.childNodes[1];
console.log(commentNode.nodeName);//#tcomment
console.log(commentNode.nodeValue);//我是注释
console.log(commentNode.nodeType);//8

//5.文档节点
console.log(document.nodeType);//9

其他节点属性

  1. childNodes
  2. firstChild
  3. lastChild
  4. parentNode
  5. previousSibling
  6. nextSibling
<body>
    <div class="prev">
        bigBrother
    </div>
    <div id="father">
        <p>
            john
        </p>
        <p>
            jack
        </p>
    </div>
    <div class="next">
        litteBrother
    </div>
</body>

var oF=document.getElementById("father");
console.log(oF.childNodes);//获取所有的子节点
console.log(oF.firstChild);//获取第一个子节点
console.log(oF.lastChild);//获取最后一个子节点

console.log(oF.parentNode);//获取父节点

console.log(oF.nextSibling);//获取下一个兄弟节点
console.log(oF.previousSibling);//获取上一个兄弟节点

节点对象属性在各浏览器兼容性处理

//获取子节点
function get_childNodes(fatherNode){
    var  nodes = fatherNode.childNodes;
    var arr = [];
    for (var i=0;i<nodes.lenght;i++){
        if(nodes[i].nodeType===1){
            arr.push(nodes[i]);
        }
    }
    return arr;
}
var childnodes=get_childNodes(oF);
//下一个
function get_nextSibling(n){
    var x = n.nextSibling;
    while(x && x.nodeType!=1){
    	x = x.nextSibling;   
    }
    return x;
}
get_nextSibling(oF);
//上一个
function get_prevSibling(n){
    var x = n.previousSibling;
    while(x && x.nodeType!=1){
    	x = x.previousSibling;   
    }
    return x;
}
get_prevSibling(oF);

对节点的增删改查

动态的操作节点

  1. 创建节点 createElement()
  2. 插入节点 appendChild()、insertBefore(n,o)
  3. 删除节点 removeChild()
  4. 替换节点 replaceChild()
  5. 创建文本节点 createTextNode()
<div id="box">
    <p id="active">
        hello
    </p>
</div>

增加

var oDiv = document.getElementById('box');
//创建标签
var newNode=document.createElement('p');//<p></p>
var newNode2=document.createElement('p');
//设置属性
newNode.setAttribute("class",'text');//<p class="text"></p>

//创建文本
var textNode = document.createTextNode('world'); 
newNode.appendChild(textNode);//<p class="text">world</p>
//等价于
newNode.innerHTML='world';//推荐使用

//插入
oDiv.appendChild(newNode);
oDiv.insertBefore(newNode2,newNode);

删除

父删子

var oActive = document.getElementById('active');
oDiv.removeChild(oActive);

替换

oDiv.replaceChild(newNode,oActive);

操作样式

<p id="box">
    jack
</p>

1.直接操作样式属性

var oP = document.getElementById('box');
console.log(oP.style);//样式对象
oP.style.color="red";
oP.style.width="200px";
oP.style.height="200px";
oP.style.backgroundColor="pink";
oP.style.fontSize="20px";

2.通过控制属性的类名来控制样式

oP.setAttribute('class','active');

事件

事件说明
onclick鼠标点击
onmouseover鼠标经过
onmouseout鼠标移开
onchange文本框内容改变
onselect文本框被选中
onblur光标失焦
onfocus光标聚焦
onload网页加载

鼠标点击

<div id="box">
    hello
</div>

var oDiv = document.getElementById('box');
oDiv.onclick = function(){
    console.log('点我干哈');
    this.style.color='red';
}

还有这种写法(不推荐)

<div id="box" onclick="add()">
    hello
</div>
<script>
    function add(){
        console.log('点我干哈')
    }
</script>

鼠标悬浮

oDiv.onmouseover = function(){
    this.style.backgroundColor = 'green';
};
oDiv.onmouseout = function(){
    this.style.backgroundColor = 'pink';
};

表单控件上的事件

<form>
    <p>用户名
    	<input type = 'text' name='username' id="username">
    </p>
    <p>密码
		<input type='password' name='pwd'>
    </p>
    <p>
        <input type='submit' value='提交'>
    </p>
</form>

1.光标聚焦&失焦

var userName=document.getElementById('username');
userName.onfocus=function(){
    console.log('请输入用户名')
};
userName.onblur=function(){};

2.内容选中&改变

<textarea cols='30' rows='10'>
    请写入个人简介，不少于300字
</textarea>
<input type='text' name='' value='john'>

var textArea=document.getElementsByTagName('textarea')[0];
var inputItem=document.getElementTagName('input')[0];
textArea.onselect=function(){
    alert('内容被选中了');
};
inputItem.onchange=function(){
	alert('内容改变了');
};
inputItem.oninput=function(){
    console.log('内容实时改变');
    console.log(this.value);
}

窗口加载事件

等待文档元素加载完成之后才会调用onload()

window.onload=function(){
    
};
avatar
文章
阅读
粉丝