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

firstChild与lastChild 兼容Ie6,7,8 返回指定节点的首个子节点与返回指定节点的最后一个子节点

firstElementChild与lastElementChild 不兼容低版本的浏览器

兼容的写法：

        var first=e.firstElementChild||e.firstChild;
        var last=e.lastElementChild||e.lastChild;

时间： 2024-10-18 02:43:11

firstChild,firstElementChild,lastChild,lastElementChild 的用法与兼容的相关文章

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

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

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

css3 media媒体查询器用法总结兼容ie8以下的方法

总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. http://www.360doc.com/content/14/0704/06/10734150_391862769.shtml 准备工作1:设置Meta标签首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: 这段代码的几个参数解释: width = device-width:宽度等于当前设备的宽度 initial-scale:初始的缩放比例(默认设置为1.0) minimum-scale:允许

选择器的使用(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; }//对第二个子元素设定背

dom 笔记

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dom</title> <script> /** * 子节点 childNode (有兼容问题) * ie6-8 没问题 * nodeType==3 文本节点 * nodeType==1 元素节点 * children 都兼容 * 父节点 par

2015.7.12js-11(DOM基础)

1.childNodes,获取子节点,本身就是一个数组,可以通过下标childNodes[i]来获取某个子节点. alert(obj.childNodes.length); //高级浏览器会有空白节点的存在 //循环根据节点的nodeType类型来判断是不是元素节点 for(var i = 0, len = aElement.childNodes.length; i < len; i++){ if(aElement.childNodes[i].nodeType == 1){ aElement.c

javascript中DOM部分基础知识总结

1.DOM介绍 1.1 DOM概念文档对象模型(Document Object Model),它定义了访问和处理HTML文档的标准方法.现在我们主要接触到的是HTML DOM. HTML文档中的每个成分都是一个节点.HTML文档中的所有节点组成了一个文档树(节点树).HTML文档中的每个元素.属性.文本等都代表着树中的一个节点.树起始于文档节点,并由此继续延伸枝条,直到处于这棵树最低级别的所有文本节点为止.学习DOM,就是学习一些操作页面元素的API(方法).下图表示一个文档树. 1.2 DO