Javascript 学习 笔记四

简介: 1、children和childNodes(参考:JavaScript中Element与Node的区别,children与childNodes的区别 children和childNodes) Node(节点)是DOM层次结构中的任何类型的对象的通用名称,Node有很多类型,如元素节点,属性节点,文本节点,注释节点等,通过NodeType区分,常见的有:节点类型NodeType元

1、children和childNodes(参考:JavaScript中Element与Node的区别,children与childNodes的区别 children和childNodes

Node(节点)是DOM层次结构中的任何类型的对象的通用名称,Node有很多类型,如元素节点,属性节点,文本节点,注释节点等,通过NodeType区分,常见的有:

节点类型 NodeType
元素element 1
属性attr 2
文本text 3
注释comments 8
文档document 9
更多节点类型参考:https://developer.mozilla.org/en-US/docs/DOM/Node.nodeType?redirectlocale=en-US&redirectslug=nodeType

Element继承了Node类,也就是说Element是Node多种类型中的一种,即当NodeType为1时Node即为ElementNode,另外Element扩展了Node,Element拥有id、class、children等属性。

以上就是Element跟Node的区别。

childNodes 属性,它返回指定元素的子元素集合,包括HTML节点,所有属性,文本。可以通过nodeType来判断是哪种类型的节点,只有当nodeType==1时才是元素节点,2是属性节点,3是文本节点。

有些人错误的使用()去取该集合元素,下表列出各浏览器对childNodes(i)的支持情况:


IE6/7/8/Safari/Chrome/Opera IE9/Firefox
childNodes(i) 支持 不支持

children 属性,它返回指定元素的子元素集合。经测试,它只返回HTML节点,甚至不返回文本节点。且在所有浏览器下表现惊人的一致

2、document.body.scrollTop or document.documentElement.scrollTop(参考:点击打开链接

用Javascript获取DOM节点相对于页面的绝对坐标时,需要计算当前页面的滚动距离,而这个值的获取又取决于浏览器。
在Firefox或Chrome浏览器的控制台可以查看document.body 对应于页面中 <body></body>部分的元素,而document.documentElement则相当于整个HTML,说明浏览器在解释渲染后的页面位置范围是存在不同的,FF、Opera和IE浏览器认为在客户端浏览器展示的页面的内容对应于整个HTML,所以使用document.documentElement来代表,相应的滚动距离则通过document.documentElement.scrollLeft 和 document.documentElement.scrollTop来获取,而Safari和Chrome浏览器则认为页面开始于body部分,从而相应的滚动距离用document.body.scrollLeft 和 document.body.scrollTop来获取。另外需要注意的是,FF和IE的quirks mode(兼容模式)下是用document.body来获取的。

3、Document 对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。



4、Event 对象

Js event事件在IE、FF兼容性问题

IE:有window.event对象 
FF:没有window.event对象。可以通过给函数的参数传递event对象。 

 <script type="text/javascript">
        function showDiv(event) {
            var event = window.event || event;
            event.clientX;
            event.clientY;
        }
    </script>


5、真假值

在javascript中,数据类型可以分为“真值”和“假值”。顾名思义,真值转换为bool时值为true;假值转换为bool时值为false。

下表罗列了一些常见的数据类型转换为bool时的值:

数据类型 转换为bool后的值
null FALSE
undefined FALSE
Object TRUE
function TRUE
0 FALSE
1 TRUE
0、1之外的数字 TRUE
字符串 TRUE
""(空字符串) FALSE


6、&&与||

在javascript中,“&&”运算符运算法则如下:

如果&&左侧表达式的值为真值,则返回右侧表达式的值;否则返回左侧表达式的值。

“||”运算符的运算法则如下:
如果||左侧表达式的值为真值,则返回左侧表达式的值;否则返回右侧表达式的值。


作者:jiankunking 出处:http://blog.csdn.net/jiankunking




相关文章
|
JavaScript 前端开发 Java
学习JavaScript笔记
学习JavaScript笔记
49 0
|
XML JavaScript 前端开发
Javascript 学习 笔记五
1、事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。 2、offset、scro
1221 0
|
JavaScript 前端开发 算法
Javascript 学习 笔记三
1、Javascript 组成: ECMAScript--JavaScript的核心,描述了语言的基本语法和对象。DOM(文档对象模型)--The Document Object Model描述了作用于网页内容的方法和接口。document的操作,比如: var lis = document.getElementsByTagName('li'); BOM(浏览器对象模型):The Brow
1061 0
|
前端开发 JavaScript
Javascript 学习 笔记二
1、查找HTML元素            通常,通过 JavaScript,您需要操作HTML 元素。      为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:      通过id找到HTML元素(本例查找 id="intro" 元素)var x=document.getElementById("intro");         通过标签名找到HTML元素(本例查找 id="
900 0
|
6天前
|
Web App开发 人工智能 架构师
备考神器!基于通义听悟和Xmind快速生成思维导图
使用阿里通义听悟与Xmind,高效创建思维导图。通义听悟支持PDF、Word等格式文档分析,可一键转为Xmind格式。视频分析需下载,支持最大6GB,可用通义听悟插件实现在线视频内容提取。B站部分视频自带AI总结,或使用特定网站直接在线解析视频生成MD文档。结合Xmind,优化学习和工作效率。
23520 13
|
18天前
|
缓存 运维 关系型数据库
数据库容灾 | MySQL MGR与阿里云PolarDB-X Paxos的深度对比
经过深入的技术剖析与性能对比,PolarDB-X DN凭借其自研的X-Paxos协议和一系列优化设计,在性能、正确性、可用性及资源开销等方面展现出对MySQL MGR的多项优势,但MGR在MySQL生态体系内也占据重要地位,但需要考虑备库宕机抖动、跨机房容灾性能波动、稳定性等各种情况,因此如果想用好MGR,必须配备专业的技术和运维团队的支持。 在面对大规模、高并发、高可用性需求时,PolarDB-X存储引擎以其独特的技术优势和优异的性能表现,相比于MGR在开箱即用的场景下,PolarDB-X基于DN的集中式(标准版)在功能和性能都做到了很好的平衡,成为了极具竞争力的数据库解决方案。
|
10天前
|
存储 弹性计算 监控
几百T的视频、图片数据如何更有效地存储和管理?
采用传统硬盘搭建存储方案,看起来成本低廉,但是再加上各种附加因素后却大幅攀升,而云存储厂商通常提供基于订阅的定价模型、一些免费服务和一定的折扣。现在,我们就来了解一下如何更省钱地使用云存储。
18887 26
几百T的视频、图片数据如何更有效地存储和管理?
|
11天前
|
Kubernetes Dubbo Cloud Native
将Dubbo应用部署到服务网格中
本文主要就Dubbo应用如何接入服务网格、获得各项云原生能力进行了探讨,并提出了最佳实践以及过渡两种实践场景。我们首先推荐您使用Dubbo社区提供的最佳实践场景来接入服务网格,在必要时可以通过过渡方案来向最佳实践方案逐步实现过渡。
19205 6
|
9天前
|
人工智能 自然语言处理 搜索推荐
解读阿里云搜索开发工作台如何快速搭建AI语义搜索及RAG链路
本文介绍阿里云搜索开发工作台如何通过内置数据处理、查询分析、排序、效果测评、大模型等服务,结合阿里云搜索引擎及开源引擎,灵活打造AI语义搜索及RAG链路。
19132 12
|
8天前
|
分布式计算 监控 Serverless
E-MapReduce Serverless Spark 版测评
E-MapReduce Serverless Spark 版测评
11520 9