首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

firstElementChild、firstChild 、childNodes和children方法

一、 123 在上面这段代码中,如果使用以下js代码 var oDiv=document.getElementByTagName("div")[0]; alert...text文本节点) 如果把html的Demo改成如下,则无论在古老浏览器还是现代浏览器中得到的结果都是一样 123 由于没有了div与p标签之间的空白,所以执行上面js...代码时无论在ie678还是现代浏览器中都输出p标签 二、 在平时写js中,我们经常会想用一个方法直接获取到父元素的第一个子元素节点,就好比如上面的例子中,使用firstChild确实可以实现这一功能 123 var first=document.getElementByTagName("div")[0].firstChild 这样我们就可以获取到第一个元素子节点,但是当...的时候,如果想获取到子元素的element节点,最好使用children方法,因为childNodes方法以及firstChild方法在现代浏览器中使用,都会把元素标签中的空白节点检测出来,一般我们使用这两个方法都是为了获取到元素的元素节点

1.4K20
您找到你想要的搜索结果了吗?
是的
没有找到

JavaScript之firstChild属性、lastChild属性、nodeValue属性学习

1.数组元素childNodes[0]有更直观易读的优点,这边在介绍一个有同样功能的属性,且更加语义化-------->firstChild属性 假设我们需要目标元素节点下的所有子元素中的第一个子元素我们可以这样做...: 目标元素节点下的子元素节点数组.firstChild 这句代码等价于 目标元素节点下的子元素节点数组[0]; 目标元素节点.childNodes[0] 这句代码等价于 目标元素节点.firstChild...目标元素节点下的子元素节点数组.length-1] 目标元素节点.childNodes[目标元素节点.childNodes.length-1]=目标元素节点.lastChild; 从上面的描述中,发现firstChild...属性和lastChild属性更加的语义化,而且代码更加的简洁,方便我们记忆;  注意:firstChild和lastChild只能对单个节点就行操作,不能对节点数组进行操作; 2.nodeValue属性...document.getElementById("description"); alert(p.childNodes[0].nodeValue); 学完nodeValue属性后我们能给我们的JS

1.5K90

网页翻译最轻量级方法【微软】翻译书签!!!

用chrome或者火狐等现代浏览器的人都知道,插件、扩展等丰富了我们使用浏览器的体验感受,但是大家都知道,插件安装太多会引起浏览变慢等等问题,秉着有扩展不用插件,有代码书签不用扩展的良好习惯,这里就给大家推荐一款翻译代码书签...f=js&to=zh-chs';%20document.body.insertBefore(s,%20document.body.firstChild);})()""...f=js&to=zh-chs';%20document.body.insertBefore(s,%20document.body.firstChild);})()""...f=js&to=zh-chs';%20document.body.insertBefore(s,%20document.body.firstChild);})() 点击添加,书签栏就有了这个书签了...怎么使用呢?超级简单,打开某个英文网站,点击这个翻译书签,网站就全部翻译过来了

38600

使用JS开发桌面应用

Javascript在web开发中已经稳稳的占据了重要位置,现在已经开始渗透到桌面开发了 Electron 便是用来创建桌面应用的框架 使用 JavaScript + HTML + CSS 就可以开发跨平台的桌面应用...看下这些知名应用就知道了 GitHub 的文本编辑器 Atom 聊天群组应用独角兽公司 Slack 使用 Electron 搭建了桌面客户端 微软发布的代码编辑器 Visual Studio Code...,使用 Electron 构建 JavaScript 语言发明人 Brendan Eich 的公司使用 Electron 开发了一套全新的网页浏览器 Brave Browser 上手尝试 下面写一个hello...{ "name": "deskjs", "version": "0.1.0", "main": "main.js" } 格式和 Node 的完全一致,main 字段是应用的启动脚本 index.html... Hello World 第一个 JS 桌面应用</

2.8K60

(九)使用js实现动画

使用 JavaScript 实现动画 说明 因为 css 不能实现较为复杂的动画,如数字变化动画,或者 canvas 形变动画等 认识 js 动画 市面上有很多优秀的 js 库 如下面这个 GreenSock...我们需要在合适的地方切入 js 动画,具体参数如下图 这些回调函数需要以当前 组件作为实例调用,方便对接 js 库操作 DOM 实例 enter 和 leave 还接收第二个参数 done 需要手动调用通知...vue 动画执行完成可以正式卸载挂载组件了 function lave(el, done) { done() } 禁用组件自带的 6 个 css 动画 使用 v-bind:css="fasle"...简写 :css="fasle" 使用 web animation Api 来实现动画 web...通过他我们可以监听动画的执行阶段,可以手动暂停,或者播放动画 fadeIn.onfinis = () => { done() } } 可以和 组件自带的 6 个 class 一起混合使用

5.2K20
领券