firstElementChild 兼容

兼容firstChild和firstElementChild

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

我所理解的ECMAScript、DOM、BOM---写给新手们

像很多新手一样,我知道js有三部分组成,即ECMAScript.DOM.BOM三部分组成,ECMAScript是核心解释器.DOM(Document Object Model)是文档对象模型.BOM(Browser Object Model)是浏览器对象模型,但是我并没有完全理解其中的含义,还是会经不住去问:它们到底是什么?所以今天我和好朋友坐下来好好探讨了一下,来弥补这个小小的漏洞,如果有哪些不对的地方,还望看到的朋友指正: ECMAScript也是一种语言,它本身不包含输入输出定义:ECMA

javascript DOM小结

一:定义 dom:文档对象模型. dom是针对HTML和XML文档的一个API.dom描绘了一个层次化的节点树,允许开发人员添加.移除.修改页面的某一部分. 1:childNodes(返回当前节点的子节点列表) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dom1</title> <style&

js兼容性大全

js有个第二定律好的属性/选择器一定不兼容/* 获取类名通用代码*/function getClassName(){ if(document.getElementsByClassName){ dosoming....... }else{ getClassName(className); } function getClassName(className){ var aTag = []; var allTag = document.getElementById(id).getElementsByT

第30天：DOM对象操作

JS包括三部分:ECMAscript.DOM(文档对象).BOM(浏览器对象) 一.DOM(文档对象)DOM树节点(元素.属性.标签.标记等都是节点) 二.访问节点 documment.getElementById()documment.getElementsByTagName()documment.getElementsByClassName()//主流浏览器支持,IE6.7.8不兼容三.节点访问关系1.父节点:parentNode2.兄弟节点:下一个兄弟:nextSibling //IE

2.3 js基础--DOM

一.javascript组成 ECMAScript:核心解释器[为我们提供好了最基本的功能:变量声明.函数.语法.运算]. 兼容性:完全兼容. DoM:文档对象模型[document object Model],document:操作界面的比如:获取元素.修改样式.创建元素. BoM: 浏览器对象模型[Browser object Model],操作浏览器的,就是window.

浏览器兼容innerText nextElementSibling firstElementChild

//下面是封装的方法,可以直接使用 //获dom对象的innerText的取值 function getInnerText(element){ //判断浏览器是否支持innerText if(typeof element.innerText==="string"){ return element.innerText; }else{ return element.textContent; } } //设置dom对象innerText的值 function setInnerText(ele

JS中常遇到的浏览器兼容问题和解决方法

今天整理了一下浏览器对JS的兼容问题,希望能给你们带来帮助,我没想到的地方请留言给我,我再加上: 常遇到的关于浏览器的宽高问题: //以下均可console.log()实验 var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//网页可见区域宽 var winH=document.body.clientHeight||document.docuemntElement.clientHeight;//网页可

关于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>两个标签之间的空白节点也解析出

JS中常遇到的浏览器兼容问题和解决方法【转】

今天整理了一下浏览器对JS的兼容问题,希望能给你们带来帮助,我没想到的地方请留言给我,我再加上: 常遇到的关于浏览器的宽高问题: //以下均可console.log()实验 var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//网页可见区域宽 var winH=document.body.clientHeight||document.docuemntElement.clientHeight;//网页可

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

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

JavaScript中浏览器兼容问题

浏览器兼容性问题是在实际开发中容易忽略而又最重要的一部分.我们在讲老版本浏览器兼容问题之前,首先要了解什么是能力检测,它是来检测浏览器有没有这种能力,即判断当前浏览器是否支持要调用的属性或者方法.下面做了一些简短的介绍. 1.innerText 和 innerContent 1)innerText 和 innerContent 的作用相同 2)innerText IE8之前的浏览器支持 3)innerContent 老版本的Firefox支持 4)新版本的浏览器两种方式都支持 // 老版本浏览器

关于js的兼容问题(小办法)！

今天整理了一下浏览器对JS的兼容问题,希望能给你们带来帮助,我没想到的地方请留言给我,我再加上: 常遇到的关于浏览器的宽高问题: //以下均可console.log()实验 var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//网页可见区域宽 var winH=document.body.clientHeight||document.docuemntElement.clientHeight;//网页可

HTML5之拖拽(兼容IE和非IE)

前世:项目中需要拖动div,然后和某个div进行位置交换,这不是关键,关键是还要保存位置,然后在下次打开的时候按照保存的位置显示.还好本人功力深厚,一下子就想到了用localStorage来保存,事实证明真的很好用哦.保存数据的方法有了,然后开始"探索"如何用html(5)和js来实现拖拽的效果,由于H5给了比较规范的实现方式,所以在Chrome中轻松实现,万恶的IE(很少骂IE)竟然不兼容,NONONONO,心塞,只好用了两种方式分别实现拖拽效果.(其实两种方式内的代码很相似,唯一不

js下firstElementChild firstChild 以及childNodes和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的js代码兼容全部浏览器的解决方法

//以下均可console.log()实验 var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//网页可见区域宽 var winH=document.body.clientHeight||document.docuemntElement.clientHeight;//网页可见区域宽 //以上为不包括边框的宽高,如果是offsetWidth或者offsetHeight的话包括边框

轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器

项目源代码下载地址:轮播图以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换图片,无缝滚动和非无缝滚动两种效果) 页面源代码:index.html(以下注释自行切换,为了项目清晰,所以用了四个js文件,分别实现不同的效果) <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c

JS中的兼容问题总结

今天总结总结在JS里面遇到的兼容性问题 1.获取滚动距离的兼容性问题: document.documentElement.scrollTop || document.body.scrollTop (兼容IE) 2.获取非行间样式 getComputedStyle(元素,false)[attr] || 元素.currentStyle[attr] 3.索引获取字符串的问题 str[1] 在IE6,7中不兼容,用str.charAt(1)在各个浏览器都兼容 4.DOM中的获取节点的兼容

chrome-Firefox-IE浏览器兼容总结

作为一名WEB前端程序员,相信每个人对浏览器的兼容都"情有独钟",下面就一些常用的浏览器的兼容列举一二. 一.块级元素(block)一般不转化为inline-block,其实是因为浏览器的兼容问题,IE8以下的浏览器不支持块级元素转化为行内块元素(可以使用浮动). 二.获取元素样式: 1.oDiv.style.background: 获取到的是行内样式的属性 2.获取显示的样式: 标准浏览器(IE9以下是不支持): getComputedStyle(标签元素,false).属

手淘移动适配方案flexible.js兼容bug处理

什么是flexible.js 移动端自适应方案 https://www.jianshu.com/p/04efb4a1d2f8 什么是rem 这个单位代表根元素的 font-size 大小(例如元素的font-size).当用在根元素的font-size上面时 ,它代表了它的初始值(译者注:默认的初始值是html的默认的font-size大小,比如当未在根元素上面设置font-size大小的时候,此时的1rem==1em,当设置font-size=2rem的时候,就使得页面中1rem的大小相当于

firstElementChild 兼容

热门专题