javascript知识点梳理,javascript知识汇总

　　这篇文章带给你一些关于javascript的知识，包括一些关于DOM的相关问题。文档对象模型(DOM)是W3C推荐的用于处理可扩展标记语言的标准编程接口。下面就来看看吧，希望对你有帮助。

　　【相关推荐：javascript视频教程，web前端】

一、DOM 简介

1.1 什么是 DOM

　　一个完整的JavaScript实现由以下3个不同部分组成：

　　核心(ECMAScript):语言的核心部分，描述语言的语法和基本对象。

　　文档对象模型(DOM): Web文档操作标准，描述了处理Web内容的方法和接口。

　　浏览器模型(BOM):客户端和浏览器窗口操作的基础，描述了与浏览器交互的方法和界面。

　　文档对象模型(DOM)是W3C推荐的用于处理可扩展标记语言(HTML或XML)的标准编程接口。

　　W3C定义了一系列DOM接口，通过这些接口可以改变网页的内容、结构和风格。

　　官方语言：文档对象模型(DOM)是W3C推荐的用于处理可扩展标记语言的标准编程接口。它是一个与平台和语言无关的应用程序接口(API)，可以动态访问程序和脚本，更新它们的内容、结构和www文档的样式(HTML和XML文档由描述部分定义)。可以对文档进行进一步处理，并将处理结果添加到当前页面。DOM是基于树的API文档，在处理过程中需要在内存中表示整个文档。另一个简单的API是基于事件的SAX，它可以用来处理非常大的XML文档。由于它的大小，不适合在内存中处理所有的数据。

1.2 DOM 树

　　文档：页面就是文档。文档用来表示DOM中的元素：页面中的所有标签都是元素，元素用来表示DOM中的节点：网页中的一切都是节点(标签、属性、文本、注释等。)，在DOM中用node表示DOM 把以上内容都看做是对象。

二、获取元素

2.1 如何获取页面元素

　　 DOM在我们的实际开发中主要用于操作元素。

　　我们如何获取页面中的元素？有几种方法可以获取页面中的元素：

　　根据Id获取根据标记名获取通过HTML5中的新方法获取特殊元素Get:

2.2 根据 ID 获取

　　使用getElementById()方法获取ID为的元素对象。

　　document . getelementbyid( id )；使用console.dir()可以打印我们得到的元素对象，更好的查看对象中的属性和方法。

2.3 根据标签名获取

　　使用getElementsByTagName()方法返回具有指定标记名的对象集合。

　　Document.getElementsByTagName(标记名)；注意：

　　因为我们得到了一个对象集合，如果我们想要操作它们，我们需要遍历其中的元素。结果元素对象是动态的

2.4 通过 HTML5 新增的方法获取

　　文档。getelementsbyclassname( class name )；//根据类名返回元素对象的集合

　　document . query selector( selector )；//根据指定的选择器返回第一个元素对象

　　document . query selector all( selector )；//根据指定的选择器返回注意：

　　querySelector和query selector中的选择器都需要签名。

　　例如：document . query selector( # nav # nav )；

2.5 获取特殊元素（body，html）

　　 1.获取body元素

　　Doucumnet.body //返回body元素object 2。获取html元素

　　Document.documentElement //返回html元素对象

三、事件基础

3.1 事件概述

　　 JavaScript使我们能够创建动态页面，事件是JavaScript可以检测到的行为。简单理解：触发-响应机制。

　　网页中的每个元素都可以生成特定的事件来触发JavaScript。例如，我们可以在用户单击按钮时生成一个事件，然后执行某些操作。

3.2 事件三要素

　　事件源(谁)事件类型(什么事件)事件处理程序(做什么)案例：

　　var BTN=document . getelementbyid( BTN )；

　　btn.onclick=function() {

　　Alert(你好)；

　　};

3.3 执行事件的步骤

　　获取事件源注册事件(绑定事件)添加事件处理程序(以函数赋值的形式)

3.3 常见的鼠标事件

　　注：以下图片的事件只是常见的并不代表所有

3.4 分析事件三要素

　　事件三要素：

　　1.事件源(你要操作什么)

　　2.事件(要达到期望的交互效果，你必须做些什么)

　　3.处理功能(您希望目标在事件发生后是什么样子)

四、操作元素

　　 JavaScript的DOM操作可以改变网页的内容、结构和风格。我们可以使用DOM操作元素来改变元素内部的内容、属性等等。请注意，以下是属性。

4.1 改变元素内容

　　 element.innerText是从开始位置到结束位置的内容，但它删除了html标记以及空格和换行符。

　　element.innerhtml从开始位置到结束位置的全部内容，包括html标记，同时保留空格和换行符。

4.2 常用元素的属性操作

4.3 表单元素的属性操作

　　使用DOM，您可以操作以下表单元素的属性：

4.4 样式属性操作

　　我们可以通过JS修改元素的大小、颜色、位置等样式。

　　Element.style内联样式操作element.className类名样式操作注意：1。1中的样式。JS采用了fontSize、backgroundColor2等驼峰命名法。JS来修改样式操作，这就造成了内联样式，而且CSS权重比较高。

　　操作元素是 DOM 核心内容

4.5 排他思想

　　如果有相同的元素集，并且我们希望某个元素实现某个样式，我们需要使用循环独占思想算法：

　　清除所有元素(杀死其他的)，样式化当前元素(别管我)。请注意，顺序不能颠倒。先杀了别人，再套自己

4.6 自定义属性的操作

　　1. 获取属性值

　　element.property获取属性值。element . get attribute(“attribute”)；区别：

　　Element.attribute获取内置属性值(元素本身自带的属性)element . get attribute( attribute )；获取主要的自定义属性(标准)。我们程序员定义的属性是2. 设置属性值。

　　Element.attribute= value 设置内置属性值。Element.setAttribute(属性，值)；区别：

　　元素。属性设置内置属性值元素。set attribute(“attribute”)；设置主要自定义属性(标准)3. 移除属性

　　element . remove attribute(“attribute”)；

4.7 H5自定义属性

　　自定义属性的目的：是为了保存和使用数据。一些数据可以保存到页面，而不是数据库。

　　自定义属性获取是通过GetAttribute (attribute )获得的。

　　但是有些自定义属性很容易产生歧义，不容易判断是元素的内置属性还是自定义属性。

　　H5给我们添加了一个自定义属性：

　　1.设置H5自定义属性

　　H5将自定义属性数据定义为属性名并进行分配。

　　或者使用JS设置。

　　2. 获取H5自定义属性

　　get compatibility element . get attribute(“data-index”)；

　　添加了H5元素.数据集.索引或元素.数据集[index] IE11来支持它。

五、节点操作

　　通常有两种方法获取元素：1. 利用 DOM 提供的方法获取元素

　　文档。GetElementByid()文档。GetElementsbytagname()文档。QuerySelector等。不符合逻辑且复杂2. 利用节点层级关系获取元素

　　利用父子兄弟关系获取元素是符合逻辑的，但是兼容性稍差这两种方式都可以获取元素节点，后面都会使用，但是节点操作更简单。

5.2 节点概述

　　网页中的一切都是一个节点(标签、属性、文本、评论等。).在DOM中，节点由节点表示。

　　HTML DOM树中的所有节点都可以被JavaScript访问，所有HTML元素(节点)都可以被修改、创建或删除。

　　一般一个节点至少有三个基本属性：nodeType(节点类型)、nodeName(节点名)和nodeValue(节点值)。

　　节点nodeType为1，属性节点nodeType为2，文本节点nodeType为3(文本节点包含单词、空格、换行符等。).在我们的实际开发中，节点操作主要是对元素节点进行操作。

5.3 节点层级

　　利用DOM树可以将节点划分成不同的层次关系，常见的层次关系是1. 父级节点。

　　ParentNode属性可以返回节点的父节点。请注意，如果指定的节点没有父节点，最近的父节点将返回null2. 子节点。

　　ParentNode.childNodes返回包含指定节点的子节点集合，这是一个即时更新的集合。

　　注意：返回值包含所有子节点，包括元素节点、文本节点等。

　　如果只想得到里面的元素节点，就需要特殊处理。所以我们一般不提倡使用childNodes。

　　var ul=文档。query selector( ul )；for(var I=0；I ul . child nodes . length；i ) {if (ul.childNodes[i].nodeType==1) {

　　//ul.childNodes[i]是一个元素节点。

　　console . log(ul . child nodes[I])；}}parentNode.children是一个只读属性，返回所有子元素节点。它只返回子元素节点，其余节点不返回(这是我们重点关注的)。

　　虽然children是非标准的，但是各种浏览器都支持，所以我们可以放心使用。

　　FirstChild返回第一个子节点，如果找不到，则返回null。同样，它也包含所有节点。

　　LastChild返回最后一个子节点，如果找不到，则返回null。同样，它也包含所有节点。

　　FirstElementChild返回第一个子元素节点，如果找不到，则返回null。

　　LastElementChild返回最后一个子元素节点，如果找不到，则返回null。注意：这两种方法都有兼容性问题，只有IE9以上才支持。

　　在实际操作中，firstChild和lastChild包含其他节点，不方便操作。

　　但是firstElementChild和lastElementChild有兼容性问题，那么我们如何获取第一个或者最后一个子元素节点呢？

　　解决方案：

　　如果需要第一个子元素节点，可以使用ParentNode。Chillen [0]。如果想要最后一个子元素节点，可以使用

总结

　　文档对象模型(DOM)，这是W3C推荐的处理可扩展标记语言(HTML或XML)的标准编程接口。