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




相关文章
|
安全 vr&ar 计算机视觉
AR智能眼镜在警务安防的人脸识别场景,有哪些应用和优势?
AR智能眼镜结合人脸识别技术,为安防领域带来高效精准的解决方案。通过实时采集与分析人脸信息,快速识别重点人员并即时报警,广泛应用于机场、车站、大型活动等场景,显著提升安全防控能力。
AR智能眼镜在警务安防的人脸识别场景,有哪些应用和优势?
|
10月前
|
安全 算法
搬运5款让你电脑更好用的小软件
本文介绍了五款实用的电脑软件,包括文件夹移动工具FolderMove、文件整理工具DropIt、微信空号检测软件燃精灵、图片放大软件BenVista PhotoZoom以及任务管理工具Todoist。这些软件能帮助你提升电脑使用效率、美化界面、保障安全,快来试试吧!
161 3
|
API Java
解决HTTP 400 Bad Request错误的方法
解决HTTP 400 Bad Request错误的方法
6265 0
|
缓存 Java
通过JDK源码角度分析Long类详解
通过JDK源码角度分析Long类详解
通过JDK源码角度分析Long类详解
|
缓存 jenkins 持续交付
「持续集成实践系列 」Jenkins 2.x 构建CI自动化流水线常见技巧(二)
「持续集成实践系列 」Jenkins 2.x 构建CI自动化流水线常见技巧(二)
596 0
「持续集成实践系列 」Jenkins 2.x 构建CI自动化流水线常见技巧(二)
【LeetCode剑指offer47】礼物的最大价值(简单dp)
基础题。拿到题目,“最大价值”、路线问题,可以发现和以前做的【LeetCode62】不同路径(dp)是一个思路的,都是规定从左上角,每次只能向右or向下移动一格,于是那题从当前状态考虑时,需要将上方格子的dp值和左方的dp值相加(因为那里是求路径方法数),但是本题是取max(因为这里是求一条路径,该路径使得礼物价值最大)。
265 0
【LeetCode剑指offer47】礼物的最大价值(简单dp)
|
机器学习/深度学习 人工智能 Oracle
云大会归来,解读甲骨文云脉络
云大会归来,解读甲骨文云脉络
390 0
云大会归来,解读甲骨文云脉络
|
Rust Kubernetes Go
为Envoy编写WASM Filter并部署到服务网格ASM中使用
## 简介 Envoy是一个高性能、可编程的L3 / L4和L7代理,被服务网格ASM作为数据面的代理使用。Envoy的连接和流量处理的核心是网络过滤器(Network Filter),该过滤器一旦融合进滤器链(Filter Chain),就可以实现用于访问控制、数据或协议转换、数据增强、审计等高级功能。通过添加新的过滤器Filter,可以用来扩展Envoy的已有功能集。当前有两种方法可以添加新
2338 0
为Envoy编写WASM Filter并部署到服务网格ASM中使用
|
应用服务中间件 存储 异构计算
阿里云新增AMD,GPU云服务器介绍
超强算力云服务器有AMD实例计算型 c7a、通用型 g7a、内存型 r7a。ARM实例计算型 c6r、通用型 g6r。GPU云服务器gn6i和gn6v