<!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. devexpress表格控件gridcontrol实现纵向标头

    1.devexpress控件gridcontrol中的标头默认是横向的,如果要实现纵向标头应该怎么做呢.通过官网的资料整理了一个简单的案例,给大家分享一下.运行效果图如下: 2.数据绑定代码如下: D ...

  2. BZOJ 3410: [Usaco2009 Dec]Selfish Grazing 自私的食草者（贪心）

    这= =，就是线段覆盖对了= =直接贪心就行了= = CODE： #include<cstdio>#include<iostream>#include<cstring&g ...

  3. show_you_my_codes 001

    program 001 第 0001 题:做为 Apple Store App 独立开发者,你要搞限时促销,为你的应用生成激活码(或者优惠券), 使用 Python 如何生成 200 个激活码(或者优 ...

  4. Ubuntu Hash Sum mismatch 解决方法

    有时候通过校园网对Ubuntu14.04进行更新时,会出现以下问题: W: Failed to fetch http://xxxxxxx Hash Sum mismatch 解决方法:打开搜索 →  ...

  5. Java 集合的简单实现 (ArrayList & LinkedList & Queue & Stack)

    ArrayList 就是数组实现的啦,没什么好说的,如果数组不够了就扩容到原来的1.5倍 实现了迭代器 package com.wenr.collection; import java.io.Seri ...

  6. The Art of Prolog:Advanced Programming Techniques【译文】

    申明:此文为译文,仅供学习交流试用,请勿用作商业用途,造成一切后果本人概不负责,转载请说明.本人英语功力尚浅,翻译大多借助于翻译工具,如有失误,欢迎指正. 逻辑程序简介 逻辑程序是一组公理或规则,定义 ...

  7. 专题：DUILIB Win32 透明效果

    Win32 透明效果相关基础知识 Layered Windows 分层窗口.这是Windows2000开始引入的概念,重新定义了窗口的Hit Testing方法,以前都是把窗口按rectangle的方 ...

  8. Pascal's Triangle II leetcode

    Given an index k, return the kth row of the Pascal's triangle. For example, given k = 3,Return [1,3, ...

  9. 3097: Hash Killer I

    3097: Hash Killer I Time Limit: 5 Sec  Memory Limit: 128 MBSec  Special JudgeSubmit: 425  Solved: 15 ...

  10. 你的外接键盘的小键盘在Num Lock键亮着的，但是数字按了不能用，解决办法在这里

    1.可能是Num Lock键卡住了导致的,你多按几次numlock键试试. 如果上面的不行,你就再试试下面的这个: 2.系统下开启了启用鼠标键导致的,解决的方法如下: (1).打开"控制面板 ...