firstElementChild&&firstChild
<!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的更多相关文章
- js下firstElementChild firstChild 以及childNodes和children方法
一. <div> <p>123</p> </div> 在上面这段代码中,如果使用以下js代码 var oDiv=document.getElementB ...
- DOM编程的性能问题
用脚本进行DOM操作的代价很昂贵,它是富Web应用中最常见的性能瓶颈. 浏览器中的DOM:天生就慢 DOM(文档对象模型)是独立于语言的,但在浏览器中的接口是用JavaScript实现的.两个相互独立 ...
- 高性能javascript学习笔记系列(3) -DOM编程
参考 高性能javascript 文档对象模型(DOM)是独立于语言的,用于操作XML和HTML文档的程序接口API,在浏览器中主要通过DOM提供的API与HTML进行交互,浏览器通常会把DOM和ja ...
- DOM: 如何获取元素下的第一个子元素
Element.firstChild ?,是的,这是第一种方法,当然,通常来说支持 W3C 规范的浏览器,如 Firefox 等取到的应该是 TEXT_NODE.很早之前,或者说现在最流行的方法可能是 ...
- javascript各种兼容性问题,不断更新
ie6-ie8 不支持textContent支持innerTextchrome 支持textContent innerTextfireFox 仅支持textContent不支持innerTe ...
- [妙味DOM]第一课:DOM基础概念、操作
知识点总结 childNodes.children子节点列表集合.nodeType节点类型.nodeName.nodeValue.attributes属性列表集合 childNodes和childre ...
- Dom2016/4/20
childNode:标准情况下:包括文本节点和元素节点 非标准下:只包括元素节点 在标准情况下:包含非法嵌套的子节点. 非标准下:ie7一下的版本不包含非法嵌套的子节点 DOm的节点类型:12种 元素 ...
- JavaScript高级程序设计-10.11: DOM及其扩展
什么是DOM? DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口).DOM描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分. 文档节点(do ...
- 性能优化之数据存储&DOM编程
多读书多看报 数据存储 ·在javascript中,数据存储的位置会对代码整体性能产生重大的影响. ·数据存储共有4种方式:字面量.变量.数组.对象成员. ·要理解变量的访问速度,就要理解作用域. ...
随机推荐
- Android开发10:传感器器及地图相关应用
前言 啦啦啦~各位小伙伴们好~经过这一学期的Android知识的学习,我们学到了很多和Android开发相关的知识,这一学期的学习也要告一段落了. 一起进入我们今天的相关内容~这次我们将一起学习使用 ...
- Python脚本收集腾讯云CDN日志,并入ELK日志分析
负责搭建公司日志分析,一直想把CDN日志也放入到日志分析,前些日志终于达成所愿,现在贴出具体做法: 1.收集日志 腾讯云CDN日志一般一小时刷新一次,也就是说当前只能下载一小时之前的日志数据,但据本人 ...
- tmux进阶之tmuxinator
tmux进阶之tmuxinator 作者:crane-yuan 日期:2017-03-03 前言 tmuxinator是tmux的配置管理工具,解决了tmux服务器关机后session丢失问题.tmu ...
- iOS 原生的 UIButton 点击事件是不允许带多参数的,唯一的一个参数就是默认UIButton本身 那么我们该怎么实现传递多个参数的点击事件呢?
UIButton *btn = // create the button objc_setAssociatedObject(btn, "firstObject", someObje ...
- Swap Nodes in Pairs leetcode
Given a linked list, swap every two adjacent nodes and return its head. For example,Given 1->2-&g ...
- UI 基本控件使用
一>UITextFiled ———>UITextField是什么 UITextField ( 输入框 ) : 是控制文本输入和显示的控件.在APP中UITextField 出现频率很高 ...
- H5 视频
HTML 5 视频 HTML5 简介 HTML5 视频/DOM 许多时髦的网站都提供视频.HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: Yes! Full suppo ...
- 一段获取app性能指标的py脚本
#coding:utf-8 import os import timeimport datetimeimport subprocess ActivityManager = 'homepage.Main ...
- eclipse下配置安装ssm图文教程(web版)
eclipse下配置安装ssm图文教程(web版) 一.安装所需jar包 1.1 mybatis安装包 可以进入GitHub的https://github.com/mybatis/mybatis-3 ...
- 【js数据结构】栈解决括号不匹配问题
栈可以用来判断一个算术表达式中的括号是否匹配. 思路:读取算术表达式,遇到左括号'{'.'['.'('压入栈,栈的特点是后入先出,所以当遇到右括号'}'.']'.')'的时候,取出栈顶元素,是否满足读 ...