第14课时 DOM基础概念、操作

来源：互联网发布：小意思托福考试软件编辑：程序博客网时间：2024/05/09 11:21

01 DOM的概念及子节点类型

1)DOM的概念

DOM:Documentobject Model 文档对象模型

文档：html页面

文档对象：页面中元素

文档对象模型:定义为了能够让程序(js)去操作页面中打个元素。

DOM会把文档看做是一棵树，同时定义了很多方法来操作这棵树中的每一个元素节点

2)DOM节点

a)childNodes

首先childNodes：它是一个属性，例如元素.childNodes，代表的是子节点列表集合.

标准下：包含了文本和元素类型的节点，也会包含非法嵌套的子节点

非标准下：只包含元素类型的节点，ie7以下不会包含非法嵌套子节点.

childNodes只包含一级子节点，不包含后辈孙级以下的节点

获取第一级子元素

有兼容性问题（空白节点）， nodeType属性

<p>pppppppp</p>

</ul>

alert( oUl.childNodes.length );

alert( oUl.nodeType );

alert(oUl.childNodes[0].nodeType);

元素.attributes : 只读属性属性列表集合

alert( oUl.attributes.length );

alert( oUl.attributes[0].nodeType );

/*for (var i=0;i<oUl.childNodes.length; i++) {

if (oUl.childNodes[i].nodeType == 1 ) {

oUl.childNodes[i].style.background= 'red';

}

}*/

b) DOM节点的类型有很多种 12种

const unsigned short ELEMENT_NODE = 1;

const unsigned short ATTRIBUTE_NODE = 2;

const unsigned short TEXT_NODE = 3;

const unsigned short CDATA_SECTION_NODE = 4;

const unsigned short ENTITY_REFERENCE_NODE = 5;

const unsigned short ENTITY_NODE = 6;

const unsigned short PROCESSING_INSTRUCTION_NODE = 7;

const unsigned short COMMENT_NODE = 8;

const unsigned short DOCUMENT_NODE = 9;

const unsigned short DOCUMENT_TYPE_NODE = 10;

const unsigned short DOCUMENT_FRAGMENT_NODE = 11;

const unsigned short NOTATION_NODE = 12;

c)children方法

元素.children : 只读属性子节点列表集合

标准下：只包含元素类型的节点

非标准下：只包含元素类型的节点

<li>Vicky</li>

</ul>

var oUl = document.getElementById('ul1');

//alert(oUl.children.length );

for (var i=0;i<oUl.children.length; i++) {

oUl.children[i].style.background= 'red';

}

02 JS中级课程-子节点和兄弟节点的操作-2

a)firstChild

获取元素的第一个子节点

元素.firstChild : 只读属性第一个子节点

标准下：firstChild会包含文本类型的节点

非标准下：只包含元素节点

元素.firstElementChild : 只读属性标准下获取第一个元素类型的子节点

if ( oUl.firstElementChild ) {

oUl.firstElementChild.style.background= 'red';

} else {

oUl.firstChild.style.background= 'red';

}

b)元素.lastChild|| 元素.lastElementChild 最后一个子节点

var oLast = oUl.lastElementChild || oUl.lastChild;

oLast.style.background= 'yellow';

c）元素.nextSibling|| 元素.nextElementSibling 下一个兄弟节点

var oNext = oFirst.nextElementSibling || oFirst.nextSibling;

oNext.style.background= 'blue';

d) 元素.previousSibling|| 元素.previousElementSibling 上一个兄弟节点

var oPrev = oLast.previousElementSibling || oLast.previousSibling;

oPrev.style.background = 'orange';

03 parentNode、offsetParent父节点-3.

a)parentNode方法

<ulid="ul1">

</ul>

window.onload = function() {

var aA = document.getElementsByTagName('a');

for (var i=0; i<aA.length;i++) {

aA[i].onclick =function() {

元素.parentNode : 只读属性当前节点的父级节点

this.parentNode.style.display= 'none';

}

b)offsetParent方法

元素.offsetParent : 只读属性离当前元素最近的一个有定位属性的父节点

如果没有定位父级，默认是body

ie7以下，如果当前元素没有定位默认是body，如果有定位则是html

ie7以下，如果当前元素的某个父级触发了layout，那么offsetParent就会被指向到这个触发了layout特性的父节点上

</div>

alert(oDiv3.offsetParent.id );

04JS中级课程-元素的各种位置尺寸宽高-4

a)offsetLeft[top]

元素.offsetLeft[Top] : 只读属性当前元素到定位父级的距离（偏移值）

到当前元素的offsetParent的距离

如果没有定位父级

offsetParent -> body

offsetLeft -> html

如果有定位父级

ie7以下：如果自己没有定位，那么offsetLeft[Top]是到body的距离

如果自己有定位，那么就是到定位父级的距离

其他：到定位父级的距离

style.width : 样式宽

clientWidth : 可视区宽

offsetWidth : 占位宽

alert( oDiv.style.width ); //100

alert( oDiv.clientWidth ); //样式宽 + padding 120

alert(oDiv.offsetWidth ); //样式宽 + padding + border 可视区宽 + 边框

b)网页尺寸

网页尺寸offsetHeight

offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。

一、值

offsetHeight = clientHeight + 滚动条 + 边框。

二、浏览器兼容性

var w=document.documentElement.offsetWidth

|| document.body.offsetWidth;

var h=document.documentElement.offsetHeight

||document.body.offsetHeight;

网页尺寸scrollHeight

scrollHeight和scrollWidth，获取网页内容高度和宽度。

一、针对IE、Opera:

scrollHeight 是网页内容实际高度，可以小于 clientHeight。

二、针对NS、FF:

scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight 返回 clientHeight 。

三、浏览器兼容性

varw=document.documentElement.scrollWidth

|| document.body.scrollWidth;

varh=document.documentElement.scrollHeight

|| document.body.scrollHeight;

注意:区分大小写

scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。

05JS中级课程-封装绝对位置函数getPos()-上-5

<!DOCTYPE HTML>

<html>

<head>

<title>无标题文档</title>

<style>

div {

padding: 40px50px;

}

#div1 {

background:red;

position:relative;

}

#div2 {

background:green;

position:relative;

}

#div3 {

background:orange;

position:relative;

}

</style>

window.onload= function() {

var oDiv3= document.getElementById('div3');

//alert(oDiv3.offsetLeft );

/*variTop = 0;

var obj =oDiv3;

while(obj) {

alert(obj.id + ' : ' + obj.offsetTop );

iTop+= obj.offsetTop;

obj =obj.offsetParent;

alert(obj+ ' : ' + obj.id);

}

alert(iTop );*/

//alert(document.body.offsetTop );

var p = getPos(oDiv3);

//alert(p.top );

function getPos(obj){

var pos= {

left:0,

top:0

};

while(obj){

pos.left+= obj.offsetLeft;

pos.top+= obj.offsetTop;

obj= obj.offsetParent;

}

returnpos;

}

</script>

</head>

</div>

</body>

</html>

07JS中级课程-元素创建操作-7

a)操作元素属性的多种方式

<!DOCTYPE HTML>

<html>

<head>

<title> 操作元素属性的多种方式</title>

window.onload= function() {

var oText= document.getElementById('text1');

[]

//oText.value= '222';

//alert(oText.value );

//oText['value']= '222';

//alert(oText['value'] );

//varname = 'value';

//oText.name;有问题

//oText[name];OK

元素.getAttribute(属性名称); 方法获取指定元素的指定属性的值

//alert(oText.getAttribute('value') );

元素.setAttribute(属性名称，属性值); 方法给指定元素指定的属性设置值

//oText.setAttribute('value', 'hello' );

元素.removeAttribute(属性名称); 方法移除指定的元素的指定的属性

//oText.removeAttribute('value' );

1.用.和[]的形式无法操作元素的自定义属性

getAttribute可以操作元素的自定义属性

//alert(oText._name_ );

//alert(oText['_name_'] );

//alert(oText.getAttribute('_name_') );

var oImg =document.getElementById('img1');

2.可以获取元素属性实际的值

ie7下还是会返回资源的绝对路径

//alert(oImg.src );

//alert(oImg['src'] );

//alert(oImg.getAttribute('src') );

//alert(oImg.style.getAttribute('width') );

}

</script>

</head>

<body>

</body>

</html>

b) 元素的创建

<!DOCTYPE HTML>

<html>

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8">

<title>元素的创建</title>

window.onload = function() {

varoText = document.getElementById('text1');

varoBtn = document.getElementById('btn');

varoUl = document.getElementById('ul1');

oBtn.onclick= function() {

document.createElement(标签名称); 创建元素

varoLi = document.createElement('li');

//oLi.innerHTML= oText.value + '<a href="javascript:;">删除</a>';

oLi.innerHTML= oText.value;

varoA = document.createElement('a');

oA.innerHTML= '删除';

oA.href= 'javascript:;';

oA.onclick= function() {

父级.removeChild(要删除的元素); 删除元素

oUl.removeChild(this.parentNode );

}

oLi.appendChild(oA );

//添加到页面中

父级.appendChild(要添加的元素) 方法追加子元素

//oUl.appendChild(oLi );

父级.insertBefore(新的元素，被插入的元素) 方法在指定元素前面插入一个新元素

在ie下如果第二个参数的节点不存在，会报错

在其他标准浏览器下如果第二个参数的节点不存在，则会以appendChild的形式进行添加

//oUl.insertBefore(oLi, oUl.children[0] );

if( oUl.children[0] ) {

oUl.insertBefore(oLi, oUl.children[0] );

}else {

oUl.appendChild(oLi );

}

</script>

</head>

<body>

<inputtype="text" id="text1" /><inputtype="button" value="留言"id="btn" />

<ulid="ul1"></ul>

</body>

</html>

c)replaceChild方法

<!DOCTYPE HTML>

<html>

<head>

<title>无标题文档</title>

window.onload = function() {

var oDiv = document.getElementById('div1');

var oBtn = document.getElementById('btn');

var oP = document.getElementById('p1');

oBtn.onclick = function(){

父级.replaceChild(新节点，被替换节点) 替换子节点

//document.body.replaceChild(oDiv, oP );

appendChild,insertBefore,replaceChild都可以操作动态创建出来的节点，也可以操作已有节点

//oP.appendChild(oDiv );

}

</script>

</head>

<body>

<hr />

<p id="p1">ppppp</p>

</body>

</html>

0 0