fristChild

最新推荐文章于 2016-08-02 16:56:40 发布
最新推荐文章于 2016-08-02 16:56:40 发布
阅读量177 收藏
点赞数
分类专栏： DOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/osweet12345678/article/details/52095595
版权
 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function() {
   
   var oUl = document.getElementById('ul1');
   //alert(oUl.firstElementChild)
   var oFirst = oUl.firstElementChild || oUl.firstChild;
   //alert(oFirst)
   /*if ( oFirst ) {
      oFirst.style.background = 'red';
   } else {
      alert( '没有子节点可以设置' );
   }*/
   
   if ( oUl.children[0] ) {
      oUl.children[0].style.background = 'red';
   } else {
      alert( '没有子节点可以设置' );
   }
   
}
</script>
</head>

<body>
   <ul id="ul1">
    </ul>
</body>
</html>
难瘦不难过
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript中childNodes与children 区别 以及firstChild与firstElementChild区别
cherrybomb1111的博客
06-11 3912
1：childNodes属性: 标准的，它返回指定元素的子元素集合，包括html节点，所有属性，文本。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。如果代码中有换行、空格就会增加文本节点，这样用它来返回真正的子节点就会不准确，具体见下面的例子。如果一定要用这个方法（毕竟他是W3C标准），就要增加一个判断子节点类型过程：
jQuery中:first，:first-child，first()的使用区别
热门推荐
just_coming_here的博客
04-16 2万+
:first   获取第一个元素。 :first-child  选择器选取属于其父元素的第一个子元素的所有元素。 first() 返回被选元素的首个元素。 测试代码如下： Insert title here ul_1 item 1 ul_1 item 2 ul_1 item 3 ul_1 item 4 ul_1 item 5
firstElementChild与firstChild区别
12-19 1万+
Element Traversal规范中的firstElementChild、lastElementChild、previousElementSibling、nextElementSibling、childElementCount属性 Element Traversal规范定义了ElementTraversal接口，它允许脚本遍历DOM树中的元素（element）节点，而不包含元素节点之外的
fristChild,lastChild,NextSiBling,previousSibling
难瘦不难过的专栏
08-02 347
 HTML> http-equiv="Content-Type" content="text/html; charset=utf-8"> 无标题文档 window.onload = function() { var oUl = document.getElementById('ul1'); /* 元素.firstChild : 只读
优酷弹窗
难瘦不难过的专栏
08-02 1384
 无标题文档 body {margin: 0;} #mask {background: black; opacity: 0.3; filter: alpha(opacity=30); position: absolute; left: 0; top: 0; display: none;} #box { width: 300px; height: 200px; pad
onchange
难瘦不难过的专栏
08-02 1159
 无标题文档 window.onload = function() {    var oForm = document.getElementById('form1');  var oBtn = document.getElementById('btn');    //onchange : 当值发生改变的时候触发    //text : 当光标离开元素的时候
getPos
难瘦不难过的专栏
08-02 867
 无标题文档 div {padding: 40px 50px;} #div1 {background: red;position: relative;} #div2 {background: green; position: relative;} #div3 {background: orange; position: relative;} window
DOM addClass MOveClass
难瘦不难过的专栏
08-01 654
 html> lang="en"> charset="UTF-8"> 添加Class window.onload=function(){ var oDiv=document.getElementById('div1'); //addClass(oDiv,'box');
父结点
难瘦不难过的专栏
08-02 417
 HTML> http-equiv="Content-Type" content="text/html; charset=utf-8"> 无标题文档 window.onload = function() { var aA = document.getElementsByTagName('a'); for (var i=0; i; i++)
操作元素属性的多种方式
难瘦不难过的专栏
08-02 363
 无标题文档 window.onload = function() {    var oText = document.getElementById('text1');    /*  .  []  */  //oText.value = '222';  //alert( oText.value );    //oText['value'] = '2
BOM属性
难瘦不难过的专栏
08-02 313
无标题文档 //window.navigator.userAgent : 浏览器信息 //alert( window.navigator.userAgent ) if ( window.navigator.userAgent.indexOf('MSIE') != -1 ) {  alert('我是ie'); } else {  alert('我不是ie');
offset,offsetTop
难瘦不难过的专栏
08-02 311
 无标题文档 div {padding: 40px 50px;} #div1 {background: red;} #div2 {background: green; position: relative;} #div3 {background: orange; position: relative;} window.onload = function(
表单值
难瘦不难过的专栏
08-02 263
 无标题文档 window.onload = function() {    var oForm = document.getElementById('form1');  var oBtn = document.getElementById('btn');    oBtn.onclick = function() {      alert(oForm.se
BOM getElement
难瘦不难过的专栏
08-01 256
 charset="UTF-8"> Title window.onload=function(){ var aUl=document.getElementById('ul1'); var oUl=document.getElementById('ul2'); var aLi=
DOM动态创建元素 有兼容性问题li a
难瘦不难过的专栏
07-31 224
 HTML> http-equiv="Content-Type" content="text/html; charset=utf-8"> 无标题文档 window.onload = function() { var oText = document.getElementById('text1'); var oBtn = document.getEl
DOMchildNOdes
难瘦不难过的专栏
07-29 222
 无标题文档 window.onload = function() {    var oUl = document.getElementById('ul1');    /*   元素.childNodes : 只读 属性 子节点列表集合    标准下：包含了文本和元素类型的节点，也会包含非法嵌套的子节点    非标准下：只包含元素类型的节点，ie7以下不会
表单的值
难瘦不难过的专栏
08-02 210
 无标题文档 window.onload = function() {    var oForm = document.getElementById('form1');  var oBtn = document.getElementById('btn');    oBtn.onclick = function() {      //alert( oForm
relacChild
难瘦不难过的专栏
08-02 210
 无标题文档 window.onload = function() {    var oDiv = document.getElementById('div1');  var oBtn = document.getElementById('btn');  var oP = document.getElementById('p1');    oBtn.oncl
pi_heif-0.17.0-pp310-pypy310_pp73-macosx_12_0_x86_64.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值