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`