您的位置：首页 > 其它

关于几个和firstChild相似内容的整理

2017-06-04 00:00 162 查看

引子

今天，有个刚入前端的小伙伴让我看了一段代码，如下：

<body>
<ul id="ul">
<li id="li1">hello</li>
<li id="li2">world</li>
<li id="li3">!</li>
</ul>
<script>
var ul = document.getElementById("ul");
var li1 = ul.firstChild;
console.log(li1);
</script>
</body>

他的意思，是想得到第一个li元素，然后去做一系列的操作，接着他就开心地去运行谷歌浏览器。。。结果，想必大家都知道。在谷歌浏览器中他这样的写法是根本获取不到第一个li元素的，因为
firstChild
获取到的是第一个节点，而不是第一个元素节点！然而，作为一个有追求（捂脸）的前端工程师，我们怎么能不去跑一下我们亲爱的 IE浏览器呢，结果奇迹出现了，IE8及其以下，竟然成功了。。。
当然，我们的主旨并不是只集中在firstChild的兼容性问题上，实际上，在看到
firstChild
这个单词的时候，我感觉自己脑子里突然冒出来好多东西：

DOM 中的
firstChild
属性

DOM 中的
firstElementChild
属性

CSS3 中的 
：first-child
伪类选择器

CSS3 中的 
：first-of-type
伪类选择器

jQuery 中的
first-child
选择器

说实话，时间过了这么长，这些最基础的东西，真是有些记不太清了，所以，这里打算稍微整理一下，把知识梳理一下。

1. fitstChild

想必，绝大多数人，第一个认识的基本都是这个吧。作为DOM对象的属性，它返回的是指定节点的第一个子节点，但正如一开始看到的引子一样，这个属性，在谷歌浏览器中返回的可以是文本节点、注释节点、元素节点等等，但是在IE8及其以下中，得到的结果又有些不一样，在第一个子节点是一个换行空文本节点的话，浏览器是会忽略这个换行的。所以我们一般不会使用这个属性来对DOM进行一些操作。我们使用最多的是下面的这个
firstElementChild
。

2. firstElementChild

这个DOM对象属性，是我们非常喜欢用的。因为这个属性，正符合我们的的意思，我们可以用它来获取到某个指定DOM节点下的第一个元素节点。但是，很可惜的，这个属性也是有兼容性的。兼容性如下：

浏览器开始支持此属性的版本
Chrome1.0
Firefox (Gecko)1.9.1
IE9.0
Opera10.0
Safari4.0
所以，在我们用原生js做一些项目时，如果需要使用到这个属性，那我们首先要进行兼容性的处理了，代码如下：

function getFirstElement(element) {
if (element.firstElementChild) return element.firstElementChild;
var el = element.firstChild;
while (el && 1!= el.nodeType) el = el.nextSibling;
return el;
}


3. CSS3中的：first-child伪类选择器

：first-child
是
CSS3
中提供的伪类选择器，通过它我们可以选择到属于其父元素的首个子元素。实例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:first-child {
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="dv1">
<p>hello</p>
<p>world</p>
<p>!</p>
</div>
<div id="dv2">
<p>javascript</p>
<p>is</p>
<p>good</p>
</div>
<div id="dv3">
<h5>这是标题</h5>
<p>php</p>
<p>is</p>
<p>good</p>
</div>
</body>
</html>

在这段示例代码中，我们能够将
id
为
"dv1"
和
"dv2"
下面的第一个
p
元素设置上样式，但是对于，
"dv3"
中的第一个
p
元素，我们是设置不上的，这是因为，
: first-child
这个伪类选择器要求其父元素下面的第一个元素必须是指定的标签，如果是其他的话，是选择不到的，针对这种情况，我们经常使用下面的这个伪类选择器
：first-of-type


4. CSS3中的：first-of-type伪类选择器

同样是上面的那段代码，如果我们使用
：first-of-type
这个选择器的话，我们是能够选择到每个父元素下的第一个
p
元素的！

5. jQuery 中的 ：first-child 选择器

jQuery中的
：first-child
选择器选择到的元素和CSS3中的
：first-child
伪类选择器一样，比如说，同样是上面的代码，我们应用jQuery的选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="dv1">
<p>hello</p>
<p>world</p>
<p>!</p>
</div>
<div id="dv2">
<p>javascript</p>
<p>is</p>
<p>good</p>
</div>
<div id="dv3">
<h5>这是标题</h5>
<p>php</p>
<p>is</p>
<p>good</p>
</div>
<script src="jquery.js"></script>
<script>
$("p:first-child").css({
height: "100px",
backgroundColor: "red"
})
</script>
</body>
</html>

最后有样式的标签依然是
id
为
dv1
和
dv2
下面的第一个p标签，
dv3
中的第一个
p
标签并没有样式。

总结

这5个相近的内容，
fitstChild
和 
firstElementChild
是DOM对象的属性，
CSS3中的：first-child
和
CSS3中的：first-of-type
以及
jQuery 中的 ：first-child
这三个都是选择器，它们之间有相同效果的，有不同效果的，感觉实在是有些容易混淆，但好在规则并不是很随意。多加回顾，还是能够分清的。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  firstChild
相关文章推荐
新的分享
章节导航