JavaScript之DOM

 

 

javaScript的组成：ES（核心语法）、DOM、BOM。

1.DOM是专门操作HTML内容的API

DOM 是由W3C制定的标准

DOM：

核心DOM：能够操作所有结构化文档（html、xml）

万能 但是复杂、繁琐

HTMLDOM：专门操作HTML内容的API 常用的API进行简化

简单，不是万能。

 

网页中一切在内存中都是以树结构存储的，存储上下级包含关系非常直观。

HTML中每一个元素：元素、属性、文本 都是一个节点对象（Node）。

document对象是整颗树的根节点。

DOM是打通html、css和js壁垒的一个工具

HTML文档的DOM树：

加载HTML页面时，Web浏览器生成一个树形结构，用来表示页面内部结构。DOM将这种

树形结构称为节点组成的节点树。

 

一、节点对象三大属性：

1.nodeType number

专门区分节点的类型：

9 document

1 element

2 attribute

3 text

使用场景：需要区分节点类型的时候使用

2.nodeName(节点名) 字符串

document #document

element 全大写的标签名

attribute 属性名

文本节点 #text

使用场景：需要进一步区分元素的名称时使用

3.nodeValue(节点值)

document null

element null

attribute 属性值

text 文本的内容

 

DOM操作同样也是 增 删 改 查：

innerHTML 获取元素节点标签间的内容。还能解析标签。

window.onload = function () {
    var oDiv = document.getElementById('div1')
    oDiv.innerHTML = '<h1>我</h1>';//我
}

二、节点之间的关系

1.父子关系

node.parentNode 获取node节点的父节点

node.childNodes 获取node节点的所有子节点

node.firstChild 获取node节点下的第一个子节点

node.lastChild 获取node节点下的最后一个子节点

2.兄弟关系

node.previousSibling 返回当前节点的前一个兄弟节点

node.nextSibling 返回当前节点的下一个兄弟节点

三、元素之间的关系：（仅包含元素节点的树结构----不是一棵树，仅是节点数的子集）

1.父子关系

elem.parentElement 返回一个父元素对象

elem.children 返回一个子元素对象集合

elem.firstElementChild 返回第一个子元素对象

elem.lastElementChild 返回最后一个父子元素对象

2.兄弟关系

elem.previousElementSibling 返回当前节点的前一个兄弟元素

elem.nextElementsibling 返回当前节点的下一个兄弟元素

四、手写查找指定父节点下所有子代节点

1.先遍历所有直接子节点

利用递归算法：

function getChildren(parent){
    //如果parent不是文本节点，就输出节点名，否则输出节点值
    console.log(parent.nodeType = 3 ? parent.nodeName : parent.nodeValue);
    var children = parent.childrenNodes;
    var len = children.length;
    for(var i = 0; i< len; i++){
        var child = children[i];
        //如果子节点下还有节点，让这个节点调用函数
        getChildren(child);
    }
}

递归算法：深度优先遍历。每次都是优先遍历子节点，所有的子节点遍历完，才返回遍历兄弟节点

递归的效率极低。

2.利用迭代器

语法：

 

 

五、按照HTML查找

在整个页面或者父元素下，查找属性或标签符合条件的元素对象

有4种：

        1.id 只能用document调用。仅返回一个元素

var div = document.getElementById('box');
console.log(div);

控制台输出结果为：

      

         2.tagName 查找指定父元素下的指定标签元素。 任何父元素都可以调用

满足条件的值只有一个也会返回一个集合。没有符合条件的子节点，返回一个空数组

查找不仅只查直接子节点，而且查找所有后代节点。

     控制台输出为：