javascript-DOM-节点
2019独角兽企业重金招聘Python工程师标准>>> 
1.Node类型
1-1. nodeName 和 nodeValue 属性
对于元素节点， nodeName 中保存的始终都是元素的标签名，而 nodeValue 的值则始终为 null。
1-2. 节点属性
每个节点都有一个 childNodes 属性，其中保存着一个 NodeList 对象。
每个节点都有一个 parentNode 属性，该属性指向文档树中的父节点。
childNodes 列表中的每个节点相互之间都是同胞节点。通过使用列表中每个节点的 previousSibling
和 nextSibling 属性，可以访问同一列表中的其他节点。
父节点的 firstChild 和 lastChild属性分别指向其 childNodes 列表中的第一个和最后一个节点。
hasChildNodes()在节点包含一或多个子节点的情况下返回 true；
所有节点都有的最后一个属性是 ownerDocument，该属性指向表示整个文档的文档节点。
1-3. 节点操作
appendChild() //这个方法接受一个参数新增节点
insertBefore() //这个方法接受两个参数：要插入的节点和作为参照的节点。
如果参照节点是null，则 insertBefore()与 appendChild()执行相同的操作
replaceChild() //这个方法接受两个参数是：要插入的节点和要替换的节点
removeChild()
cloneNode() //这个方法接受一个布尔值参数，表示是否执行深复制。
cloneNode()方法不会复制添加到 DOM 节点中的 JavaScript 属性，例如事件处理程序等。但IE中存在bug会全部复制
上述属性均需有父节点调用 返回所操作的节点
eg:
var returnedNode = someNode.appendChild(someNode.firstChild);
returnedNode = someNode.insertBefore(newNode, null);
var returnedNode = someNode.insertBefore(newNode, someNode.firstChild);
var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);
var formerFirstChild = someNode.removeChild(someNode.firstChild);
var deepList = myList.cloneNode(true);
2.Document类型
nodeType 的值为 9；
nodeName 的值为"#document"；
2-1.文档信息
//取得对<html>的引用
var html = document.documentElement;
//取得对<body>的引用
var body = document.body;
//取得文档标题
var originalTitle = document.title;
//取得完整的 URL
var url = document.URL;
//取得域名
var domain = document.domain;
//取得来源页面的 URL
var referrer = document.referrer;
2-2.查找元素
1)getElementById() 返回指定ID的单个值
2)getElementsByTagName() 返回的是包含零或多个元素的 HTMLCollection对象
3)HTMLCollection的属性
alert(images.length); //输出图像的数量
alert(images[0].src); //输出第一个图像元素的 src 特性
alert(images.item(0).src); //输出第一个图像元素的 src 特性
var myImage = images.namedItem("myImage");//取得指定名字的元素
var myImage = images["myImage"]; //取得指定名字的元素
4)要想取得文档中的所有元素，可以向 getElementsByTagName()中传入"*"。在 JavaScript 及 CSS
中，星号（*）通常表示“全部”。
var allElements = document.getElementsByTagName("*");
5)getElementsByName() 只有 HTMLDocument 类型才有的方法
返回一个 HTMLCollectioin。
6)document.anchors，包含文档中所有带 name 特性的<a>元素；
document.forms，包含文档中所有的<form>元素，与 document.getElementsByTagName("form")得到的结果相同；
document.images，包含文档中所有的<img>元素，与 document.getElementsByTagName("img")得到的结果相同；
document.links，包含文档中所有带 href 特性的<a>元素。
这个特殊集合始终都可以通过 HTMLDocument 对象访问到， 而且， 与 HTMLCollection 对象类似，
集合中的项也会随着当前文档内容的更新而更新。
2-3.文档写入
write()、 writeln()、 open()和 close()。
需要注意的是对于文档中的</script>应该转义为<\/script>。
3.Element类型
nodeType 的值为 1；
nodeName 的值为元素的标签名；
要访问元素的标签名，可以使用 nodeName 属性，也可以使用 tagName 属性
标签名比较时要注意大小写问题
if (element.tagName.toLowerCase() == "div"){ //这样最好
3-1.HTML 元素
1)每个 HTML元素中都存在的下列标准特性。
id，元素在文档中的唯一标识符。
title，有关元素的附加说明信息，一般通过工具提示条显示出来。
lang，元素内容的语言代码，很少使用。
dir，语言的方向，值为"ltr"（left-to-right，从左至右）或"rtl"（right-to-left，从右至左） ，也很少使用。
className，与元素的 class 特性对应，即为元素指定的 CSS 类。没有将这个属性命名为 class，
是因为 class 是 ECMAScript 的保留字（有关保留字的信息，请参见第 1 章）。
2)操作特性的DOM 方法主要有三个，分别是 getAttribute()、 setAttribute()和 removeAttribute()。
有两类特殊的特性，它们虽然有对应的属性名，但属性的值与通过 getAttribute()返回的值并不相同。
第一类特性就是 style 第二类与众不同的特性是 onclick
开发人员经常不使用 getAttribute()，而是只使用对象的属性。只有在取得自定义特性值的情况下，才会使用 getAttribute()方法。
3)attributes 属性
元素的每一个特性都由一个 Attr 节
点表示，每个节点都保存在 NamedNodeMap 对象中。 NamedNodeMap 对象拥有下列方法。
getNamedItem(name)：返回 nodeName 属性等于 name 的节点；
removeNamedItem(name)：从列表中移除 nodeName 属性等于 name 的节点；
setNamedItem(node)：向列表中添加节点，以节点的 nodeName 属性为索引；
item(pos)：返回位于数字 pos 位置处的节点。
4)创建元素
document.createElement(tagname)
由于新元素尚未被添加到文档树中，因此新增加的节点不会影响浏览器的显示
可以使用 appendChild()、 insertBefore()或 replaceChild()方法 将新节点加到文档树中
document.body.appendChild(div);
var div = document.createElement("<div id=\"myNewDiv\" class=\"box\"></div >");
通过直接以字符串形式创建新元素 可以避免ie7中出现的一些问题
5)元素也可以调用getElementsByTagName方法
4.Text类型
nodeType 的值为 3；
nodeName 的值为"#text"；
nodeValue 的值为节点所包含的文本；
appendData(text)：将 text 添加到节点的末尾。
deleteData(offset, count)：从 offset 指定的位置开始删除 count 个字符。
insertData(offset, text)：在 offset 指定的位置插入 text。
replaceData(offset, count, text)：用 text 替换从 offset 指定的位置开始到 offset+count 为止处的文本。
splitText(offset)：从 offset 指定的位置将当前文本节点分成两个文本节点。
substringData(offset, count)：提取从 offset 指定的位置开始到 offset+count 为止处的字符串。
4-1.创建文本节点
document.createTextNode 创建文本节点
document.createTextNode("<strong>Hello</strong> world!")
normalize()合并节点
element.normalize();
splitText()。分割文本节点
element.firstChild.splitText(5);
5.Comment类型
nodeType 的值为 8；
nodeName 的值为"#comment"；
nodeValue 的值是注释的内容；
document.createComment()创建注释节点
6.DocumentFragment文档片段类型
nodeType 的值为 11；
nodeName 的值为"#document-fragment"；
document.createDocumentFragment()创建文档片段
许多元素逐个添加时会导致浏览器反复渲染 可以先保存到文档片段 最后一起渲染
var fragment = document.createDocumentFragment();
fragment.appendChild(XXXX);
XXXElement.appendChild(fragment);
7.Attr类型
Attr 对象有 3 个属性： name、 value 和 specified。
name 是特性名称（与 nodeName 的值相同）
value 是特性的值（与 nodeValue 的值相同）
specified 是一个布尔值，用以区别特性是在代码中指定的，还是默认的。
document.createAttribute()创建新的特性节点
var attr = document.createAttribute("align");
attr.value = "left";
element.setAttributeNode(attr);
转载于:https://my.oschina.net/dajianguo/blog/887925
javascript-DOM-节点相关推荐
- JavaScript DOM节点
attributes属性: 返回该元素节点的属性节点集合. box.attributes //[object NamedNodeMap] box.attributes.length; //返回属性节点 ...
- javascript dom节点x
一,js 获取元素(父节点,子节点,兄弟节点) var test = document.getElementById("test"); var parent = test.pare ...
- ajax更改dom,javascript – 用Ajax响应替换DOM节点
我有一个ajax响应,看起来像这样: some other text 我想用resp替换下面的element1: 所以在替换后我会得到: some other text 我尝试了replaceChil ...
- html dom节点类型,浅谈Javascript中的12种DOM节点类型
前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组 ...
- Javascript元编程创建DOM节点
在使用javascript创建DOM节点的过程中,难免要使用document.createElement.setAttribute. document.createTextNode等冗长.还有浏览器兼 ...
- html dom 替换节点,从javascript dom文本节点替换
我正在使用javascript处理xhtml.我通过连接nodeType == Node.TEXT_NODE的所有子节点的nodeValue来获取div节点的文本内容.从javascript dom文 ...
- java dom 获得子元素_在JavaScript中删除DOM节点的所有子元素
我将如何删除JavaScript中DOM节点的所有子元素? 说我有以下(丑陋的)HTML: hello world 我抓住了我想要的节点,如下所示: var myNode = document.get ...
- JavaScript——DOM之节点操作
节点操作 前述: 一.节点的概述 二.节点操作 1.节点层级 2.案列-下拉菜单 3.兄弟节点 4.创建节点 5.删除节点 6.案列 :留言并且删除节点 7.复制节点 8.案例:动态生成表格 9.三种 ...
- JavaScript 插入Dom节点
大家好,今天我们来分享JavaScript 插入Dom节点 首先我们要知道, 不管我们对Dom节点进行什么样的操作,都必须先获取这个节点,假如说,这个dom节点是空的,我们可以通过innerHTML就 ...
- 【JavaScript】添加DOM节点
[JavaScript]添加DOM节点 原创刘甜- 最后发布于2019-03-24 19:59:39 阅读数 310 收藏 展开 HTML DOM树 当网页被加载时,浏览器会创建页面的文档对象模型( ...
最新文章
- POJ1094查分约束，判断关系是否唯一
- iphone屏幕突然变暗_iPhone或iPad在使用中发热厉害吗?以下是原因和解决方法
- CL_CRM_REPORT_QUESTION call CRM_REPORT_RF_CHECK_AUTHORITY
- glTF格式初步了解
- 如何在 C# 中使用 投影(Projection)
- 信息学奥赛C++语言：插队问题
- windows/browser ---- cmd命令/powershell命令/chrome插件vimuim命令
- 部署Java Web项目到Heroku
- 使用matplotlib画色斑图
- zblog博客模板-zblog插件免费-支持PHP以及ASP
- 不懂 CAN ？一文告诉你CAN协议！
- Android 图片控件ImageView
- M1芯片电脑安装cerebro
- 500左右降噪蓝牙耳机推荐，热门降噪蓝牙耳机排行榜推荐
- mini Vue的实现 Vue工作原理简析
- 规则引擎系列—初识规则引擎
- 线性代数：特征值、特征多项式和特征向量
- 第十届上海国际泵阀展多会议活动集中发力，邀您共赴6月泵阀盛会
- 无内鬼来点干货，银行java开发面试题（含答案）
- 已解决使用Python分割图片