bob体育官方平台

javascript DOM 总结

DOM

图片 1

一张图告诉你什么是DOC

Node

Node是一个接口,中文叫节点,很多类型的DOM元素都是继承于它,都共享着相同的基本属性和方法。常见的Node有 element,text,attribute,comment,document 等(所以要注意 节点 和 元素 的区别,元素属于节点的一种)。

Node有一个属性 nodeType 表示Node的类型,它是一个整数,其数值分别表示相应的Node类型,具体如下:

 

  1. {  
  2.     ELEMENT_NODE: 1, // 元素节点  
  3.     ATTRIBUTE_NODE: 2, // 属性节点  
  4.     TEXT_NODE: 3, // 文本节点  
  5.     DATA_SECTION_NODE: 4,  
  6.     ENTITY_REFERENCE_NODE: 5,  
  7.     ENTITY_NODE: 6,  
  8.     PROCESSING_INSTRUCTION_NODE: 7,  
  9.     COMMENT_NODE: 8, // 注释节点  
  10.     DOCUMENT_NODE: 9, // 文档  
  11.     DOCUMENT_TYPE_NODE: 10,  
  12.     DOCUMENT_FRAGMENT_NODE: 11, // 文档碎片  
  13.     NOTATION_NODE: 12,  
  14.     DOCUMENT_POSITION_DISCONNECTED: 1,  
  15.     DOCUMENT_POSITION_PRECEDING: 2,  
  16.     DOCUMENT_POSITION_FOLLOWING: 4,  
  17.     DOCUMENT_POSITION_CONTAINS: 8,  
  18.     DOCUMENT_POSITION_CONTAINED_BY: 16,  
  19.     DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32  
  20. }  

 

 

一直以为DOM是JS中最简单的一部分。不可否认,它确实很简单,因为DOM的思维模式有点固定,只需要简单地记住一些固定的方法,所以DOM可以说是所有js入门的起手点。

概念

Document Object Model

  • 文档对象模型
  • DOW 是针对HTML 和XML 文档的一个api ,
  • DOM 中描述了一个层级化的节点树,
  • 允许开发人员进行添加,移除和修改页面中的某一部分
  • W3C 中的DOM 标准化分为三部分
  1. 核心DOM - 针对任何结构化文档的标准模型
  2. XML DOM - 针对XML结构化文档的标准模型
  3. HTML DOM - 针对HTML 文档的标准模型
  • HTML DOM 是关于如何获取,修改,添加 或者删除
  • HTML 元素的标准,即操作HTML 元素
    • api: 应用程序编程接口
<html>
<head>
<title>DOM</title>
</head>
<body>

</body>
</html>

获取的信息:

  1. Document 节点是每一个文档的根节点
  2. Document 节点下 有一个HTML 节点
  • 我们将这个节点称为文档元素
  • 文档元素是文档最外层的元素,其他的
  • 元素都包含在文档元素之中
  • 一个文档只能有一个文档元素,在HTML
  • 中,文档元素永远是<html>元素
  1. 在DOW 数中,html文档的每一处标记
  • 都可以用树中的一个节点来表示
  • html元素标签-元素节点来表示
  • 属性-> 属性节点 来表示
  • 文档类型-> 文档类型节点 来表示
  • 注释-> 注释节点 来表示
    • 这部分是作为前期需要做好的铺垫内容
    • 通用的 Document 和 Element 类型 与
    • HTMLDocument 和 HTMLElement 是有区分的
    • Document 只代表一个 HTML 或者 XML 文档

    • Element 类型代表的是该文档的一个元素

    • HTMLDocument 和 HTMLElement 子类

    • 只针对 HTML 文档 和 元素

DOM 中 节点分类(12种类型)需要记的(需要记住)
可以在网上查到

    /*
     需要记住的文档类型节点
     * 
     * 1.元素     Node.ELEMENT_NODE
     * 2.属性     Node.ATTRIBUTE_NODE
     * 3.文本     Node.TEXT_NODE
     * 4.注释     Node.COMMENT_NODE
     * 5.文档     Node.DOCUMENT_NODE
     * */

Node.ELEMENT_NODE //元素
Node.ATTRIBUTE_NODE //元素中的属性
Node.TEXT_NODE //纯文本(没有子节点)
Node.CDATA_SECTION_NODE //子节点是TextNode
Node.ENTITY_REFERENCE_NODE
//文档中的实体引用
Node.ENTITY_NODE
//DTD 中实体定义
Node.PROCESSING_INSTRUCTION_NODE
//一个文档处理程序中
//使用的特有指令
Node.COMMENT_NODE
//注释
Node.DOCUMENT_NODE
//最外层的 根节点
Node.DOCUMENT_TYPE_NODE
//文档类型定义
Node.DOCUMENT_FRAGMENT_NODE
//更小型的 Document 节点
//定义这个数据类型主要是为
//了方便只希望提取文档的
//某一部分时使用
Node.NOTATION_NODE
//DTD 的 Nation 定义
//在 XML 文档中表示一个符号

节点属性
1. nodeName
 节点名称
* nodeName 是只读的
* nodeName 始终包含HTML 元素的大小写字母 标签名

2. nodeValue
    节点
    或者进行设置或返回节点的值

3. nodeType
节点的类型

## DOM核心对象-document 对象
 JS 中是通过Document 类型来表示文档
 在浏览器中,document 的对象是HTMLDocument
 表示整个HTML界面
 而且document 对象是 window对象各个属性
 我们可以将其当做全局对象来访问

 nodeType: 9(上面的内容第九个)
 nodeName: #document
 nodeValue: null
 parentNode:null(父节点)
 ownerDocument:null (根元素节点)
## 获取节点
document对象来获取页面有关的信息

<body>
<h1>我是标题</h1>

<script>
document.getElementById("myH1");//获取节点
console.log(h1.id); // 元素的id
console.log(h1.className);// 元素的class
console.log(h1.innerHTML);// 元素的HTML文本

</script>

1. 使用该方法一定不要查找多个id
2. 如果有多个相同的id,则只会返回一个元素
3. 在低于IE 8 的版本,对匹配元素的ID不区分大小写

var h1s =
document.getElementById("h1");
console.log(h1s);
for(var i = 0;i < h1s.length;i++){
console.log(h1s[i].id);//获取id
console.log(h1s.item(i).id);//获取id
console.log(h1s[i].id);//获取id
}

该方法是根据标签名称来获取元素节点
* 因为一个文档中可能出现多个标签
* 所以该方法返回的是多个Element组成的集合
* 尽量使用getElementById()
* 
### NodeList 对象(NodeList: 节点列表)
类数组集合
* 返回的是一个只读 类数组对象
* 他们拥有length属性
* 也可以像数组一样索引


## 获取元素
写from 标签的时候
一个内容,如果多个用input表单

<body>
<from ..>
<input type=""name=""id=""value=""/>洗澡
<input type=""name=""id=""value=""/>喝水
<script ..>
var name =
document.getElementsByName("input_name");
for(var i = 0;i<name.length;i++){
console.log(names[i].value)
}
</script>

 是通过标签的name 属性的值来获取元素
 可能出现多个相同的name值,
 所以返回是一个Element 组成的集合 
 有严重的兼容性问题, 
在IE中

## 获取元素querySelector(CSS 的选择器)

<title>Document</title>
</head>
<body>
<p id="demo"></p>
</body>
<script ..>
var p_1 = document。querySelector("#demo");
console.log(p_1);

对应一个选择器,特别好用

### querySelector(CSS 的选择器)
参数;
* CSS 选择器
  * 指定一个或者多个匹配的CSS 选择器
    *  id,class,类型 属性

* 返回值

<body>
</body>
<script>
var p_1 =
document.querySelector(".id")

### querySelectorAll()
返回所有匹配的元素

HTML5 中引入的

返回不是实时,返回的是调用时刻所匹配的内容

* :hover、:visitited 去访问到用户的浏览器习惯等
* 很多浏览器会直接拒绝使用这个内容

<body>
快捷方式
</body>
<script..>
var all = document.querySelectorALL(".p_1");
console.log(all);
console.log(all.length);
console.log(all[1]);

![元素关系图](http://upload-images.jianshu.io/upload_images/4166371-f294ca46dda64bef.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

### 6_Note 获取操作

元素关系
1. 父元素
2. 子
3. 兄弟关系
4. 父子关系

1. 父节点 (parent)
* 父节点拥有任意数量的子节点
2. 子节点 (child)
3. 兄弟节点(sibling)
*  自己百度吧 有图 节点操作
4. 根节点 (root)
* 根节点不可能有父节点
* 只能存在一个
* 一个文档中的“源头”

### 7_childNodes.html
childNodes
* 获取一个元素的所有的子节点
* 返回值是一个数组
* 只获取子节点,不能获取到子节点的子节点

<body>
<div id="div">//获取拓展时会再说,有问题,但可以看到
<a href="###">简书</a>
</div>
div>
<a href="###">有道云</a>
</div>
div>
<a href="###">微博</a>
</div>
<script ..>
var nodes =
document.getElementById("div").childNodes;
console.log(nodes);
for(var i=0;i<nodes.length;i++){
console.log(nodes[i].n...
}

firstChild 属性
* 获取元素的第一个子节点
 如果选定的节点没有子节点,
 则直接返回null

var div = document.getElementById("div");
//获取第一个子节点
var firstChild = div.firstChild;

console.log(firstChild);
console.log(firstChilld.nodeName);

var lastChild=

可以写函数判断,也可以通过挪动下位置


## 8_parentNode 属性
获取一个元素的父节点

<body>
<div id="div">
<a href="###">搜狐</a>

<sc..>
var div = document.getElementById("div");
var node_1 = div.parentNode;
console.log(node_1)
....

图面展示...


## previousSibling 
获取一个元素的上一个兄弟节点

var div1 =document.getElementById("div1");
var previousSibling = div1...

跟上一部分是相关的。
找到它的上一个兄弟。

## nextSibling
获取一个元素的下一个兄弟节点

var nextSling = div1.nextSibling;
console.log(nextSibling)

拓展:
1. 获取一个节点所在的文档的根节点

元素节点名称.ownerDocument

实际上相当于当前整个文档节点



2. 获取当前节点所有的属性节点

元素节点名称。attributes;

console.log(div1.attributes)

# 9_关于获取元素的拓展(比较重要)
在IE 9 以下,当前内容通过alert()弹出当前
节点的 firstChild 实际上应该为 p 

但是在现代浏览器中,比如 Chrome , FF iell 等等
将会<div> </div>之间的空白节点也解析出来
所以通过alert 弹出的 #text

因为空白节点也是属于text 文本节点

但是如果将多个标签中的空白内容删除
在不同浏览器,来去解决这个问题

function getFirst(elem){
for(var i = 0,e; e = elem.chilNodes[i++];){
if(e.nodeType ==1){
return e;
}//做判断
}
}
var first =
document.getElementsByTagName("div")[0];
console.log(first);

我们经常会选择区用一个方法直接获取父元素的
第一个节点,
DOM中直接拓展了一个新的方法
farstElementChild

console.log(farstElementChild);

但是,拓展的方法 farstElementChild
在现代浏览器中兼容,但是在IE6/7/8中
没有该方法
一旦使用会报错

children

 不是标准属性,返回指定元素的子元素集合
 但是它只返回HTML节点,甚至不会返回文本节点

 虽然不是标准DOM,但是和innerHTML,一样,等到了几乎所有浏览器支持

和childNodes 一样,在Firefox 中不支持
直接

console.log(farst children[0]);

nextSibling --> farstElementChild
lastChild --> lastElementChild
nextSibling --> farstElementChild
previousSibling --> previousElementChild

## 修改:
1. 创建文本节点
createTextNode()
    1. createTextNode(text)
创建文本节点
2. 添加一个child 元素 appendChild()
3. 创建一个新的元素节点createElement()
4. 在一个节点之前插入新的节点insertB..
5. 移除子节点
6. 替换子节点
7. 克隆节点

var textNode = document.createTextNode("谢聃");
console.log(textNode.nodeName);
console.log(textNode.nodeV..e);

appendChild(node)
参数:
* node 
    * 需要添加的节点
    * 必选参数
* 返回值:
    * 参数对象本身
* append翻译过来是 追加
* 。。

var div = document.getElementById("div");
div.app..(textNode);

createElement(nodeName)
创建一个元素节点
* 参数:
    * nodeName
    * 需要创建元素的名称
* 返回值:
    * 创建的元素节点

var newElement = document.createElement("a");

insertBefore(newNode,existingNode)

在一个节点前面插入一个新的节点

参数:
* newNode
    * 需要插入的新的节点
* 。。。。
* 目标节点

<div id= "div"></div>
<ul id="language">
<li>java</li>
<li>c#</li>
</ul>
<buttom onclick="此处填写相应的英文()"
<buttom onclick="cloneNode(deep)">克隆</buttom>

<sc..>
function addNode(){
var newItem=
document.createElement("li");
}

removeChild(node)
移除子节点

参数:
* node 
    * 必选参数
    * 需要移除的子节点

function removeNode(){
var languageList = document.getElementById("language");
var li_List = languageList.getElementsByTagName("li");

console.log(li_List);
languageList.removeChild(li_List[0]);
console.log(li_List.length);
}

获取相应的节点,然后在移除
调用,button 小按钮 在上面的 <body>

function addNode(){
var newItem = document.createElement("li");
var textNode_2 = document.createTextNode("JavaScript");
newItem.appendChild(textNode_2);
var languageList = document.getElementById("language");
//将 newItem 添加到 language 列表中
languageList.insertBefore(newItem,languageList.firstChild);
}

替换子节点
replaceChild(newNode,oldNode)

参数
* newNode
    * 新节点 
* oldNode
    * 旧节点 

    function replaceNode(){
        var languageList = document.getElementById("language");
        var newLi = document.createElement("li");
        newLi.innerHTML = "NodeJS";
        //使用新的节点替换旧的节点
        languageList.replaceChild(newLi,languageList.childNodes[0]);
    }

克隆节点
cloneNode(deep)
*  该方法可以用于创建指定的节点的精确拷贝
*  拷贝所有的属性和属性值

该方法将赋值并返回它的节点的副本

function cloneNode(){
var languageList =
documment.getElementById("language");

var newList.cloneNode(ture)

}

完整代码

    function cloneNode(){
        var languageList = document.getElementById("language");
        //克隆整个 languageList 节点
        //传入的参数如果为 true
        //则代表深拷贝
        //所有的子节点都 copy 下来
        var newList = languageList.cloneNode(true);
        document.getElementsByTagName("body")[0].appendChild(newList);
    }

##  元素属性操作
### 1. 获取属性值 getAttibute()
attributName
* 获取元素的某个属性名称
* id、classname
* 返回值:
    * 获取指定属性的属性值 

<body>
<a href="http://www.baidu.com" id = "a_id"
target=""

<sc..>
function getShuXing(){
var a = document.getElementById("a_id");
console.log("id = " + a.getAttribute("id") + "ntarget = " + a.getAttribute("target"));
}

### 2. 设置属性值  setAttibute()
作用:
* 创建或者更改某个值
* 如果存在,则设置该值就可
* 不存在,则创建该属性并设置该属性值

function setShuXin(){
var a = document.getElementById("a_id");
a.setAttribute("href","http://www.yztcedu.com");
}

将百度已换成育知同创


### 3. 移除属性值.. retAttibute()
AttributName
* 必选参数
* 需要移除的属性名称

function removeShuXin(){
        var a = document.getElementById("a_id");
        a.removeAttribute("target");
}

### 4. 检查是否包含某个属性 hasAttribute()
hasAttribute() 
* 检查是否包含某个属性
去前面方法的需要检查的名称
返回值为ture/false
判断

console.log(document.getElementById("a_id").hasAttribute("target"));

如果操作中包含来自其他空间属性的XML文档的时候,在当前四个方法后面+NS(命名空间)
四个方法的空间版

NodeList

NodeList 对象是一个节点的集合,一般由 Node.childNodes 、 document.getElementsByName 和 document.querySelectorAll 返回的。

不过需要注意, Node.childNodes 、 document.getElementsByName 返回的 NodeList 的结果是实时的(此时跟HTMLCollection比较类似),而 document.querySelectorAll 返回的结果是固定的,这一点比较特殊。

举例如下: 

 

  1. var childNodes = document.body.childNodes;  
  2. console.log(childNodes.length); // 如果假设结果是“2”  
  3. document.body.appendChild(document.createElement('div'));  
  4. console.log(childNodes.length); // 此时的输出是“3”  

 

 

最近我在做一些有用到DOM的练习时,发现自己的DOM知识非常零散,可能有很多朋友都觉得,DOM嘛,也就调用调用几个方法,或者我直接使用jQuery,根本不用考虑DOM的细节。是,这也没错,jQuery对DOM的封装可谓前无古人,但是正如成长一样,跑之前是一定要会走的,所以我认为对DOM必须要有比较详细的了解,于是我总结了如下的关于DOM的一些使用方法。

HTMLCollection

HTMLCollection是一个特殊的NodeList,表示包含了若干元素(元素顺序为文档流中的顺序)的通用集合,它是实时更新的,当其所包含的元素发生改变时,它会自动更新。另外,它是一个伪数组,如果想像数组一样操作它们需要像 Array.prototype.slice.call(nodeList, 2) 这样调用。

在W3C总结跪DOM规范中,有一些十分常用的,也有些不怎么有用的,这里我们主要讨论常用一些DOM操作:

节点查找API

  • document.getElementById :根据ID查找元素,大小写敏感,如果有多个结果,只返回第一个;

  • document.getElementsByClassName :根据类名查找元素,多个类名用空格分隔,返回一个 HTMLCollection 。注意兼容性为IE9+(含)。另外,不仅仅是document,其它元素也支持 getElementsByClassName 方法;

  • document.getElementsByTagName :根据标签查找元素, * 表示查询所有标签,返回一个 HTMLCollection 。

  • document.getElementsByName :根据元素的name属性查找,返回一个 NodeList 。

  • document.querySelector :返回单个Node,IE8+(含),如果匹配到多个结果,只返回第一个。

  • document.querySelectorAll :返回一个 NodeList ,IE8+(含)。

  • document.forms :获取当前页面所有form,返回一个 HTMLCollection ;

节点层次

节点创建API

节点创建API主要包括 createElement 、 createTextNode 、 cloneNode 和 createDocumentFragment 四个方法。

所谓节点层次,指的是html文档中存在具有各自特点,数据,方法的节点,节点之间的关系构成了层次。W3C的DOM1级规范中定义了一个NODE接口。这个接口有一些方法是非常有用的:

createElement

创建元素: 

 

  1. var elem = document.createElement("div");  
  2. elem.id = 'test';  
  3. elem.style = 'color: red';  
  4. elem.innerHTML = '我是新创建的节点';  
  5. document.body.appendChild(elem);  

 

通过 createElement 创建的元素并不属于 document 对象,它只是创建出来,并未添加到html文档中,要调用 appendChild 或 insertBefore 等方法将其添加到HTML文档中。

Node.ELEMENT_NODE;

createTextNode

创建文本节点: 

 

  1. var node = document.createTextNode("我是文本节点");  
  2. document.body.appendChild(node);  

 

 

Node.TEXT_NODE;

cloneNode

克隆一个节点: node.cloneNode(true/false) ,它接收一个bool参数,用来表示是否复制子元素。

  1. var from = document.getElementById("test");  
  2. var clone = from.cloneNode(true);  
  3. clone.id = "test2";  
  4. document.body.appendChild(clone);  

 

 

克隆节点并不会克隆事件,除非事件是用 <div onclick="test()"></div> 这种方式绑定的,用 addEventListener 和 node.onclick=xxx; 方式绑定的都不会复制。

Node.DOCUMENT_NODE

createDocumentFragment

本方法用来创建一个 DocumentFragment ,也就是文档碎片,它表示一种轻量级的文档,主要是用来存储临时节点,大量操作DOM时用它可以大大提升性能。

假设现有一题目,要求给ul添加10000个li,我们先用最简单的拼接字符串的方式来实现:

  1. <ul id="ul"></ul>  
  2. <script>  
  3. (function()  
  4. {  
  5.     var start = Date.now();  
  6.     var str = '';  
  7.     for(var i=0; i<10000; i++)   
  8.     {  
  9.         str += '<li>第'+i+'个子节点</li>';  
  10.     }  
  11.     document.getElementById('ul').innerHTML = str;  
  12.     console.log('耗时:'+(Date.now()-start)+'毫秒'); // 44毫秒  
  13. })();  
  14. </script>  

 

 

再换逐个append的方式,不用说,这种方式效率肯定低:

  1. <ul id="ul"></ul>  
  2. <script>  
  3. (function()  
  4. {  
  5.     var start = Date.now();  
  6.     var str = '', li;  
  7.     var ul = document.getElementById('ul');  
  8.     for(var i=0; i<10000; i++)  
  9.     {  
  10.         li = document.createElement('li');  
  11.         li.textContent = '第'+i+'个子节点';  
  12.         ul.appendChild(li);  
  13.     }  
  14.     console.log('耗时:'+(Date.now()-start)+'毫秒'); // 82毫秒  
  15. })();  
  16. </script>  

 

 

最后再试试文档碎片的方法,可以预见的是,这种方式肯定比第二种好很多,但是应该没有第一种快:

  1. <ul id="ul"></ul>  
  2. <script>  
  3. (function()  
  4. {  
  5.     var start = Date.now();  
  6.     var str = '', li;  
  7.     var ul = document.getElementById('ul');  
  8.     var fragment = document.createDocumentFragment();  
  9.     for(var i=0; i<10000; i++)  
  10.     {  
  11.         li = document.createElement('li');  
  12.         li.textContent = '第'+i+'个子节点';  
  13.         fragment.appendChild(li);  
  14.     }  
  15.     ul.appendChild(fragment);  
  16.     console.log('耗时:'+(Date.now()-start)+'毫秒'); // 63毫秒  
  17. })();  
  18. </script>  

 

 

而每个节点都有自己的节点类型标志,也就是NodeType属性,例如元素节点的nodeType == '1';文本节点的nodeType == '3';文档节点的nodeType == '9';

节点修改API

节点修改API都具有下面这几个特点:

  1. 不管是新增还是替换节点,如果其原本就在页面上,那么原来位置的节点将被移除;
  2. 修改之后节点本身绑定的事件不会消失;

1.文档节点

appendChild

这个其实前面已经多次用到了,语法就是:

parent.appendChild(child);

它会将child追加到parent的子节点的最后面。另外,如果被添加的节点是一个页面中存在的节点,则执行后这个节点将会添加到新的位置,其原本所在的位置将移除该节点,也就是说不会同时存在两个该节点在页面上,且其事件会保留。

文档节点在一个文档中用document对象表示,它的基本特征如下:

insertBefore

将某个节点插入到另外一个节点的前面,语法:

  1. parentNode.insertBefore(newNode, refNode);  

 

这个API个人觉得设置的非常不合理,因为插入节点只需要知道newNode和refNode就可以了,parentNode是多余的,所以jQuery封装的API就比较好:

  1. newNode.insertBefore(refNode); // 如 $("p").insertBefore("#foo");  

 

 

所以切记不要把这个原生API和jQuery的API使用方法搞混了!为了加深理解,这里写一个简单的例子:

  1. <div id="parent">  
  2.     我是父节点  
  3.     <div id="child">  
  4.         我是旧的子节点  
  5.     </div>  
  6. </div>  
  7. <input type="button" id="insertNode" value="插入节点" />  
  8. <script>  
  9. var parent = document.getElementById("parent");  
  10. var child = document.getElementById("child");  
  11. document.getElementById("insertNode").addEventListener('click', function()  
  12. {  
  13.     var newNode = document.createElement("div");  
  14.     newNode.textContent = "我是新节点";  
  15.     parent.insertBefore(newNode, child);  
  16. }, false);  
  17. </script>  

 

 

关于第二个参数:

  • refNode是必传的,如果不传该参数会报错;
  • 如果refNode是undefined或null,则insertBefore会将节点添加到末尾;
console.log; // 9 console.log; // #document console.log; // null console.log; // null 

removeChild

removeChild用于删除指定的子节点并返回子节点,语法:

  1. var deletedChild = parent.removeChild(node);  

 

 

deletedChild指向被删除节点的引用,它仍然存在于内存中,可以对其进行下一步操作。另外,如果被删除的节点不是其子节点,则将会报错。一般删除节点都是这么删的:

 

  1. function removeNode(node)  
  2. {  
  3.     if(!node) return;  
  4.     if(node.parentNode) node.parentNode.removeChild(node);  
  5. }  

 

 

1.document.documentElement可以取到html对象,同样可以通过document.childNodes[0]以及document.firstchild取到。然而 documentElement可以更快,更直接访问元素。

replaceChild

replaceChild用于将一个节点替换另一个节点,语法:

 

  1. parent.replaceChild(newChild, oldChild);  

 

1.取得文档标题 : document.title;

节点关系API

DOM中的节点相互之间存在着各种各样的关系,如父子关系,兄弟关系等。

2.取得完整的url : document.URL;

父关系API

  • parentNode :每个节点都有一个parentNode属性,它表示元素的父节点。Element的父节点可能是Element,Document或DocumentFragment;
  • parentElement :返回元素的父元素节点,与parentNode的区别在于,其父节点必须是一个Element元素,如果不是,则返回null;
返回顶部