前端笔记知识点整合之JavaScript(十)深入JavaScript节点事件

JavaScript语言核心。变量的定义、变量的类型、运算符、表达式、函数、if语句、for循环、算法等等。这些东西都属于语言核心,下次继续学习语言核心就是面向对象了。JavaScript能做非常多的事情:DOM开发、Ajax开发、Canvas开发、NodeJS开发、前端框架(ReactVueAngular等等)、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是什么

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

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

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

前端笔记知识点整合之JavaScript(十)深入JavaScript节点事件

回看一下我们之前学习的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'); //通过选择器得到元素们

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyydxg.html