DOM模型

DOM：文档对象模型（ Document Object Model ），它的作用是将网页转为一个 js 对象

节点 `Node`

DOM的最小组成单位叫做节点

节点的类型有七种：

Document：整个文档节点（包含整个节点树）
DocumentType：文档声明类型
Element：元素节点，网页的各种HTML标签（、div、img等等）
Attribute：网页元素的属性（比如class="right"）
Text：标签之间或标签包含的文本
Comment：注释
DocumentFragment：文档的片段

根节点

document 根节点，文档的第一层只有一个节点

节点的关系

除了根节点，其他节点都有三种层级关系。

父节点关系

子节点关系

同级节点关系



  
  标题2

Node 接口的属性

所有 DOM 节点都继承了 Node 接口

Node.nodeType:

返回一个整数值，表示节点的类型，有以下类型：

document：9 表示文档
element: 1 表示元素
attr： 2 表示属性
text: 3 表示文本
DocumentFragment: 11 表示文档片段
DocumentType: 10 表示文档类型
Comment: 8 表示注释

你好

Node.nodeName:

你好

Node.nodeValue：

nodeValue属性返回一个字符串，表示当前节点本身的文本值

注意：该属性主要用于文本节点

var box = document.getElementById('box');
console.log( box.nodeValue );//null
console.log( box.childNodes[0].nodeValue );//您好

Node.textContent:

textContent属性返回当前节点和它的所有后代节点的文本内容。

自动忽略当前节点内部的HTML标签，提取文本内容，它和innerText功能一样

该属性可读可写


  您好
  
    张三

Node.baseURI：

返回一个字符串，表示当前网页的绝对路径

会受基础地址影响，而location.href不会。

console.log( document.baseURI );
//file:///F:/studyspace/web1905/javascript/dom.html

console.log( window.location.href );
//file:///F:/studyspace/web1905/javascript/dom.html

Node.ownerDocument：

返回当前节点所在的顶层文档对象，即document对象。

节点关系查找

父节点关系

Node.childNodes:

父节点下所有的子节点，注意包含文本、注释、元素节点
Node.children:

父节点下所有的子元素节点，只是元素节点

  
  一分
  二分
  三分
  四分
  五分

子节点关系

parentNode：

当前节点的直接的父节点
parentElement：

当前节点的直接的父元素节点

同级节点关系

Node.nextSibling：

下一个节点，注意包含文本、注释、元素节点
Node.nextElementSibling:

下一个元素节点，只是元素节点。

Node.previousSibling：

上一个节点，注意包含文本、注释、元素节点
Node.previousElementSibling：

上一个元素节点，只是元素节点。

综合的例子

  
  一分
  二分
  三分
  四分
  五分

经典面试题：请用至少3种办法生成一个随机不重复的字符串

// 方法1
var id = new Date().getTime();
console.log( id );

// 方法2
var str = Math.random().toString(36).slice(2);
console.log(str);

// 方法3
var str = 'abcdefghijkmnopqrstuvwxyzABCDEFGHIJKMNOPQRSTUVWXYZ0123456789';
var arr = str.split('');
var newArr = arr.sort(function(){
  return .5 - Math.random();
}).slice(0,20);
console.log( newArr.join('') );

// 方法4
var str = 'abcdefghijkmnopqrstuvwxyzABCDEFGHIJKMNOPQRSTUVWXYZ0123456789';
var arr = str.split('');
var temp = '';
for(var i=0;i



Node.isConnected

返回一个布尔值，表示当前节点是否在文档之中




Node 接口的方法

document.createElement

在文档中创建一个元素
语法：
document.createElement('标签名');

示例
var div = document.createElement('div');
console.log( div );//

综合示例
//1. 创建一个div元素
var div = document.createElement('div');

//2. 创建一个属性节点
var cls = document.createAttribute('class');

//3. 设置属性节点的值
cls.value = 'red';

//4. 把属性节点应用到目标元素上
div.setAttributeNode( cls );

//5. 创建注释
var zs = document.createComment('新的div');

//6. 将上面的注释添加到div的内部后面
div.appendChild( zs );

//7. 创建一个p标签
var p = document.createElement('p');

//8. 创建一个文本标签
var text = document.createTextNode('今天的天气有点阴沉！');

//9. 将文本节点追加到p标签内部的后面
p.appendChild( text );

//10. 将上面的p标签追加到div内部后面
div.appendChild( p );

//11. 输出新创建的节点
console.log( div );

使用JS标准API创建节点示例


示例




页码示例







Node.appendChild

往目标节点内部的后面插入新节点，返回被插入的新节点
var div = document.createElement('div');
div.innerText = '内容';
var text = document.createTextNode('段落');
div.appendChild( text );

console.log( div );// 内容段落

穿梭框效果
 
穿梭框效果


  陈旻
  李杰
  曾崇博
  邓聪
  钟旺
  邓绍志
  刘江湖
  代晨



    
    
    
    










代码片段








 Node.hasChildNodes：

注意：节点包含7种类型







 Node.cloneNode：

用于克隆一个节点。它接受一个布尔值作为参数，表示是否同时克隆子节点。它的返回值是一个克隆出来的新节点。
注意事项：

克隆一个节点，会拷贝该节点的所有属性，但是会丧失事件方法
该方法返回的节点不在文档之中，即没有任何父节点，必须使用诸如Node.appendChild这样的方法添加到文档之中。
克隆一个节点之后，DOM 有可能出现两个有相同id属性


  文本









 Node.insertBefore：

用于将某个节点插入父节点内部的指定位置，给参考节点外部前面插入新节点。
语法：
父节点.insertBefore( 新节点, 参考节点);

示例

DOM模型

DOM模型

节点 Node

根节点

节点的关系

标题2

Node 接口的属性

节点关系查找

父节点关系

子节点关系

同级节点关系

Node 接口的方法

穿梭框效果

你可能感兴趣的:(DOM模型)

节点 `Node`