<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
</div>
<script type="text/javascript">
var oBox = document.getElementById("box");
//alert(oBox.firstChild.nodeType);
//alert(oBox.firstElementChild.nodeType);

// if(oBox.firstElementChild){
// oBox.firstElementChild.style.background = 'red';
// }else{
// oBox.firstChild.style.background = 'red';
// }

var FC = oBox.firstElementChild ||oBox.firstChild;
FC.style.background = 'red';
oBox.children[0].style.background = 'red';

oBox.lastChild.style.background = 'red';
oBox.lastElementChild.style.background = 'red';
oBox.children[oBox.children.length-1].style.background = 'red'
</script>
</body>
</html>

firstElementChild&&firstChild的更多相关文章

  1. js下firstElementChild firstChild 以及childNodes和children方法

    一. <div> <p>123</p> </div> 在上面这段代码中,如果使用以下js代码 var oDiv=document.getElementB ...

  2. DOM编程的性能问题

    用脚本进行DOM操作的代价很昂贵,它是富Web应用中最常见的性能瓶颈. 浏览器中的DOM:天生就慢 DOM(文档对象模型)是独立于语言的,但在浏览器中的接口是用JavaScript实现的.两个相互独立 ...

  3. 高性能javascript学习笔记系列(3) -DOM编程

    参考 高性能javascript 文档对象模型(DOM)是独立于语言的,用于操作XML和HTML文档的程序接口API,在浏览器中主要通过DOM提供的API与HTML进行交互,浏览器通常会把DOM和ja ...

  4. DOM: 如何获取元素下的第一个子元素

    Element.firstChild ?,是的,这是第一种方法,当然,通常来说支持 W3C 规范的浏览器,如 Firefox 等取到的应该是 TEXT_NODE.很早之前,或者说现在最流行的方法可能是 ...

  5. javascript各种兼容性问题，不断更新

    ie6-ie8 不支持textContent支持innerTextchrome  支持textContent  innerTextfireFox    仅支持textContent不支持innerTe ...

  6. [妙味DOM]第一课：DOM基础概念、操作

    知识点总结 childNodes.children子节点列表集合.nodeType节点类型.nodeName.nodeValue.attributes属性列表集合 childNodes和childre ...

  7. Dom2016/4/20

    childNode:标准情况下:包括文本节点和元素节点 非标准下:只包括元素节点 在标准情况下:包含非法嵌套的子节点. 非标准下:ie7一下的版本不包含非法嵌套的子节点 DOm的节点类型:12种 元素 ...

  8. JavaScript高级程序设计-10.11: DOM及其扩展

    什么是DOM? DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口).DOM描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分. 文档节点(do ...

  9. 性能优化之数据存储&DOM编程

    多读书多看报 数据存储 ·在javascript中,数据存储的位置会对代码整体性能产生重大的影响. ·数据存储共有4种方式:字面量.变量.数组.对象成员.   ·要理解变量的访问速度,就要理解作用域. ...

随机推荐

  1. 浅谈iOS程序员的成长和进阶

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  2. 令人费解的java泛型

         对于我们java中的泛型,可能很多人知道怎么使用并且使用的还不错,但是我认为想要恰到好处的使用泛型,还是需要深入的了解一下它的各种概念和内部原理.本文将尽可能的囊括java泛型中的重要的概念 ...

  3. 一个基于注解的orm简单实现(二)：实现思路

    先来看一段常见的数据库操作代码: ``` protected User getDataFromDatabase(long id){ String sql = "select firstnam ...

  4. fiddler介绍

    先看fiddler 的使用界面和各模块的功能介绍 1请求列表:请求列表中包含了许多信息,从左至右依次为,#(序列号),Result(结果状态码),Prottocol(请求的协议),Host(请求的主机 ...

  5. Delphi中TApplication详解

    转自:http://blog.sina.com.cn/s/blog_4d6f55d90100bmv9.html TApplication是用于Delphi应用程序的类型,该类在单元forms中声明.T ...

  6. DTD验证XML文档

    DTD验证XML文档        1.DTD简介:DTD是Document Type Definition的缩写,即文档定义            1.1:DTD的内容包含:             ...

  7. C#:求1到100的和

    using System;public class Program    {        public static void Main()            {                ...

  8. 1682: [Usaco2005 Mar]Out of Hay 干草危机

    1682: [Usaco2005 Mar]Out of Hay 干草危机 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 391  Solved: 258[ ...

  9. AVFoundation自定义拍照

    0.AVCapture  <AVFoundation/AVFoundation.h> 媒体采集需要的几个对象: 1.AVCaptureDevice: 代表抽象的硬件设备(如前置摄像头,后置 ...

  10. netflix zuul-simple-webapp.war在tomcat下启动

    按照netflix 在github 的wiki的文档使用 gradlew jettyRun 可以启动jetty来进行测试. 在本地build war 以后,我放在tomcat 运行的时候,却不可以运行 ...