JavaScript系列---【DOM--知识总结】

DOM

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口(API)。 (DOM就是用来处理HTML机构)

节点

加载HTML页面时，web浏览器生成一个树型结构，用来表示页面内部结构，称之为DOM树，DOM将这种树型结构理解为由节点组成。

 

 

1.节点获取

获取到是具体对象，获取不到就返回null;

• 父元素.children; 获取元素子节点

  • 兼容问题:IE8及以下包含注释节点

• 父元素.childNodes;

  • 在标准浏览器下将换行和空格作为文本节点

  • IE8及以下不会将换行和空格作为文本节点 (文本元素后边空格作文了文本节点)

2.节点属性

nodeType（节点类型）	nodeName（节点名称）	NodeValue（节点值）
1 （元素节点）	大写的标签名	null
3 (文本节点)	#text	文本内容
8 （注释节点）	#comment	注释内容
9 （文档节点）	#document	null

 

3.节点获取的其它方式

只要能够直接获取到元素的存在兼容问题（IE8及以下不兼容，没有这个属性）

语法:元素.属性

属性分类:

• firstChild; 获取第一个节点

• lastChild; 获取最后一个子节点

• firstElementChild; 获取第一个元素节点

• lastElementChild; 获取最后一个元素子节点

• previousSibling；获取上一个相邻节点

• nextSibling；获取下一个相邻节点

• previousElementSibling；获取上一个相邻元素节点

• nextElementSibling; 获取下一个相邻元素节点

 

4.节点的操作

节点的操作：操作已经存在的节点会发生物理偏移

• 节点的创建

  • 创建元素节点

    • document.createElement("标签名");

  • 创建文本节点

    • document.createTextNode("文本内容");

      • 通过创建文本节点创建出来的是一个文本节点对象由属性和值组成

• 节点添加（在元素末尾进行添加）

  • 父亲节点.appendChild(添加内容);

• 节点插入

  • 父节点.insertBefore(插入节点,参考节点);

  • 没有参考元素 (就不需要参考)，第二个参数必须传递，一般传递null

• 节点替换

  • 父节点.replaceChild(替换节点,被替换节点);

• 节点的删除

  • 删除子节点

    • 父节点.removeChild(移除节点);

  • 删除节点本身(包括内容都被移除)

    • 节点.remove();

• 节点克隆

  • 节点.cloneNode([boolean]);

    • 参数的默认值是false 不传递就是fasle 只克隆节点本身（不包括内容）

    • 参数传递的true,将内容一起克隆

 

5.获取父亲节点

• parentNode; 获取父亲节点

• offsetParent; 获取已经定位的父集元素，如果没有已经定位的父集元素获取到的就是body

表格获取

// 1. 获取表格 table
var table = document.getElementsByTagName('table')[0];
console.log(table);
​
// 2. 获取表格头
console.log(table.tHead);
​
// 3. 获取表格脚
console.log(table.tFoot);
​
// 4. 获取表格体  可以有多个表格体  获取到的是一个集合
console.log(table.tBodies);
​
// 获取第一个表格体
console.log(table.tBodies[0]);
​
// 5. 获取表格中的行 
console.log(table.rows); // 表格中所有的行
console.log(table.tBodies[0].rows); // 第一个表格体中所有的行
​
// 6. 获取表格中的单元格  
// 表格由行组成        行由单元格    
// 单元格只能通过行来获取
console.log(table.tBodies[0].rows[0].cells);
​
console.log(table.cells); // undefined