DOM基础知识、元素获取、节点操作

1 Web APls

JavaScript的组成
ECMAScript
Web APls
BOM - 浏览器对象模型
一套操作浏览器功能的API
通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等
DOM - 文档对象模型
一套操作页面元素的API
DOM可以把HTML看作时文档树，通过DOM提供的API可以对树上的节点进行操作

2 DOM

2.1 基本概念

文档对象模型（Documnet Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口
它是一种与平台和语言无关的应用程序接口，它可以动态的访问程序和脚本，更新其内容、结构和文档的风格

2.2 DOM又称为文档树模型

1）概念
文档：一个网页可以称为文档
节点：网页中的所有内容都是节点（标签、属性、文本、注释）
元素：网页中的标签
属性：标签的属性
2）DOM常用操作
获取文档元素
对文档元素进行增删改查操作
事件操作

2.3 window和document

1）window
所有的浏览器都支持window对象，它支持浏览器窗口
所有的js全局对象、函数以及变量都能自动称为window对象的成员
全局变量是window对象的属性，全局函数是window对象的方法
2）document
document也是window对象的属性之一
document对象是documentHTML的一个实例，也是window对象的一个属性，因此可以将document对象作为一个全局对象来访问

常用属性

console.log(document);
console.log(document.childNodes);
console.log(document.head);
console.log(document.body);
docment.title = "测试";

//获取id

2.4 事件

1）事件
触发 - 响应机制
用户和浏览器之间的交互行为，比如：点击按钮，鼠标进入/离开
2）事件三要素
事件源：触发（被）事件的元素
事件名称：click点击事件
事件处理程序：事件出发后要执行的代码（函数形式）
3）使用方式

2.5 文档加载过程

浏览器加载页面是自上而下的顺序加载的
建议把script放在最后

2.6 文档页面元素获取

1）根据id获取元素
document.getElementById('string')
2）根据标签名获取元素
document.getElementsBytagName('string')[0]
3）根据name获取元素
document.getElementsByName('string')[0]
4）根据类名获取元素
document.getElementsByClassName('string')[0]
拿到的是一个集合（数组），因为class可以多次名命
5）根据选择器获取元素
document.querySelector('string')
document.querySelectorAll('string')[0]

2.7 节点之间的关系

    
    
        明日香
    
    

    

nodeType
每个节点都有一个 nodeType属性，用于表明节点的类型，节点类型由Node类型中定义12个常量表示

cea4acf9fbe243897ba5d613ca27974.png

//过滤
window.onload = function(ev) {
    //获取标签
    var box = document.getElementById('box');
    //获取标签内部的所有节点
    var allNodeLists = box.childNodes;
    //过滤元素节点
    var newListArr = [];
    allNodelists.forEach(function (value,index,array) {
        if(value.nodeType === 1) {
            newListArr.push(value);
        }
    });
}

2.8 节点操作

1）CRUD（增删改查）

    
MRX点我

2）节点属性操作
获取：getAttribute(名称);
设置：setAttribute(名称，值);
删除：removeAttribute(名称)

    
MRX点我