Element对象
描述
- Element对象提供了访问html页面元素的属性和方法
节点和元素的区别
- 在节点中：元素节点、属性节点、文本节点都是独立存在的
- 在元素中：属性和文本与元素是一体的，相当于元素的一部分
获取子元素
- 通过定位父元素来获取子元素
- 与获取节点不同，获取元素不存在“空白问题”
firstElementChild
lastElementChild
childElementCount
children
示例代码
<body>
<div id="d1">
<p>手机</p>
<p>手表</p>
<p>电脑</p>
</div>
<script>
/*
获取子元素：通过定位父元素来获取子元素
firstElementChild：表示获取第一子元素
lastElementChild：表示获取最后一个子元素
childElementCount：表示获取所有子元素的个数
children：表示获取所有子元素 - 会得到一个类数组
与获取节点不同，获取元素不存在“空白问题”
*/
/* 定位父元素的位置 */
var d = document.getElementById( 'd1' );
console.log( d );
/* 获取第一个子元素 */
var dp1 = d.firstElementChild;
console.log( dp1 );
/* 获取最后一个子元素 */
var dp2 = d.lastElementChild;
console.log( dp2 );
/* 获取所有子元素 - 得到一个类数组 */
var dp3 = d.children;
console.log( dp3 );
/* 显示类数组长度 */
console.log( dp3.length );
/* 获取所有子元素的个数 */
var dp4 = d.childElementCount;
console.log( dp4 );
</script>
</body>
获取兄弟元素
- 通过定位指定子元素的位置来获取相邻兄弟元素
- 与获取节点不同，获取元素不存在“空白问题”
previousElementSibling
nextElementSibling
示例代码
<body>
<div id="d1">
<p>手机</p>
<p id="p2">手表</p>
<p>电脑</p>
</div>
<script>
/*
获取兄弟元素
通过定位指定子元素的位置来获取相邻兄弟元素
previousElementSibling：表示获取前一个兄弟元素
nextElementSibling：表示获取后一个兄弟元素
与获取节点不同，获取元素不存在“空白问题”
*/
/* 定位指定子元素的位置 */
var p = document.getElementById( 'p2' );
console.log( p );
/* 获取前一个兄弟元素 */
var p1 = p.previousElementSibling;
console.log( p1 );
/* 获取后一个兄弟元素 */
var p3 = p.nextElementSibling;
console.log( p3 );
/* 也可以通过获取父元素的所有子元素，在做判断选择获得相邻兄弟元素 */
/* 定位父元素的位置 */
var d = document.getElementById( 'd1' );
console.log( d );
/* 获取父元素的所有子元素 - 得到一个类数组 */
var dp = d.children;
console.log( dp );
/* 定义一个为赋值的变量 */
var dd;
/* 对得到类数组进行遍历 */
for ( var ddp = 0; ddp < dp.length; ddp++ ) {
/* 得到所有类数组中的所有数据内容 */
var ddpp = dp[ddp];
console.log( ddpp );
/* 进行条件选择判断 - 得到指定目标子元素的位置 */
if ( ddpp === p2 ) {
/* 将符合条件的数据赋值给之前定义的变量 */
dd = ddp;
}
}
/*
在通过计算表达式来得到目标子元素的相邻兄弟元素
“ ‘-1’表示前一个兄弟元素”“ ‘+1’表示后一个兄弟元素”
*/
var dpp = dp[dd-1];
console.log( dpp );
</script>
</body>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。