jsDom-jsBoM基础概念一网打尽

最新推荐文章于 2024-08-11 00:22:53 发布

chenminglvming

最新推荐文章于 2024-08-11 00:22:53 发布

阅读量1.2k

点赞数 2

分类专栏： javascript 文章标签：妙味课堂 javascript 陈明梦想创业俱乐部 DOM基础概念操作

本文链接：https://blog.csdn.net/chenminglvming/article/details/51112574

版权

javascript 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

今天梦想创业俱乐部的陈明跟大家一起消灭jsDom-jsBoM基础概念，希望大家好好的在自己的笔记本上练一练。好的，下面，跟着陈明一起消灭jsDom-jsBoM的基础概念吧。

1.DOM?概念

Document Object Model
文档：html的页面;文档对象：文档中的元素;文档对象模型：就是一棵树，为了通过js程序来操作页面的元素。

2.元素节点，属性节点，文本节点

<ul>
<li style="width:123px;">我是文本内容</li>
<li style="width:123px;">我是文本内容</li>
</ul>
元素节点:ul li
属性节点:width
文本节点:我是文本内容

-------->nodeType nodeName nodeValue
元素节点 1 li
属性节点 2 width 123px
文本节点 3 我是文本内容

3.元素.childNodes:只读属性，子节点的列表集合
标准浏览器：
包含了文本和元素节点，也包含非法嵌套的子节点
非标准浏览器：
只包含元素的节点，ie7以下不会包含非法嵌套的节点

注意点：childNodes只包含一级子节点，不包含后辈的孙子子节点。

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

5.元素.children:只读属性子节点列表集合
这个用法和元素.childNodes的用法是差不多的，但有不同点。
标准下:
只包含元素类型的节点
非标准下:
只包含元素类型的节点

6.元素.firstChild : 只读属性第一个子节点(和childNodes是通的)
标准下：
firstChild会包含文本类型的节点
非标准下：
只包含元素节点

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

为了兼容标准和非标准浏览器来获取第一个元素，我们应该这么写
if ( oUl.firstElementChild) {
oUl.firstElementChild.style.background = 'red';//配合标准浏览器
} else {
oUl.firstChild.style.background = 'red'; //配合非标准浏览器
}
但是上述的程序会有问题，当oUl里面没有元素的时候就会报错了。所以推荐兼容浏览器的写法应该这样--->

if ( oUl.children[0] ) {
//oUl.children[0].style.background = 'red';
var oFirst = oUl.firstElementChild || oUl.firstChild;
oFirst.style.background = 'red';
} else {
alert( '没有子节点可以设置' );
}

8.元素.lastChild 元素.lastElementChild 最后一个子节点
兼容浏览器的写法--->
if ( oUl.children[0] ) {
var oLast = oUl.lastElementChild || oUl.lastChild;
oLast.style.background = 'yellow';
} else {
alert( '没有子节点可以设置' );
}

9.元素.nextSibling 元素.nextElementSibling 下一个兄弟节点

var oNext = oFirst.nextElementSibling || oFirst.nextSibling;
oNext.style.background = 'blue';

10.元素.previousSibling 元素.previousElementSibling 上一个兄弟节点

var oPrev = oLast.previousElementSibling || oLast.previousSibling;
oPrev.style.background = 'orange';

11.元素.parentNode : 只读属性当前节点的父级节点
oFirst.parentNode.style.display = 'none';

12.元素.offsetParent : 只读属性离当前元素最近的一个有定位属性的父节点
如果没有定位父级，默认是body
ie7以下，如果当前元素没有定位默认是body，如果有定位则是html
ie7以下，如果当前元素的某个父级触发了layout，那么offsetParent就会被指向到这个触发了layout特性的父节点上(比如:加了zoom)

13.元素.offsetLeft/元素.offsetTop : 只读属性当前元素到定位父级的距离（偏移值）
意思：到当前元素的offsetParent的距离;
如果没有定位父级
offsetParent -> body
offsetLeft -> html

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

14.元素的宽高

width height

style.width : 样式宽
clientWidth : 可视区宽(样式宽 + padding)
offsetWidth : 占位宽(样式宽 + padding + border == 可视区宽 + 边框)

15.指定元素到文档页面的距离的函数的封装
JS代码：
function getPos(obj) {

var pos = {left:0, top:0};

while (obj) {
pos.left += obj.offsetLeft;
pos.top += obj.offsetTop;
obj = obj.offsetParent;
}

return pos;

}

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

HTML代码：
<body id="body1">
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>

CSS代码:
div {padding: 40px 50px;}
#div1 {background: red;position: relative;}
#div2 {background: green; position: relative;}
#div3 {background: orange; position: relative;}

16.操作元素属性的多种方式
有兼容性问题，标准下不能获取两层获取：getAttribute(名称)
设置：setAttribute(名称, 值)删除：removeAttribute(名称)第三种方式的好处：自定义属性、相对网址

HTML代码:
<body>
<input type="text" id="text1" value="1111" _name_="自定义的属性" />
<img src="bdlogo.gif" id="img1" style="width:100px;" />
</body>
JS代码:
var oText = document.getElementById('text1');

/*
.
[]
*/
//oText.value = '222';
//alert( oText.value );

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

//var name = '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') );
//alert( oImg.style.width );

17.元素的创建
document.createElement(标签名称); 创建元素
var oLi = document.createElement('li');
oLi.width = 200 +'px';

18.添加元素
父级.appendChild(要添加的元素) 方法追加子元素
oUl.appendChild( oLi );
父级.insertBefore(新的元素，被插入的元素) 方法在指定元素前面插入一个新元素
oUl.insertBefore( oLi, oUl.children[0] );
注意：在ie下如果第二个参数的节点不存在，会报错，在其他标准浏览器下如果第二个参数的节点不存在，则会以appendChild的形式进行添加
if ( oUl.children[0] ) {
oUl.insertBefore( oLi, oUl.children[0] );
} else {
oUl.appendChild( oLi );
}

18.删除元素
父级.removeChild(要删除的元素); 删除元素
oUl.removeChild( this.parentNode );

18.父级.replaceChild(新节点，被替换节点) 替换子节点
document.body.replaceChild( oDiv, oP );

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

下一节，陈明老师跟大家一起聊聊DOM、BOM相关方法及属性，谢谢大家。