<!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. BZOJ 1050: [HAOI2006]旅行comf (并查集 或 单调队列)

    这是建空间后做的第一道题啊= =好水 排序，枚举最小边，然后并查集求出联通时的最大边 或者排次序，从小到大插边，如果插边时最小的边拿掉不会使s与t不联通，就删去。 code： #include< ...

  2. [译]如何在Web开发中使用Python

    [译]如何在Web开发中使用Python 原文:HOWTO Use Python in the Web 摘要 这篇文档展示了Python如何融入到web中.它介绍了几种Python结合web服务器的方 ...

  3. Abp zero 3.0.1发布

    v3.1.0 (2017-02-14) Angular 2.x UI Angular 2 AOT (Ahead Of Time) Compilation, and HMR (Hot Module Re ...

  4. 快速排序OC、Swift版源码

    前言: 你要问我学学算法在工作当中有什么用,说实话,当达不到那个地步的时候,可能我们不能直接的感觉到它的用处!你就抱着这样一个心态,当一些APP中涉及到算法的时候我不想给其他人画界面!公司的项目也是暂 ...

  5. SpringBoot + SwaggerUI

    后台写接口,由于要提供接口文档给前台使用,所有研究了一下swagger,看到网上有篇文章写得不错,就直接拿过来了. swagger用于定义API文档. 好处: 前后端分离开发 API文档非常明确 测试 ...

  6. Swift 包管理器命令行使用

    1.swift -version //swift 版本查看 2.swift build //swift工程编译 3.swift package generate-xcodeproj //创建Xcode ...

  7. 2017-3-10 SQL server 数据库 T--SQL语句

    创建数据库:create datebase  数据库名     注:数据库名不能为中文,不能数字开头,不能符号开头. 删除数据库:drop datebase 数据库名 创建表:create   tab ...

  8. Rabbitmq集群高可用部署详细

    序言 清风万里的季节,周末本该和亲人朋友一起消遣这烂漫的花花草草,或是懒洋洋的晒个太阳听听风声鸟鸣.无奈工作使然,理想使然,我回到啦公司,敲起啦键盘,撸起啦代码,程序狗的世界一片黯然,一片黯然,愿天下 ...

  9. TP框架数据库操作（增删改）

    首先选择一张表,对其进行操作: 对数据库操作之前首先要创建模型: $n = M("account"); 数据库添加数据: 1.使用数组: 1.使用数组 $arr = array(& ...

  10. 消消乐、candy crush类三消游戏程序逻辑分析

    最近在开发一款类似消消乐的三消游戏,在碰到实现斜方向下落的时候卡住了很长时间.好几天没有思路,原本的思路是一次性预判多个宝石的一连串运动路径,运用缓动运动队列来实现宝石运动路径,例如 下落->滑 ...