DOM 节点node
DOM可以将任何HTML或XML文档描绘成一个有多层节点构成的结构，即在HTML中所有内容都是节点。文档节点是每个文档的根节点，文档节点有一个子节点，称为文档元素。每个文档只能有一个文档元素。在HTML中，文档元素是<html>元素，其他所有元素都包含在文档元素中。
1、节点
JavaScript中实现了一个 Node 类型来描述DOM节点，JavaScript中的所有节点类型都是继承自Node类型。一共有12中节点类型，Node类型定义了12个数值常量来表示，如下所示，其中括号中表示的是常量的值，除了IE都可以使用下列常量名访问这些值。
Node.ELEMENT_NODE(1); //元素节点
Node.ATTRIBUTE_NODE(2); // 属性节点
Node.TEXT_NODE(3); // 文本节点
Node.CDATA_SECTION_NODE(4); //
Node.ENTITY_REFERENCE_NODE(5); //
Node.ENTITY_NODE(6); //
Node.PROCESSING_INSTRUCTION_NODE(7);//
Node.COMMENT_NODE(8); // 注释节点
Node.DOCUMENT_NODE(9); //文档节点
Node.DOCUMENT_TYPE_NODE(10); // 文档类型节点
Node.DOCUMENT_FRAGMENT_NODE(11); //
Node.NOTATION_NODE(12); //
节点的属性和方法：
| 属性/方法 | 说明 |
| nodeType | 节点类型，返回类型数值 |
| nodeName | 节点名字，对于元素节点，返回的是元素的标签名 |
| nodeValue | 节点值，对于元素节点，返回null |
| childNodes |
子节点，返回一个NodeList对象 |
| parentNode | 父节点 |
| previousSibling | 前面一个同胞节点 |
| nextSibling | 后面一个同胞节点 |
| firstChild | 第一个子节点 |
| lastChild | 最后一个子节点 |
| hasChildNodes() | 如果有子节点，返回true，反之，false |
| appendChild(newNode) | 向childNodes列表末尾添加一个节点 |
| insertBefore(newNode,targetNode) | 在目标子节点前插入新子节点，如果targetNode为null，新节点成为最后一个节点 |
| replaceChild(newNode,targetNode) | 用新节点替换目标节点 ，替换后，被替换的节点仍在文档中，但没有文档位置 |
| removeChild(targetNode) | 移除目标节点 ，移除后，被移除的节点仍在文档中，但没有文档位置 |
| cloneNode(isDeep) | 是否深度复制节点，深度复制会将子节点一起复制。复制完后节点属于文档，但没有父节点，需要通过 appendChild()、insertBefore()、replaceChild() 将它添加到文档中。 |
| normalize() | 处理文档树的文本节点，删除空文本节点，或合并相邻的文本节点成为一个文本节点 |
NodeList是一种类似数组的对象，用于保存一组有序的节点，它有 length 属性，可以通过方括号语法来访问，也可以用item()方法。NodeList 对象是基于DOM结构动态执行查询的结果，DOM的变化，其中节点的NodeList也会变化。
var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1); //
var count = someNode.childNodes.length;
2、Document 类型，document对象
Document类型表示文档，在浏览器中 document 对象时 HTMLDocument （继承自 Document 类型）的一个实例，表示整个页面，且 document 对象是 window 对象的一个属性。
Document节点的子节点可能是一个DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction 或 Comment。
Document节点的属性及方法：
| nodeType | 9 |
| nodeName | #document |
| nodevalue | null |
| parentNode | null |
| ownerDocument | null |
| documentElement | 指向Html页面中的<html>元素 ，document.documentElement |
| chilidNodes | |
| doctype | 文档类型，<!DOCTYPE >，document.doctype。各个浏览器对此支持差别很大，用处有限 |
| getElementById(ID) | 返回文档中第一次出现的、id属性匹配的元素，没有则返回null。IE9-不区分大小写，IE7中name属性匹配，也会被返回。 |
| getElementsByTagName(tagName) | 返回包含所有匹配指定标签名元素的HTMLCollection对象，HTMLCollection与NodeList类似，有length属性，可以用方括号或item()访问 |
HTMLDocument类型的属性及方法：
| getElementsByName(name) | 返回包含指定name属性的元素的NodeList对象 |
document 对象的属性及方法：
| body | 直接指向<body>元素,document.body |
| title | 取得文档的<title>元素中的文本，也可以设置title文本 |
| URL | 完整的URL，即地址栏中显示地URL |
| domain |
取得域名，也可设置域名，但只能将其设置为URL中包含的域。当页面包含有其他子域的框架或内嵌框架时，可以将这些页面的document.domain设置为相同的值， 这样就可以互相访问 js 对象了，即实现主域和子域之间的跨域。 |
| referrer | 页面来源URL，没有页面来源则为空字符串 |
| anchors | 返回包含所有带name属性的<a>元素的HTMLCollection 对象 |
| forms | 返回包含所有<form> 元素的HTMLCollection 对象，等同于document.getElementsByTagName("from") |
| images | 返回包含所有<img> 元素的HTMLCollection 对象，等同于document.getElementsByTagName("img") |
| links | 返回包含所有带 href 属性的<a>元素的HTMLCollection 对象 |
| write(string) | 向页面写入输出流 |
| writeln(string) | 向页面写入输出流，并在字符串末尾加一个换行符 |
| open() | 打开页面的输出流 |
| close() | 关闭页面的输出流 |
| createElement(elementTag) | 创建元素节点 |
| createTextNode(text) | 创建文本节点 |
利用 document.domain 主域和子域跨域：
http://www.cnblogs.com/adtxgc/p/4691872.html
https://www.jianshu.com/p/4a3bc6d195b0?appinstall=0
可以利用document.write() 和 document.writeln() 动态地项页面加入内容
<script>
document.write("<script src=\"js/test.js\" type=\"text/javascript\"><\/script>"); </script>
如果在文档加载结束后再调用document.write()，那么输出的内容将会重写整个页面
window.onload = function(){
document.write("hello world！")
}
在页面加载期间使用 document.write() 和 document.writeln()，不需要使用 document.open() 和 document.close() 。
HTMLCollection属性及方法
| HTMLCollection.length | 对象中元素的数量 |
| HTMLCollection.item(index) | 索引为index的项 |
| HTMLCollection[index] | 索引为index的项 |
| HTMLCollection.namedItem(name) | 第一个name属性匹配的项 |
| HTMLCollection[name] | 第一个name属性匹配的项 |
var images = document.getElementsByTagName("img");
console.log(images.length);
console.log(images[0].src);
console.log(images.item(0).src);
var myImage = images.namedItem("myImage");
var myImage1 = images["myImage"];
var allElements = document.getElementsByTagName("*"); //获取所有元素,在IE中注释节点也会包含进去
NodeList 、NamedNodeMap、HTMLCollection 这三个集合都是动态的，每当文档结构发生变化它们都会得到更新，所以它们始终保存的是最新的内容。
var divs = document.getElementsByTagName("div");
for (i=0;i< divs.length;i++){ //如果一开始divs.length大于零，会无限循环
div = document.createElement("div");
document.body.appendChild(div);
}
3、Element类型
| nodeType | 1 | |
| nodeName | 元素的标签名，在HTML中，得到的值是大写的；在XML中标签名与源代码一致 | |
| nodeValue | null | |
| parentNode | 可能是Document 或 Element | |
| 子节点 | 可能是Element、Text、ProcessingInstruction、CDATASection、EntityReference | |
| tagName | 元素的标签名，值与nodeName一样 | element.tagName.toLowerCase == "div" |
所有的HTML元素都是有HTMLElement类型或其子类型表示的，而HTMLElement类型是直接继承Element类型并添加了一些属性。
| id | 元素在文档中的唯一标识符，element.id |
可以获取属性或设置属性： var id = element.id; element.id = "someId"; |
||||||||||
| title | 元素的附加说明信息 | 可以获取属性或设置属性 | ||||||||||
| lang | 元素语言，很少使用 | 可以获取属性或设置属性 | ||||||||||
| dir | 语言方向，“ltr”(left-to-right) / "rtl"(right-to-left) | 可以获取属性或设置属性 | ||||||||||
| className | CSS类 | 可以获取属性或设置属性 | ||||||||||
| getAttribute("attr") | 获取属性值，包括DOM本身属性，及自定义属性 | getAttribute("class")，不是“className” | ||||||||||
| setAttribute("attr","value") | 设置属性值，包括DOM本身属性，及自定义属性 | 替换已存在的、新建不存在的，属性名会变成小写 | ||||||||||
| removeAttribute("attr") | 移除属性 | |||||||||||
| attributes |
返回一个包含该元素所有属性节点的NamedNodeMap对象 NamedNodeMap 和 NodeList 类似，是一个动态集合。 attributes包含的节点的nodeName是属性节点的名称 nodeValue是属性节点的值. attributes可以用来遍历元素的属性 |
NamedNodeMap：
element.attributes["id"].nodeName //可以获取属性或设置属性 element.attributes["id"].nodeValue //可以获取属性或设置属性 element.attributes.removeNamedItem("class") |
||||||||||
直接访问元素的属性（element.attr）和 使用 getAttribute() 的区别：
1） 直接属性访问只能访问该DOM元素本来就有的属性，但IE却会为自定义的文档属性也创建元素对象的属性，即能够通过element.specialAttribute 访问，其他浏览器不会。
2）访问 style 属性：直接属性访问（element.style）返回一个对象，getAttribute() 返回的是style中包含的CSS文本。
3）访问事件处理程序，如 onclick ：直接属性访问（element.onclick）返回的是一个JavaScript函数（如果没有相应的属性，返回null），getAttribute() 返回的是 JavaScript 代码
通常在访问DOM本身就存在的属性，使用直接属性访问，而访问自定属性使用getAttribute()。
attributes
1）attributes 对象中得到的属性节点顺序，在各个浏览器中表现不一致
2）IE7及IE7- 版本中，会返回HTML元素所有的属性，包括没有指定的属性。
每个属性节点都有一个 specified 属性，如果 指定了该属性，则其 specified 的值为 true ，反之为 false。
//以 name="value" name="value" 返回dom元素的属性
function outputAttributes(element){
var pairs = [],
attrName,
attrValue,
i,
len;
for (i=0, len = element.attributes.length; i<len; i++){
attrName = element.attributes[i].nodeName;
attrValue = element.attributes[i].nodeValue; if(element.attributes[i].specified){ // 处理IE8- 会出现的问题 pairs.push(attrName + "=\"" + attrValue + "\"");
}
} return pairs.join(" ");
}
创建元素节点：document.createElement(tagName)，接受标签名参数
var testDiv = document.getElementById("test");
var div = document.createElement("div");
div.id = "newDiv";
document.body.insertBefore(div,testDiv);
元素子节点
<ul id="list">
<li class="a">item 1</li>
<li>item 2<span class="a">span</span></li>
<li>item 3</li>
</ul>
<ul id="list1"><li>item 1</li><li>item 2</li><li>item 3</li></ul> var testList = document.getElementById("list");
var testList1 = document.getElementById("list1"); console.log(testList.childNodes.length); // IE6、7、8浏览器是3；其他是7，3个li节点，4个文本节点（空白符）
console.log(testList1.childNodes.length); //所有浏览器是3 for(var i=0,len = testList.childNodes.len;i<len;i++){ if(testList.childNodes[i].nodeType == 1){
// 是元素节点，执行操作
}
} var li = testList.getElementsByTagName("li"); // 从后代元素中查找，HTMLCollection集合
var lia = testList.getElementsByClassName("a"); //从后代元素中查找，IE6、7、8不支持，HTMLCollection集合
4、Text 类型
文本节点，包含的是纯文本，可以是转义后的HTML字符，但不能是HTML代码。
| nodeType | 3 | |
| nodeName | "#text" | |
| nodeValue | 节点包含的文本 | |
| parentNode | 是一个Element | |
| 没有子节点 | ||
| data | 等同nodeValue | |
| length | 文本节点的字符长度，nodeValue.length，data.length 也有一样的值 | |
| appendData(text) | 将文本添加到文本节点末尾 | |
| deleteData(offset,count) | 从offset位置开始删除count个字符 | |
| insertData(offset,text) | 从offset位置开始插入text | |
| replaceData(offset,count,text) | 用text替换从offset开始的count个字符 | |
| splitText(offset) | 从offset开始将当前文本分开两个文本节点，原节点包含指定位置之前的内容，新节点是之后的内容，并返回新节点 | |
| substringData(offset,count) | 返回从offset开始的count个字符，不改变文本节点本身 | |
创建文本节点 document.createTextNode(text)
var textNode = document.createTextNode("<strong>someother text</strong>"); // 在页面中显示 “<strong>someother text</strong>”，并不会加粗显示“someother text”
testList.childNodes[1].appendChild(textNode);
DOM 节点node的更多相关文章
- 深入理解DOM节点类型第五篇——元素节点Element
× 目录 [1]特征 [2]子节点 [3]特性操作[4]attributes 前面的话 元素节点Element非常常用,是DOM文档树的主要节点:元素节点是html标签元素的DOM化结果.元素节点主要 ...
- 深入理解DOM节点类型第六篇——特性节点Attribute
× 目录 [1]特征 [2]属性 [3]方法 前面的话 元素的特性在DOM中以Attr类型表示,从技术角度讲,特性是存在于元素的attributes属性中的节点.尽管特性是节点,但却不是DOM节点树的 ...
- 深入理解DOM节点类型第四篇——文档片段节点DocumentFragment
× 目录 [1]特征 [2]作用 前面的话 在所有节点类型中,只有文档片段节点DocumentFragment在文档中没有对应的标记.DOM规定文档片段(document fragment)是一种“轻 ...
- 深入理解DOM节点类型第一篇——12种DOM节点类型概述
× 目录 [1]元素 [2]特性 [3]文本[4]CDATA[5]实体引用[6]实体名称[7]处理指令[8]注释[9]文档[10]文档类型[11]文档片段[12]DTD 前面的话 DOM是javasc ...
- DOM节点属性
节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType ...
- JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结
JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode 父节点 childNodes ...
- 使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)
getElementById(id)这是通过id来访问某一元素,最常用的之一,例:<html><body><div id="myid">test ...
- HTML DOM节点
在 DOM 树中,基本上一切都是节点.每个元素在最底层上都是 DOM 树中的节点.每个属性都是节点.每段文本都是节点.甚至注释.特殊字符(如版权符号 ©).DOCTYPE 声明(如果 HTML 或者 ...
- Javascript进阶篇——(DOM—节点---属性、访问节点)—笔记整理
节点属性在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType : ...
随机推荐
- 《JavaScript 设计模式与开发实战》第一部分（1、2、3章）笔记
第1章:面向对象的JavaScript 动态类型和鸭子类型 编程语言按照数据类型大体可以分为两类: ① 静态类型语言:在编译时便已确定变量的类型. ② 动态类型语言:变量类型要到程序运行的时候,待变量 ...
- 网络编程之OSI七层协议略析
OSI七层协议 1 物理连接层 用高低电平模拟二进制数01012 数据链路层 以太网协议,Ethernet,要求连入网络的计算机必要要有一块网卡,并且规定全球每一块网卡的mac 地址都不一样,用12位 ...
- RabbitMQ python模块pika生产者消费者轮询模型。
完整代码如下: 生产者,producer import pika connection = pika.BlockingConnection( pika.ConnectionParameters('lo ...
- Spring的学习和源码的学习
PS:Spring中有各种的Templeate,比如jdncTemplate,主要是为了避免各种模板的代码,抽象出来的 PS: @Configration.@Bean是用来替代xml那种解析方式 PS ...
- glog学习（一）：glog的编译及demo
windows平台: 1.下载glog代码.下载地址:https://github.com/google/glog 2.使用cmake工具,获得对应的工程文件sln. 3.打开sln文件,生成对应的l ...
- maya中的顶点平滑算法(vertex smooth algorithm)
继上文继续写.有了顶点迭代器之后就可以利用MItMeshVertex类的getConnectedVertices方法来获取相连点并代入平滑算法. 选择什么样的平滑算法呢?本人比较懒,直接打开了计算机图 ...
- git提交代码五部曲
From: https://jingyan.baidu.com/article/359911f5a4fe4b57fe03060d.html 正常使用git时,提交代码五部曲. 工具/原料 电脑 已 ...
- 算法实践--最小生成树（Prim算法）
前一篇介绍了一种最小生成树的算法--Kruskal算法,本篇介绍另一种Prim算法 算法描述 定义V为端点的集合,A为最小生成树,初始为空.对于每个端点v初始的Key[v]=∞, Parent[v]= ...
- servlet-jsp-EL 表达式
jsp--EL表达式 jsp表达式<%= %>用于向页面中输出一个对象.jsp2.0时在页面中不允许出现jsp表达式和脚本片段,于是使用EL表达式来代替jsp表达式,标签代替脚本片段 基本 ...
- [UE4]Menu Anchor，菜单锚点
一.想要弹出某个菜单的时候,Menu Anchor可以做为菜单弹出的位置. 二.Menu Anchor本身不显示任何东西 三.Menu Class:选择要弹出的UI,可以是任意的UserWidget ...