DOM
来源：互联网 发布：狼牙军品专卖店一淘宝 编辑：程序博客网 时间：2024/05/21 04:17
DOM
1什么是DOM
DOM是Document Object Model（文档对象模型）的缩写，它是W3C国际组织的一套Web标准。是针对HTML和XML文档的一个API，它定义了访问HTML文档对象的一套属性、方法和事件。
2 nodeType节点类型
1.每个节点都有一个nodeType属性，用于表明节点的类型。
2.常用节点类型与对应nodeType值：用于判断获取到的元素属于什么类型节点；
元素节点 <==> 1
文本节点 <==> 3
属性节点 <==> 2
//找出所有节点
<div class="content" title="属性节点">测试Div</div>
//一个元素节点，2个属性节点，1个文本节点
3节点的获取
3.1获取节点的方法
注意：如果确认元素存在, 但是返回null或[]，一定是代码执行顺序的问题。
3.1.1 document.getElementById(‘id’)
通过 ID获取元素的节点（速度最快）；
必须通过document调用；
返回DOM节点对象，如果id不存在返回null。
3.1.2 getElementByTagName(‘tagname’)
通过标签名获取元素节点列表；获取的结果为类数组，所以需要添加下表，如
var h1 = document.getElementsByTagName('h1')[0];
返回类数组，如果tagname不存在返回空数组[]。
3.1.3 getElementByClassName(‘class’)
通过class类名获取节点列表；获取的结果为类数组，所以需要添加下表，如
var datalist = document.getElementsByClassName('datalist')[0];
返回类数组，如果classname不存在返回空数组[]。
3.1.4 document.getElementByName(‘name’)
通过name属性获取元素节点列表；
必须通过document调用；
返回类数组，如果tagname不存在返回空数组[]。
4节点操作
4.1节点属性
4.1.1 nodeName
根据其类型返回节点的名称。
4.1.2 nodeType
返回节点的类型。
4.1.3 nodeValue
返回节点的值（元素节点的nodeValue为null）。
4.2节点方法
以下parent表示父级元素，ele表示元素。
4.2.1节点创建方法
4.2.1.1 document.createElement()
创建一个元素节点。
4.2.1.2 document.createTextNode()
创建一个文本节点。
4.2.1.1 document.createAttribute()
创建一个属性节点（了解）。
4.2.2节点插入方法
4.2.2.1 parent.appendChild()
向节点的子节点列表的结尾添加新的子节点。
4.2.2.2 parent.insertBefore(new,node)
在指定的子节点node前插入新的子节点new。
4.2.2.3 ele.setAttributeNode(attrNode)
在指定元素中插入一个属性节点（了解），对页面已存在节点的处理。
4.2.3节点的复制
cloneNode(boolean) 复制节点，为true是深复制。
4.2.4节点的删除
parent.removeChild(ele) 删除（并返回）当前节点parent的指定子节点ele。
4.2.5节点的判断
parent.hasChildNodes() 判断当前节点是否拥有子节点,返回布尔值。
4.3利用节点关系获取其他节点
4.3.1 ele.parentNode获取父级节点
ele.parentNode 得到ele元素的父节点。
4.3.2获取子节点
4.3.2.1 ele.childNodes
得到ele元素的全部子节点列表（类数组），会把文本节点（包括换行）计算进去。可通过common.js中的封装函数，筛选出正确的元素节点。
function getElement(nodes){
var res = [];
for(var i=0;i<nodes.length;i++){
if(nodes[i].nodeType === 1){
res.push(nodes[i]);
}
}
return res;
}
4.3.2.2 ele.firstChild
得到ele元素的第一个子节点，可能得到空格或换行，需要通过common.js中的封装函数进行筛选。
function getElement(nodes){
var res = [];
for(var i=0;i<nodes.length;i++){
if(nodes[i].nodeType === 1){
res.push(nodes[i]);
}
}
return res;
}
//res为符合要求的元素节点
function firstElementChild(parent){
var res = getElement(parent.childNodes);
return res[0];
}
4.3.2.3 ele.lastChild
得到ele元素的最后一个子节点，可能得到空格或换行，需要通过common.js中的封装函数进行筛选。
function getElement(nodes){
var res = [];
for(var i=0;i<nodes.length;i++){
if(nodes[i].nodeType === 1){
res.push(nodes[i]);
}
}
return res;
}
function lastElementChild(parent){
var res = getElement(parent.childNodes);
return res[res.length-1];
}
4.3.3获取兄弟节点
4.3.3.1 ele.nextSibling
获取ele元素的下一个兄弟节点，一般会得到空格或者换行。
function nextElement(ele){
var res = ele.nextSibling;
// 判断res是否为元素节点，并且不是最后一个元素
while(res.nodeType !== 1 && res != ele.parentNode.lastChild){
res = res.nextSibling;
}
return res;
} //ele.parentNode.lastChild 代表这个元素的父元素的最后一个元素，这种表达方式比较方便，不要再去html结构里找ele的父元素具体是什么。
4.3.3.2 ele.previousSibling
获取ele元素的上一个兄弟节点，参考ele.nextSibling。
4.4针对元素的节点关系(IE8-不支持)
节点包括元素节点、文本节点、属性节点，而节点关系主要包括元素节点和文本节点，通过4.3中的节点获取元素节点容易包含文本节点、空格等，所以有针对元素的节点关系，可以直接得到元素节点，不需要通过封装函数筛选。
4.4.1父节点与父元素对比
父节点：parentNode，
父元素：parentElement。
4.4.2子节点与子元素对比
子节点：firstChild、lastChild、childNodes
子元素：firstElementChild、lastElementChild、children
4.4.3兄弟节点与兄弟元素对比
兄弟节点： previousSibling、nextSibling，
兄弟元素：previousElementSibling、nextElementSibling。
5 元素获取细节案例
<body>
<div id="datalist">
<h4>华语歌坛TOP3</h4>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<h4>粤语歌坛TOP3</h4>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
<script>
window.onload = function(){
var datalist = document.getElementById('datalist');
console.log(datalist);
var h4 = datalist.getElementsByTagName('h4');
console.log(h4);
// 给h4绑定事件
for(var i=0;i<h4.length;i++){
h4[i].onclick = function(){
this.style.color = '#f00';
}
}
}
</script>
在给h4绑定onclick事件的for循环中，当页面加载完成时，h4[0],h4[1]已经被绑定了onclick事件，我们在页面点击时为触发这个事件，this代表在页面点击时的当前h4[i]，在我们点击这个h4[i]时，this.style.color改变。
6元素节点的操作
6.1常用属性
可以通过点语法或方括号访问。
6.1.1 tagName
获取元素节点的元素标签名。
6.1.2 id
设置/获取元素id属性。
6.1.3 name
设置/获取元素name属性。
6.1.4 style
设置/获取元素的内联样式。
6.1.5 className
设置/获取元素的class属性。
6.1.6 innerHTML
设置/获取元素的内容（包含html代码）。
6.1.7 outerHTML
设置或获取元素及其内容（包含html代码）。
6.1.8 innerText
设置或获取位于元素标签内的文本。
6.1.9 outerText
设置(包括标签)或获取(不包括标签)元素的文本。
6.2盒模型相关
6.2.1 offsetTop
当前元素离<定位父级>元素顶部的距离。
6.2.2 offsetLeft
当前元素离<定位父级>元素左边的距离。
以上两个属性如果没定位的父级，则相对于根元素html的距离。
6.2.3 offsetWidth
当前元素的宽度（border + padding + content）。
6.2.4 offsetHeight
当前元素的高度（border + padding + content）。
6.3元素方法（使用于所有元素）
6.3.1 ele.getAttribute(attr)
获取元素的属性值（自定义属性获取）。
6.3.2 ele.setAttribute(attr)
设置元素的属性。对于class,id等标准属性，DOM节点与html结构存在一一对应的关系，可以用点名法直接给元素属性赋值；对于非标准属性，只会在DOM结构中设置，若想在在html中显示，则需要用ele.setAttribute(attr)。
如：
username.setAttribute('idx','20'); //在调用这个属性值时，不能用username.idx，只能用user.getAttribute(‘idx’);
我们在实际项目中，很多只需要要在元素的DOM结构中添加非标准属性，不需要在html结构中生成，所以可以直接通过username.idx = 20；添加属性和属性值，在html中不显示，在DOM中存在，可随时调用。详见<基础课件12-tab标签页切换>。
6.3.3 ele.removeAttribute(attr)
删除属性attr。
6.3.4 ele.hasAttribute(attr)
判断是否存在属性attr。
6.4获取CSS样式（非行内样式）
得到当前元素计算后的所有样式。
6.4.1 getComputedStyle(ele,pseudo)
ele:要获取样式的元素；pseudo:伪元素样式字符(可选)，可获取伪元素样式。
全局方法，var boxCss = getComputedStyle(box);
boxCss.color = ;
6.4.2 ele.currentStyle(IE8-)
为元素的属性。
在实际项目中，需要判断用户的浏览器到底能识别哪个代码，需要通过封装函数来获取css样式。
function getStyle(ele,attr){
var res = '';
// 标准浏览器
if(window.getComputedStyle){
res = getComputedStyle(ele)[attr];
}
// ie8-
else if(ele.currentStyle){
res = ele.currentStyle[attr];
}
// 其他浏览器
else{
res = ele.style[attr];
}
return res;
}
7 table对象（了解）
7.1 table对象属性&方法
7.1.1 rows
rows 返回包含表格中所有行的一个数组。
7.1.2 tBodies
tBodies 返回包含表格中所有 tbody的一个数组。
7.1.3 insertRow(index)
insertRow(index) 在表格中插入一个新行。
7.1.4 deleteRow
deleteRow(index) 从表格删除一行。
7.2 tr对象属性&方法
7.2.1 cells
cells 返回包含表格中所有单元格的一个数组。
7.2.2 rowIndex
rowIndex 返回该行在表中的位置。
7.2.3 sectionRowIndex
sectionRowIndex 返回在 tBody、tHead或tFoot中行的位置。
7.2.4 insertCell(index)
insertCell(index) 在一行中的指定位置插入一个空的列。
7.2.5 deleteCell(index)
deleteCell(index) 删除行中的指定的单元格。
7.3 td/th对象属性&方法
7.3.1 cellIndex
cellIndex 返回单元格在表格行的单元格集合中的位置。
