firstElementChild与firstChild区别

2026-09-02

关于firstChild,firstElementChild和children

<div> <p>123</p> </div> 在上面这段代码中,如果使用以下js代码 var oDiv=document.getElementByTagName("div")[0]; alert(oDiv.firstChild.nodeName) 在ie9以下,alert出来的是p(p标签名字),但是在现代浏览器下,比如Chrome,FF,ie11等等,由于会把<div> <p>两个标签之间的空白节点也解析出

jquery选择器 :first与:first-child区别

一个例子: <ul> <li>John</li> <li>Karl</li> <li>Brandon</li></ul><ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li></ul> first表示(所有父元素合并后的)第一个:first-child表示(每个父元

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

兼容firstChild和firstElementChild

1.nextSibling和nextElementSibling 顾名思义,就是找下一个节点 nextSibling在低版本浏览器中可以顺利找到下一个元素节点,而在正常浏览器中找到的包含中间空格. nextElementSibling恰恰相反,低版本不认识,正常浏览器顺利找到下一兄弟节点. 封装nextNode(): function nextNode(obj){ if (!obj.nextSibling) { return false; }; return obj.nextElementSib

JS-特效～ 03. 楼层跳跃、事件对象event的获取与使用、event的主要内容、screenX、pageX、clientX的区别、放大镜、模拟滚动条

楼层跳跃 100%子盒子会继承父盒子的宽高.父盒子继承body宽高.Body继承html的宽高. 盒子属性:auto:适应盒子自身的宽度或者高度.(对自己负责) 盒子属性:100%:适应盒子父盒子的宽度或者高度.(对爸爸负责) <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <st

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

兼容的firstChild,lastChild,nextSibling,previousSibling写法

在IE下是支持firstChild,lastChild,nextSibling,previousSibling 但是在FF下,由于它会把标签之间的空格当成文本节点,所以为了准确地找到相应的元素,会用 firstElementChild, lastElementChild, nextElementSibling, previousElementSibling 兼容的写法是这样的 var oFirst = oParent.firstElementChild||oParent.firstChild

firstChild,lastChild,nextSibling,previousSibling & 兼容性写法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ul id="ul1"> <li>0001</li> <li>0002</li> <

javascript学习笔记全记录

js的初步了解 1.就是用来修改样式的,修改的是行内样式.任何样式都能够修改. 2.css里面怎么写js就怎么写. 3.任何元素都能加事件:事件都要小写 js的三大组成部分: 1.ECMAScript--核心解释器,把js代码转换成计算机可以读懂的语言 2.DOM--Document object model 文档对象模型增删改查文档节点 3.BOM--browser object model 浏览器对象模型完全不

js DOM Element属性和方法整理

节点操作,属性 1. childNodes.children 这两个属性获取到的子节点会根据浏览器的不同而不同的,所以一定要判断下nodeType是否为1. childNodes获取到的是NodeList children获取到的是HTMLCollection NodeList and HTMLCollection 他们都提供了name(Number index)方法用来索引元素,可以直接用[index]来引用: 他们的区别在于NodeList没有提供namedItem(String name)

JS中级 - 01：DOM节点

1元素属性 1.1childNodes 返回元素的一个子节点的数组 (不推荐,建议用非标准children代替) 提醒:只包含一级子节点,不包含后辈孙级别以下节点. children:返回元素的一个子节点的数组(同childNodes区别,只返回Element(元素) 类型节点,不返回 Text 节点) 1.2nodeType 返回节点类型 1.3attributes 返回节点属性 <!DOCTYPE html> <HTML LANG="en"> <H

DOM基础之“寻找”子节点

今天学习了JS中的DOM的内容,虽然小菜的理解不深,但希望能够记录下来,慢慢一点一点的进步,有更深的理解了,再回来补充. 首先,关于DOM的概念: 1.概念:DOM = document(文档)Object(对象)Model(模型) 文档:就是我们所说的html的页面对象:指的是html页面中的元素,也成为标签文档对象模型:则是规定的一系列能够为了让我们用JS更好操作页面元素的标准 2.在DOM下把文档当作树状结构,同时定义了很多方法来操作树中的每一个分支元素(节点) 3.如何寻找子节点要

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

知识点总结 childNodes.children子节点列表集合.nodeType节点类型.nodeName.nodeValue.attributes属性列表集合 childNodes和children都只包含子节点,不包含孙节点. 区别: childNodes-- 标准下:包含元素和文本节点,也会包含非法嵌套的子节点非标准下:只包含元素节点,IE7以下不会包含非法嵌套的子节点(IE6) children-- 标准模式下和非标准模式下:只包含元素节点(推荐使用此方法) nodeType 为节点

JavaScript基础：DOM操作详解

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. BOM:浏览器对象模型,操作浏览器部分功能的API.比如让浏览器自动滚动. 事件 JS是以事件驱动为核心

JavaScript动画：offset家族和匀速动画详解(含轮播图的实现)

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. offset家族简介我们知道,三大家族包括:offset/scroll/client.今天来讲一下offset,以及与其相关的匀速动画. offset的中文是:偏移,补偿,位移. js中有一套方便的获取元素尺寸的办法就是offset家族.offset家族包括: offsetWidth offsetHight offsetLeft offsetTop offsetPa

js ·节点的知识点

1. DOM document object model (1) 节点树状图 Document>documentElement>body>tagname 2. 我们常用的节点类型元素节点(标签) 文本节点(文本节点) 属性节点(标签里的属性) 3. document有个属性叫nodeType 返回的是数字 1代表元素节点 2代表属性节点 3代表文本节点 4. 节点的获取元素节点获取有很多方法 Document.getElementById() Document.getElemen

前端 --- 关于DOM的介绍

111 什么是DOM DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定的一个规范. DOM就是由节点组成的. 解析过程 HTML加载完毕,渲染引擎会在内存中把HTML文档,生成一个DOM树,getElementById是获取内中DOM上的元素节点.然后操作的时候修改的是该元素的属性. DOM树(一切都是节点) DOM的数据结构如下: 上图可知,在HTML当中,一切都是节点:(非常重要) 元素节点:HMTL标签

11-14 dom

1.DOM document object model (1) 节点树状图:Document>documentElement>body>tagname 2.我们常用的节点类型元素节点(标签) 文本节点(文本节点) 属性节点(标签里的属性) 3.document有个属性叫nodeType 返回的是数字: 1代表元素节点 2代表属性节点 3代表文本节点 4.节点的获取元素节点获取有很多方法: Document.getElementById() Document.getElements

js中级小知识5

元素的属性 div.attributes是所有标签属性构成的数据集合 div.classList是所有class名构成的数组集合在classList的原型链上可以看到add()和remove() 1.client系列 clientWidth/clientHeight是我们设置的宽和高架上内边距(没有边框) clientLeft/clientTop就是我们设置的边框值 2.Offset系列 offsetWidth/offsetHeight是我们设置的宽和高加上内边距加上边框 offsetTop/

JavaScript基础三

1.10 关于DOM的事件操作 1.10.1 JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. BOM:浏览器对象模型,操作浏览器部分功能的API.比如让浏览器自动滚动. 1.10.2 事件 JS是以事件驱动为核心的一门语言. 事件的三要素事件的三要素:事件源.事件.事件驱动程序. 比

JavaScript中的DOM及相关操作

一.什么是DOM JavaScript由ECMAScript.DOM和BOM三部分组成,其中DOM代表描述网页内容的方法和接口,即文档对象模型(Document Object Model).在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM,而树形结构就是我们常说的DOM树. 维基百科中介绍DOM更为准确:DOM是一种跨平台和语言非依赖性的应用程序编程接口,即处理现在的HTML,XHTML或XML文档作为树结构,其中每个节点是一个对象,每个节点表示

firstElementChild与firstChild区别

热门专题