firstChild和firstElementChild

最新推荐文章于 2022-12-13 17:48:32 发布
最新推荐文章于 2022-12-13 17:48:32 发布
阅读量987 收藏
点赞数
分类专栏： JS 文章标签： firstChild和firstElem
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fuxiaomi2016/article/details/53763230
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.οnlοad=function(){
var oUl1=document.getElementById('ul1');

//   alert(oUl.firstChild);

//    lastChild和lastElementChild    //  最后一个子节点

//    nextSibling和nextElementSibling   //  下一个兄弟节点

//    previousSibling和previousElementSibling   //  上一个兄弟节点

if(oUl1.firstElementChild){
oUl1.firstElementChild.style.background='red';  //  高版本浏览器用
}else{
oUl1.firstChild.style.background='yellowgreen';  //  IE6-8
}
}
</script>

</head>
<body>
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>

</ul>

<ul>
<li>aaa</li>
<li>222</li>
</ul>
 <ul>
<li>bbb</li>
<li>222</li>

</ul>
<ul>
<li>ccc</li>
<li>222</li>
</ul>

</body>
</html>
fuxiaomi2016
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
05-DOM基础.pptx
07-06
5. firstChild和firstElementChild：分别返回第一个子节点和第一个元素子节点。 6. lastChild和lastElementChild：返回最后一个子节点和最后一个元素子节点。 7. nextSibling和nextElementSibling：返回当前节点的下...
firstChild和firstElementChild的区别
learner_boy的博客
05-15 3712
firstChild可以获取文本元素而firstElemenChild不能 . 它们的共同点都是获取父节点下第一个节点对象。 .但是firstElementChild只会获取元素节点对象，从名称就可以看出来，firstChild则可以获取文本节点对象（当然也可以获取元素节点对象），比如空格和换行都被当做文本节点。
巧用 firstElementChild
liuzijiang1123的专栏
04-24 2422
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、lastChild 和 firstElementChild、lastElementChild 的区别
webchang的博客
02-19 2373
firstChild、lastChild 和 firstElementChild、lastElementChild 的区别
js和jQuery知识点
m0_45252287的博客
12-13 145
JS和JQuery基础
firstElementChild与firstChild区别
热门推荐
12-19 1万+
Element Traversal规范中的firstElementChild、lastElementChild、previousElementSibling、nextElementSibling、childElementCount属性 Element Traversal规范定义了ElementTraversal接口，它允许脚本遍历DOM树中的元素（element）节点，而不包含元素节点之外的
Js中节点的遍历和操作
11-22
- 创建新元素：`oH1`和`oP`是通过`document.createElement`创建的`<h1>`和`<p>`元素，并用`innerHTML`属性设置其内容，然后使用`appendChild`添加到`<body>`中。 - 删除元素：通过`remove()`方法，当点击按钮时，...
JS前端知识点总结之页面加载事件，数组操作，DOM节点操作，循环和分支
10-16
- 孩子节点：使用 `firstChild`, `lastChild`（IE特有）或 `firstElementChild`, `lastElementChild`（标准兼容）来获取。 4. **循环和分支结构**： - 循环结构包括 `for` 循环，`while` 循环，`do...while` 循环...
谈谈JS中常遇到的浏览器兼容问题和解决方法
10-20
类似地，获取第一个子元素节点，可以使用`firstElementChild`（非IE678支持）和`firstChild`（IE678支持）。为了解决这些问题，我们可以编写兼容性函数，如下所示： ```javascript function nextnode(obj) { ...
JS DOM 编程复习笔记--父元素、子元素和兄弟元素（三）
小帅的编程笔记
10-19 1669
今天我们来复习DOM中的获取父元素、子元素和兄弟元素的API，它们主要有parentNode、firstChild、firstElementChild、lastChild、lastElementChild、childNodes、children、nextElementSibling、nextSibling、previousElementSibling、previousSibling等。 目录 获取父元素 - parentNode 获取子元素 -firstChild、firstElementChild
C#知识学习-XML文档的读写
qq_41958491的博客
11-17 126
XML文档的读写 XmlDocumentxml文档 常用方法 Load(文件名) 读取xml文件 XmlNodeList 节点列表 常用属性 Count 获取列表中的节点数 常用方法 Item(index) 获取索引处的节点 如果index大于等于节点数，将返回null XmlNode节点 常用属性 Name 获取节点名称 InnerText 获取当前节点和改节点下所有子节点的文本 FirstChild 获取该节点的第一个子节点 ChildNodes 获取该节点的所有子节点...
使用阿里妈妈字体图标库，ie10报错，无法获取未定义或 null 引用的属性“firstChild”
大眼睛的猫头鹰
05-07 5077
   前因：公司优化页面，要把彩色图片，换成字体图标。   结果：更换完后，测试发现ie10，ie9都会报错，但demo测试是没有问题的。   测试：console.log(target)为null，找到document.body是null。   解决：把引用的js移到body标签代码结束之后。   解决方法来源：点击打开链接   ...
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...
js中firstChild与firstElementChild及childNodes与children的区别
qq_44731369的博客
02-17 2336
firstChild： 获取指定元素的第一个子节点 (包括元素节点和文本节点) 。 若父元素与第一个子元素之间存在空白节点，firstChild 获取到的将是空白节点而不是第一个子元素。这时可以使用 firstElementChild 属性 (IE6/7/8 中不支持)。 例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <met
Vue 点击获得父元素，子元素，兄弟元素（DOM操作）
qq_42709302的博客
11-03 4198
<ul @click ="clickfun($event)"> <li></li> </ul> methods: { clickfun(e) { e.target //是你当前点击的元素 e.currentTarget //是你绑定事件的元素 //获得点击元素的前一个元素 e.currentTarget.previousElementSibling.innerHTML //获得点击元素的第一个子元素
关于ie浏览器兼容 报错无法获取未定义或null 引用的属性call
asd2437252087的博客
02-14 1万+
出错的原因：ie不支持新的 1.JavaScript语法新特性 2.新的cs特性 3. 新的JavaScript APi 或者 DOM API 这个时候我们就可以使用一个javascript编译器 首先先引入 方法一： 在main.js import 'babel-polyfill';//这样在入口文件中引入将增大文件大小 方法二：在.babelrc文件添加 { "presets": [ "es2015", "react" ], "plugins": [ ...
js下firstElementChild firstChild 以及childNodes和children方法
weixin_30482383的博客
10-12 352
一、 <div> <p>123</p> </div> 在上面这段代码中，如果使用以下js代码 var oDiv=document.getElementByTagName("div")[0]; alert(oDiv.firstChild.nodeName) 在ie9以下，alert出来的是p（p标签名字）...
javascript中childNodes与children 区别 以及firstChild与firstElementChild区别
cherrybomb1111的博客
06-11 3908
1：childNodes属性: 标准的，它返回指定元素的子元素集合，包括html节点，所有属性，文本。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。如果代码中有换行、空格就会增加文本节点，这样用它来返回真正的子节点就会不准确，具体见下面的例子。如果一定要用这个方法（毕竟他是W3C标准），就要增加一个判断子节点类型过程：
js firstchild
最新发布
05-31
JavaScript中的`firstChild`属性返回指定节点的第一个子节点，如果指定节点没有子节点，则返回`null`。需要注意的是，`firstChild`属性返回的子节点可能是一个元素节点、文本节点或注释节点。如果要获取第一个元素...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值