一、DOM

JavaScript语言核心。变量的定义、变量的类型、运算符、表达式、函数、if语句、for循环、算法等等。这些东西都属于语言核心，下次继续学习语言核心就是面向对象了。JavaScript能做非常多的事情：DOM开发、Ajax开发、Canvas开发、NodeJS开发、前端框架（React、Vue、Angular等等）、HTML5开发。这些都需要语言核心的知识。

DOM开发说白了就是浏览器中的页面效果开发，在2011年之前，DOM开发占据了前端开发工程师的90%的工作；但是现在，DOM开发的工作比重已经降到了10%以下。换句话说，2011年之前，前端 = 做特效的；2011年之后，前端要负责得到后台的数据接口，用前端MVC逻辑分层开发前端组建、界面、功能，还要写HTML5，还要做canvas动画！

上层的框架屏蔽了下层的语言的一些麻烦、不方便的东西，并且提供更方便的API。

jQuery就是干这个事情的，把JS中的不方便封装起来，暴露的API都是非常简便的。

jQuery的哲学就是DOM编程领域的霸主，操作DOM节点、绑定监听、运动、css样式、Ajax等等都有封装。

工作上都是用jQuery，如果不用jQuery也是用类似的东西。没有人会不用轮子去开发页面效果。

JavaScript中Library表示“库”，如果这个库的功能很强大，甚至颠覆了传统编程的语法、行文习惯，我们就可以叫做“框架”。

1.1 DOM是什么

文档对象模型 (DOM，Document Object Model) 是 HTML 和 XML 文档的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式—程序可以对结构树进行访问，以改变文档的结构，样式和内容。 DOM 提供了一种表述形式— 将文档作为一个结构化的节点组以及包含属性和方法的对象。从本质上说，它将 web 页面和脚本或编程语言连接起来了。

到底什么是DOM？就是你可以像操作对象一样操作HTML页面，而不是操作字符串。

DOM将 web 页面和脚本或编程语言连接起来了。

回看一下我们之前学习的DOM操作，都在干嘛？我们在开发特效，但是微观的看，实际上在进行：

1）得到HTML节点

2）改变节点的属性

3）改变节点的样式

4）修改节点、删除节点、增加节点

5）节点之间的关系

1.2原生JavaScript得到节点

document.getElementById('box');

document.getElementsByTagName('p');

以上两是全线浏览器都兼容的得到元素方法。

以下这些得到元素的方法都不兼容IE678。

document.getElementsByName('aaa')[0]  //通过name属性得到元素们
document.getElementsByClassName('pp') //通过类名得到元素们
document.querySelector('#box');
document.querySelectorAll('#box p');  //通过选择器得到元素们

前端笔记之JavaScript（十）深入JavaScript节点&DOM&事件

一、DOM

1.1 DOM是什么

1.2原生JavaScript得到节点

更多相关文章

随机推荐