内容待补充。。。

DOM相关注意题目:

DOM的最小组成单位叫做
//节点 Node DOM 有自己的国际标准,目前的通用版本是
//DOM 3 DOM 树的根节点
//HTML 元素 Element 的 NodeType 值为
//1 和Node. ELEMENT_NODE <div id=x></div> x的值
//就是这个 id 为 x 的 div 对应的 Element 对象 document.body.nodeName
//"BODY" <div id=parent></div> parent的值
//如果有父窗口,就是父窗口。如果没有,就是当前窗口(不要用全局属性)
//如果想用,可声明一个函数,并立即调用.call(),或者直接() <div id=x></div>
<div id=y></div>
x.nextSibling 的值是
//回车构成的文本节点 <div id=parent1>
<div id=child1>
</div>
</div>
parent1.childNodes 的值是
//{0:child1, length:1} 伪数组 var parent = document.getElementById('parent');
parent.childNodes.length //
parent.appendChild(document.createElement('div'));
parent.childNodes.length
// 请问现在 length 是多少
//3 因为最后有用childNodes重新看子节点 var allDiv = document.querySelectorAll('div>
allDiv.length // 假设是 2
document.body.appendChild( document.createElement('div') )
allDiv.length
// 请问现在 length 的值是多少???
//2 因为alldiv是在第一步就取出来了,后面也没有重新取所以一直都是2 //以上题目为什么一个 length 会动态变化,另一个 length 却不会动态变化?
1 parent.childNodes 是动态集合。所谓动态集合就是一个活的集合,DOM树删除或新增一个相关节点,都会立刻反映在NodeList接口之中。 
 2 document.querySelectorAll方法返回的是一个静态集合。DOM内部的变化,并不会实时反映在该方法的返回结果之中。
ChildNode接口用于处理子节点(包含但不限于Element子节点)。Element节点、DocumentType节点和CharacterData接口,部署了ChildNode接口。凡是这三类节点(接口),都可以使用
// remove()、before()、after()、replaceWith() 节点的类型有七种,分别是
//Document、DocumentType、Element、Attribute、Text、Comment、DocumentFragment
//(这三种不是:Doctype、Tag、TextElement)

HTMLCollection和NodeList的区别

在用原生javascript选择器获取dom元素的时候。能直接返回

元素的也仅仅只有以下两条

var dom1=document.getElementById("a");
var dom2=document.querySelector("#a");

这两种选择器返回的是a元素。

而其他的选择器,大部分返回的结果是HTMLCollection,或者NodeList。

NodeList 对象是节点的集合,返回的是 Node 集合与 Node(取索引)。由 Node.childNodes 和 document.querySelectorAll 所返回的。

HTMLCollection 对象是元素的集合,返回是 Element 集合与 Element(取索引)。由node.children 和 node.getElementsByXXX

唯一要注意的是 querySelectorAll 返回的虽然是 NodeList ,但是实际上是元素集合,并且是静态的(其他接口返回的HTMLCollection和NodeList都是live的)

HTMLCollection与NodeList的区别有:

1 HTMLCollection实例对象的成员只能是Element节点,NodeList实例对象的成员可以包含其他节点。

2 HTMLCollection实例对象可以用id属性或name属性引用节点元素,NodeList只能使用数字索引引用。

DOM相关知识点的更多相关文章

  1. DOM相关知识点以及原型

    DOM(增删改查): 查询 1.获取元素 1.1标准DOM API document.getElementById document.getElementsByTagName document.get ...

  2. http及浏览器相关知识点归纳

    http是应用层协议,采用请求/响应模型 1.浏览器地址栏输入URL地址后发生了什么? 浏览器判断地址是否是合理的URL地址,是否是http协议请求,如果是则进入下一步 浏览器对此URL进行缓存检查: ...

  3. React其它相关知识点

    React其它相关知识点 一,解释一下React Fiber? 简单来说,核心就是在虚拟dom和浏览器的调用栈之间多了一个虚拟调用栈,和虚拟dom一样,这个虚拟调用栈也是在内存中的,这个虚拟调用栈就类 ...

  4. UITableView相关知识点

    //*****UITableView相关知识点*****// 1 #import "ViewController.h" // step1 要实现UITableViewDataSou ...

  5. Android开发涉及有点概念&相关知识点(待写)

    前言,承接之前的 IOS开发涉及有点概念&相关知识点,这次归纳的是Android开发相关,好废话不说了.. 先声明下,Android开发涉及概念比IOS杂很多,可能有很多都题不到的.. 首先由 ...

  6. IOS开发涉及有点概念&相关知识点

    前言,IOS是基于UNIX的,用C/C+/OC直通系统底层,不想android有个jvm. 首先还是系统架构的分层架构 1.核心操作系统层 Core OS,就是内存管理.文件系统.电源管理等 2.核心 ...

  7. IOS之UI--小实例项目--添加商品和商品名(使用xib文件终结版) + xib相关知识点总结

    添加商品和商品名小项目(使用xib文件终结版) 小贴士:博文末尾有项目源码在百度云备份的下载链接. xib相关知识点总结 01-基本使用 一开始使用xib的时候,如果要使用自定义view的代码,就需要 ...

  8. 学习记录013-NFS相关知识点

    一.NFS相关知识点 1.NFS常用的路径/etc/exports NFS服务主配置文件,配置NFS具体共享服务的地点/usr/sbin/exportfs NFS服务的管理命令,exportfs -a ...

  9. TCP/IP 相关知识点与面试题集

    第一部分:TCP/IP相关知识点 对TCP/IP的整体认 链路层知识点 IP层知识点 运输层知识点 应用层知识点 (这些知识点都可以参考:http://www.cnblogs.com/newwy/p/ ...

随机推荐

  1. 整理Py小demo

    from email.mime.text import MIMEText # 第一个参数就是邮件正文,第二个参数是MIME的subtype, # 传入'plain'表示纯文本,最终的MIME就是'te ...

  2. 【Oracle】glogin.sql脚本模板

    [root@localhost ~]# su - oracle [oracle@localhost ~]$ vi $ORACLE_HOME/sqlplus/admin/glogin.sql defin ...

  3. RFID 知识的学习

    * 部分资料来自我们博士的PPT,部分来自网络和他人的论文. * 我们使用的教材是清华大学出版社出版的<智能卡技术(第四版)——IC卡.RFID标签与物联网(清华大学计算机系列教材)>(王 ...

  4. 02--linux操作系统基础学习笔记

    linux是一种操作系统. 嵌入式系统是以应用为中心的,以计算机技术为基础并且软硬件可剪裁,专用计算机系统. 内核下载网站 https://www.kernel.org/ https://www.ke ...

  5. PhotoZoom Classic 7中的新功能

    众所周知PhotoZoom Classic是家庭使用理想的放大图像软件.目前很多用户还在使用PhotoZoom Classic 6,对于PhotoZoom Classic 7还是有点陌生.其实在6代衍 ...

  6. 循环语句 for循环、while循环、do while循环

    循环语句可以在满足循环条件的情况下,反复执行某一段代码,这段被重复执行的代码被称为循环体语句,当反复执行这个循环体时,需要在合适的时候把循环判断条件修改为false,从而结束循环,否则循环将一直执行下 ...

  7. 【数据分析学习】Pandas学习记录

    import pandas as pd path = r'F:\数据分析专用\数据分析与机器学习\food_info.csv' with open(path, 'r') as f: data = pd ...

  8. nginx强制使用https访问(多站点多域名配置)

    很多配置过https模板的人都知道,配置https 时 ,站在用户的角度http 和https 的区别根本不清楚.有时候敲 http 时会出现 404 错误,而实际上我们是https. 有朋友找我配置 ...

  9. Project Euler 24 Lexicographic permutations( 康拓逆展开 )

    题意: 排列指的是将一组物体进行有顺序的放置.例如,3124是数字1.2.3.4的一个排列.如果把所有排列按照数字大小或字母先后进行排序,我们称之为字典序排列.0.1.2的字典序排列是:012 021 ...

  10. 训练1-o

    给出2个N * N的矩阵M1和M2,输出2个矩阵相乘后的结果. Input 第1行:1个数N,表示矩阵的大小(2 <= N <= 100)第2 - N + 1行,每行N个数,对应M1的1行 ...