firstElementChild&&firstChild

最新推荐文章于 2022-12-13 17:48:32 发布
最新推荐文章于 2022-12-13 17:48:32 发布
阅读量130 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/zzgyq/p/6529298.html
版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
</div>
<script type="text/javascript">
var oBox = document.getElementById("box");
//alert(oBox.firstChild.nodeType);
//alert(oBox.firstElementChild.nodeType);

// if(oBox.firstElementChild){
// oBox.firstElementChild.style.background = 'red';
// }else{
// oBox.firstChild.style.background = 'red';
// }

var FC = oBox.firstElementChild ||oBox.firstChild;
FC.style.background = 'red';
oBox.children[0].style.background = 'red';

oBox.lastChild.style.background = 'red';
oBox.lastElementChild.style.background = 'red';
oBox.children[oBox.children.length-1].style.background = 'red'
</script>
</body>
</html>

转载于:https://www.cnblogs.com/zzgyq/p/6529298.html

weixin_30919429
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
firstElementChild
weixin_30856725的博客
08-06 293
firstElementChild用于在高版本的浏览器中获取第一个子节点。在IE6-8中是不兼容的，他们应该用firstChild。在写的时候用一个if语句判断一下就好了。 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title&g...
巧用 firstElementChild
liuzijiang1123的专栏
04-24 2424
firstElementChild：是用于返回DOM对象的第一个子元素。 举个小例子了解一下： &lt;div&gt; &lt;p&gt;123&lt;/p&gt; &lt;p&gt;456&lt;/p&gt; &lt;/div&gt; var oDiv=document.getElementsByTagName("div")[0]; cons
firstChild和firstElementChild
fuxiaomi2016的博客
12-20 987
第一个子节点
firstElementChild 根据id定位下级元素
PT1993的博客
05-24 402
//获取id空间var s2id_housetype =t_parent.document.getElementById("s2id_housetype");//获取子级var housetypetext=s2id_housetype.firstElementChild.firstElementChild;//赋值 housetypetext.innerHTML="一室一卫";...
firstElementChild与firstChild区别
热门推荐
12-19 1万+
Element Traversal规范中的firstElementChild、lastElementChild、previousElementSibling、nextElementSibling、childElementCount属性 Element Traversal规范定义了ElementTraversal接口，它允许脚本遍历DOM树中的元素（element）节点，而不包含元素节点之外的
js Element Traversal规范中的元素遍历方法.docx
01-19
这与`firstChild`不同，因为`firstChild`可能返回的是一个文本节点或者注释，而不是元素节点。 3. **lastElementChild**： 类似地，`lastElementChild`属性指向元素的最后一个子元素。这在遍历元素子集时非常有用...
关于firefox的ElementTraversal 接口 使用说明
09-05
这不同于`firstChild`属性，因为`firstChild`可能返回任何类型的节点（元素、文本、注释等），而`firstElementChild`只关注元素节点。 2. `lastElementChild`: 类似于`firstElementChild`，但返回的是最后一个子...
浅析JavaScript中浏览器的兼容问题
11-23
var el = parent.firstChild; while (el && el.nodeType !== 1) { el = el.nextSibling; } return el; } } // 返回最后一个元素 function getLastElement(parent) { if (parent.lastElementChild) { return...
浅析JavaScript中扫瞄器的兼容问题_.docx
10-10
var el = parent.firstChild; while (el && el.nodeType !== 1) { el = el.nextSibling; } return el; } } function getLastElement(parent) { if (parent.lastElementChild) { return parent....
JavaScript遍历DOM元素的常见方式示例.docx
01-19
- 为了解决`firstChild`和`lastChild`的问题，DOM3引入了`firstElementChild`和`lastElementChild`，这两个属性只返回元素节点，跳过文本节点和其他非元素节点。这样可以确保在所有浏览器中的行为一致。 3. **`...
firstChild、lastChild 和 firstElementChild、lastElementChild 的区别
webchang的博客
02-19 2373
firstChild、lastChild 和 firstElementChild、lastElementChild 的区别
firstChild和firstElementChild的区别
learner_boy的博客
05-15 3716
firstChild可以获取文本元素而firstElemenChild不能 . 它们的共同点都是获取父节点下第一个节点对象。 .但是firstElementChild只会获取元素节点对象，从名称就可以看出来，firstChild则可以获取文本节点对象（当然也可以获取元素节点对象），比如空格和换行都被当做文本节点。
firstChild与firstElementChild
weixin_34124651的博客
03-09 1101
相同点： 都是获取父元素下的第一个节点对象 不同点： firstChild: IE6、7、8 第一个元素节点; 非IE6、7、8：返回第一个元素节点或文本节点 firstElementChild： IE6、7、8不支持；非IE6、7、8，获取第一个元素节点 <script type="text/javascript"> /** * @descrip...
javascript中childNodes与children 区别 以及firstChild与firstElementChild区别
cherrybomb1111的博客
06-11 3910
1：childNodes属性: 标准的，它返回指定元素的子元素集合，包括html节点，所有属性，文本。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。如果代码中有换行、空格就会增加文本节点，这样用它来返回真正的子节点就会不准确，具体见下面的例子。如果一定要用这个方法（毕竟他是W3C标准），就要增加一个判断子节点类型过程：
http兼容性问题 firstElementChild firstchild 以及 简单封装
04-28 221
首尾子节点firstchild ie6-8firstElementChild 兼容问题 if做兼容判断lastChild、lastElementChild 类似兄弟节点有兼容性问题nextSibling、nextElementSiblingpreviousSibling、previousElementsibling <!doctype html> <htm...
table 的 id 属性不被 document.getElementById支持
闷骚的男
03-09 1348
<br />table 的 id 属性不被 document.getElementById支持
js和jQuery知识点
m0_45252287的博客
12-13 145
JS和JQuery基础
JS-firstChild,firstElementChild,lastChild,firstElementChild,nextSibling,nextElementSibling
a2273490的博客
11-12 409
<body> <ul id="ul1"> <li>11111</li> <li>22222</li> <li>33333</li> <li>44444</li> </ul&g...
js下firstElementChild firstChild 以及childNodes和children方法
weixin_30482383的博客
10-12 353
一、 <div> <p>123</p> </div> 在上面这段代码中，如果使用以下js代码 var oDiv=document.getElementByTagName("div")[0]; alert(oDiv.firstChild.nodeName) 在ie9以下，alert出来的是p（p标签名字）...
js firstchild
最新发布
05-31
JavaScript中的`firstChild`属性返回指定节点的第一个子节点，如果指定节点没有子节点，则返回`null`。需要注意的是，`firstChild`属性返回的子节点可能是一个元素节点、文本节点或注释节点。如果要获取第一个元素节点，可以使用`firstElementChild`属性。以下是一个例子： ```html <div id="myDiv"> <p>Hello World!</p> <p>How are you?</p> </div> ``` ```javascript const myDiv = document.getElementById("myDiv"); const firstChild = myDiv.firstChild; // 返回第一个子节点，即文本节点 const firstElementChild = myDiv.firstElementChild; // 返回第一个元素节点，即第一个<p>元素 ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值