JS-firstChild,firstElementChild,lastChild,firstElementChild,nextSibling,nextElementSibling

<body>
	<ul id="ul1">
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
    </ul>
</body>

1,firstChild:第一个子节点。

  标准下:firstChild会包含文本类型的节点

  非标准下(IE7以下):fistChild只包含元素节点

  var oUl = document.getElementById(‘ul1‘);

alert( oUl.firstChild ); //标准下显示[object Text],非标准下是[object HTMLLIElement]
    alert( oUl.firstElementChild )//标准和非标准都是 [object HTMLLIElement]

  注意兼容性:

   var oFirst = oUl.firstElementChild || oUl.firstChild;
       oFirst.style.background = ‘red‘;

2,lastChild:最后一个子节点(同上)

  兼容性:

      var oLast = oUl.lastElementChild || oUl.lastChild;
      oLast.style.background = ‘yellow‘;

3,nextSibling:下一个兄弟节点

      var oNext = oFirst.nextElementSibling || oFirst.nextSibling;
      oNext.style.background = ‘blue‘;4,previousSibling:上一个兄弟节点

  var oPrev = oLast.previousElementSibling || oLast.previousSibling;
      oPrev.style.background = ‘orange‘;

时间: 2024-12-14 12:34:11

JS-firstChild,firstElementChild,lastChild,firstElementChild,nextSibling,nextElementSibling的相关文章

js firstChild 、nextSibling、lastChild、previousSibling、parentNode

nextSibling下一个兄弟节点 previousSibling上一个兄弟 parentNode父亲节点 1 <select><option value="zs">中山</option><option value="gz">广州</option><option value="zh">深圳</option><option value="zh&qu

firstChild,firstElementChild,lastChild,lastElementChild 的用法与兼容

firstChild与lastChild 兼容Ie6,7,8    返回指定节点的首个子节点与返回指定节点的最后一个子节点 firstElementChild与lastElementChild 不兼容低版本的浏览器 兼容的写法: var first=e.firstElementChild||e.firstChild; var last=e.lastElementChild||e.lastChild;

选择器:first-child与:last-child失效的解决方法

作为还在努力练习的代码小白来说,有时类名或者ID名太多很容易就会搞混,为此,在练习中会想着借用多样的选择器来设置而不是每一个标签都设一个类名(Id名),在此次练习中使用选择器:first-child与:last-child就遇到了失效的问题: 使用一个并列显示的不同尺寸的图片为例(如图) 初始代码为: <div class="catalog"> <a href="#"><img src="images/xiaomi-log.p

选择器的使用(first-child和last-child选择器)

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <style type="text/css"

CSS 中first-child和last-child不起作用原因

今天开发的时候,发现last-child不起作用,看了下原因顺便给自己学习CSS选择器,我们这里举个例子,如下代码:<div><h1>title</h1> <p>words</p> <p>words</p> <p>words</p></div>当我们想获取第一个p标签并给它加粗时,如果采用以下写法: div p:first-last{font-weight:blod} 这时候我们会发现不

CSS3中first-child、last-child、nth-child、nth-last-child

1.单独指定第一个子元素.最后一个子元素的样式 <style type="text/css"> li:first-child{ background:yellow; } li:last-child{ background:blue; } </style> 2.对指定序号的子元素使用样式 <style type="text/css"> li:nty-child(2){ background:yellow; }//对第二个子元素设定背

合并_00基础班js(9days)笔记

js基本语法介绍 js语言是写在<script>这个标签之间. js语言是以"语句行"为单位的,每行(每条)语句需要用分号结束: js语言的注释为: 两个斜杠: //这是单行注释内容, /* 这是多行注释内容 */ js语言区分大小写. ? 变量: 变量就是一个内存区块的名字.该区块可以存储我们的"东西"(内容)--数据. 变量几乎是"无穷无尽"--从手写的角度来说,可以定义任意多个变量. 一个变量里面只能存一个数据 ? 变量定义的标

JS 语言核心(JavaScript权威指南第六版)(阅读笔记)

前言: 对于程序员,学习是无止境的,知识淘换非常快,能够快速稳固掌握一门新技术,是一个程序员应该具备的素质.这里将分享本人一点点不成熟的心得. 了解一门语言,了解它的概念非常重要,但是一些优秀的设计思想需要细心和大量实践才能慢慢参悟,在这之前需要做的是能够运用它来开发,那么了解一些基础特性非常有必要,通常这些特性是需要经验积累,从各种坑中累计出来,但是还有一种看似很笨却很有效的学习方法.那就是将别人的经验记录下来,有事没事都拿出来看看,集合开发中的经验,这会非常有效. 调试工具 firebug

前端学习html css js

html 第一章 :HTML模板 HTML是什么(超文本标记语言) HTML网页主体结构 doctype标签 head标签 meat标签 title标签 body标签 第二章:HTML标题 h1标题标签 h2标题标签 h3标题标签 h4标题标签 h5标题标签 h6标题标签 hr水平线标签 第三章:HTML 段落 p段落标签 br换行标签 第四章:HTML 样式 center定义居中内容 font和basefont定义HTML字体 s和strike定义删除线文本 u定义下划线文本 第五章:HTML