JavaScript 学习第九天 DOM 操作

js组成：

​ ECMAScript：语法标准

​ DOM：Document Object Model ： 文档对象模型 （操作标签）

​ BOM：Broswer Object Model：浏览器对象模型

DOM介绍

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

节点介绍

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

node：节点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8RVbQY7x-1573134037913)(file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml8108\wps1.jpg)]

1、获取节点

获取子节点

语法：

父节点.children : 非标准属性（一般用这个）

父节点.childNodes : 标准属性

//1.1 父节点.children  非标准属性，兼容各个浏览器
var c1 = oUl.children;
console.log(c1); //HTMLCollection(3)

//1.2 父节点.childNodes 标准属性 ，获取标签和文本节点
var c2 = oUl.childNodes;
console.log(c2); //NodeList(7) : 类似数组

节点类型

节点类型：标签节点（li），文本节点（text），属性节点，注释节点（comment）

节点基本属性

nodeType:返回节点类型 1–标签, 2–属性 3–文本节点

nodeName：节点名称

nodeValue：节点内容（只有文本节点可以使用）

//nodeType ： 判断节点类型   1-标签节点  2-属性节点  3-文本节点  8-注释节点
console.log(c2[0].nodeType);//3 ---文本节点
console.log(c2[1].nodeType);//1 ---标签节点
console.log(c2[7].nodeType);//8 ---注释节点

//nodeName : 节点名称
console.log(c2[0].nodeName);//#text
console.log(c2[1].nodeName);//Li
console.log(c2[7].nodeName);//#comment

//nodeValue：操作节点内容，只有文本节点使用这个属性有意义
c2[0].nodeValue = "哈哈哈哈，还有半个小时就吃饭了";

获取父节点

语法：

子节点.parentNode ：获取直接父节点

子节点.offsetParent：获取定位父节点 如果没有定位父节点，获取到body

//1.获取直接父节点  子节点.parentNode
console.log(oSpan.parentNode.parentNode);

//2.获取定位父节点 子节点.offsetParent,如果没有定位父节点，获取到body
console.log(oSpan.offsetParent);

2、操作节点

 1、获取
        获取子节点：
            父节点.children : 非标准属性，一般用这个  只是标签
            父节点.childNode: 标准属性  获取到标签和文本节点
        获取父节点：
            子节点.parentNode : 获取直接父节点 
            子节点.offsetParent:获取定位父节点，没有定位父节点，获取到body
        获取首尾节点：
            父节点.firstElementChild || 父节点.firstChild       
            父节点.lastElementChild || 父节点.lastChild   
        获取兄弟节点：
            参考节点.nextElementSibling ||参考节点.nextSibling
            参考节点.previousElementSibling ||参考节点.previousSibling
    2、创建节点
        创建标签节点：document.createElement('节点名称')    
        创建文本节点：document.createTextNode('文本内容'')  
     
    3、添加节点
        追加：在父元素的末尾添加
            父元素.appendChild(标签)
        在某个元素之间加入
            父元素.insertBefore(newChild,refChild)
    4、删除
       节点.remove() : 删除自己本身  ie不兼容
       父节点.removeChild(子节点)：删除父元素里面的一个子节点
    5、替换
       父元素.replaceChild(newChild，refChild)
    6、复制
       节点.cloneNode(true);      
       

    7、DOM获取标签  id tagName className
       document.querySelector(选择器)
       document.querySelectorAll(选择器)
       注意：document.querySelector兼容ie8及以上，并且不能动态获取

3、操作节点属性

设置：标签.setAttribute(“属性名”,“属性值”)

获取：标签.getAttribute(“属性名”)

可以获取到自定义属性

4、DOM操作表格

var oTab = document.getElementsByTagName("table")[0];

//1.获取thead
console.log(oTab.tHead);

//2.获取tfoot
console.log(oTab.tFoot);

//3.获取tbody
console.log(oTab.tBodies[0]); //HTMLCollection

//4.获取行 rows
console.log(oTab.rows); //HTMLCollection(4) [tr, tr, tr, tr]
console.log(oTab.tBodies[0].rows); //HTMLCollection(3) [tr, tr, tr]  tbody里面的行

//5.单元格cell : 单元格只能通过行获取
console.log(oTab.rows[1].cells);