javascript----DOM基础

DOM基础

一， DOM介绍

1, 【DOM】----【Document Object Model】 指的是：网页【文档对象模型】。

【D】 ---- 整个Web网页加载的【文档内容】

【O】 ---- 整个Web网页中的【对象】。
比如：document对象、DOM节点对象。

【M】 ---- Web网页中的【网页文档树形结构】

【作用】： 主要为处理和修改【网页各种文档】提供【应用程序接口】。

2, 节点

在加载HTML页面时，根据【标签】之间的【父子】、【兄弟】关系组成一个【树形结构】。DOM将【树形结构】看成，是由【不同类型节点】组成的。

【节点】可分为三类：

1 元素节点 ： 其实就是【标签】。

2 文本节点 ： 其实就是【标签】内的【纯文本】。

3 属性节点 ： 其实就是【标签】内的【行内属性】

二， 查找元素:

1， getElementById() 获取“特定ID元素”的节点

2， getElementsByTagName() 获取“相同元素”的节点列表

3， getElementsByName() 获取“相同name名称”的节点列表

三， DOM节点

节点可以分为元素节点、属性节点和文本节点，而这些节点又有三个非常有用的属性，分别为：nodeName、nodeType和 nodeValue。

nodeName ----- 获取【节点的名称】
nodeType ----- 获取【节点的类型值】 元素节点–1；属性节点–2 文本节点–3
nodeValue ---- 获取【节点的值】

1,元素节点

tagName ---- 获取【元素节点】的【标签名】

innerHTML --------获取【元素节点】内部【所有内容】

innerText -----获取【元素节点】内部【纯文本】

id ----- 获取、设定【元素节点】的【id值】

title ----- 获取、设定【元素节点】的【title值】

className ----- 获取、设定【元素节点】的【class值】

style ---- 获取、设定【元素节点】的【style值】

节点.属性名 ------获取【元素节点属性的值】
节点[‘属性名’] ------获取【元素节点属性的值】

  getAttribute()  ------获取【元素节点属性的值】

  setAttribute() ---- 设置【元素节点属性的值】

removeAttribute() ------移除“特定元素节点属性”

2，层次节点属性

childNodes ----- 元素子节点集合。 IE与W3C有兼容 需与nodeType配合
children -----元素子节点集合。

firstChild \firstElementChild ------ 获取元素第一个子节点 IE与W3C有兼容

lastChild \lastElementChild ------ 获取元素最后一个子节点 IE与W3C有兼容

  parentNode               ----- 获取【元素节点】的【父节点】

  removeChild('元素节点')     ------移除【元素节点】  -----【父节点】操作

  例如： x.parentNode.removeChild(x)



  previousSibling\previousElementSibling   -----  获取元素的【同一级别】的前一节点

  nextSibling \ nextElementSibling          ----  获取元素的【同一级别】的后一节点

3，属性节点属性：

   attributes ---------------  获取【当前节点】的【属性节点】集合列表 

   attributes['属性名']          ------  获取【某一属性节点】
                          
   attributes['属性名'].nodeName ------  获取【某一属性节点】的【属性名】
                    
   attributes['属性名'].nodeType ------  获取【某一属性节点】的【属性类型】

   attributes['属性名'].nodeValue ------ 获取【某一属性节点】的【属性值】 

四， 节点操作

包括：“创建节点”、“复制节点”、“插入节点”、“删除节点”、“替换节 点”等方法

1， createElement() ---- 创建一个【元素节点】 ------作用于document对象

2， appendChild() ----将【新节点】追加到【某个节点】内部【“子节点”列表末尾】

3, insertBefore() ---- 将【新节点】插入在【“特定”节点】的前面 -------父节点操作

                     父节点.insertBefore(新节点,特定节点)

4， replaceChild(‘新节点’,’旧节点’) ----将【新节点】替换【旧节点】 -------父节点操作

                      父节点.replaceChild(新节点,旧节点)

5， removeChild() ---- 移除节点-------父节点操作

五，-创建【“元素节点”和“文本节点”和“属性节点”】的区别：

   创建“元素节点”-----  createElement()  ------作用于document对象

   创建“文本节点”-----  createTextNode() ------作用于document对象
   
   创建“属性节点”-----  .新属性 = '新属性值'   或  setAttribute(‘属性名’,’属性值’)