内容待补充。。。

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. 将mysql默认编码改为UTF8

    windows: a. WIN+R  net stop mysql  关闭mysql服务 b. 复制my-dafault.ini,重命名为my.ini,进入里面 UBUNTU: ** sudo vim ...

  2. 多态&接口

    多态 多态定义:允许一个父类变量引用子类的对象:允许一个接口类型引用实现类对象. 多态的调用:使用父类的变量指向子类的对象:所调用的属性和方法只限定父类中定义的属性和方法,不能调用子类中特有的属性和方 ...

  3. Http状态码大全(200、404、500等)

    基本涵盖了所有问题 HTTP 400 – 请求无效HTTP 401.1 – 未授权:登录失败HTTP 401.2 – 未授权:服务器配置问题导致登录失败HTTP 401.3 – ACL 禁止访问资源H ...

  4. 4 Python+Selenium的元素定位方法(link/partial link)

    [环境] Python3.6+selenium3.0.2+IE11+win7 [定位方法] 1.link/partial link定位方法:定位的元素为文字链接且链接很长时 方法:find_eleme ...

  5. C# 1.将整个文件夹复制到目标文件夹中 2.将指定文件复制到指定目标文件夹中

    ].Items.Clear(); string filePath = Application.StartupPath; string sourcePath = Path.Combine(filePat ...

  6. 脚本自动化部署varnish源码包

    #!bin/bash#功能:自动化部署 varnish 源码包软件,运行脚本前,需提前下载 varnish-5.0.0.tar.gz#作者:liusingbonyum -y install gcc r ...

  7. WPF添加类库并引用

    源码地址:https://github.com/lizhiqiang0204/-WpfApp2.git 首先利用WPF向导创建一个空的项目 using System.Windows; namespac ...

  8. Smallest Common Multiple FreeCodeCamp

    题目:找出能被两个给定参数和它们之间的连续数字整除的最小公倍数.  范围是两个数字构成的数组,两个数字不一定按数字顺序排序. 分析:首先题目的意思求一个连续数列的所有数字的最小公倍数,这连续的数字序列 ...

  9. 什么是JSON ?

    JSON 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

  10. centos7 rpm 安装 rabbitMQ 最新版

    首先打开官网: http://www.rabbitmq.com/install-rpm.html 先到右侧导航栏来看一下 : 第一个红框是指的在linux中安装,全英文的,乱的一笔,但是静下心来就可以 ...