dom

JavaScript DOM 基础 DOM 即文档对象模型，是操作 HTML/XML 文档的一套方法。通过 DOM 操作节点，使页面发生改变，是动态文档技术的核心内容 DOM 的含义 DOM 即 document object model，文档对象模型 JavaScript 中有三类对象 本地对象 Native Object Object Function String Number Boolean Error EvalError SyntaxError TypeError RageError ReferenceError URIError Date RegExp 内置对象 Built-in Object Global: 一类对象的统称，是虚拟的，代表全局 任何方法和属性都在对象之下 如 isNaN()、parseInt、Number()、decodeURL() 等都是 Global 下的方法 如 Math、Infinity、NaN、undefined 等都是 Global 下的属性 本地对象、内置对象是 ECMAScript 的内部对象 宿主对象 Host Object 执行 JS 的环境提供的对象，即浏览器对象 window 对象 -> BOM，不同浏览器间没有固定规范 document 对象 -> DOM，遵从 w3c 规范 document 是 window 下的对象，即

在 jQuery 1.8.0版本之前，我们要想获取某个DOM绑定的事件处理程序可以这样： $.data(domObj,'events');//或者$('selector').data('events') jQuery 1.8.0版本开始，jQuery突然不支持这样使用了，而是改到了一个叫'_data'的函数功能上了，即，1.8.0及以后的版本你可以这么用： $._data(domObj,'events');//注意，这里不能像$('selector')._data('events')这样用了。 /*例如可以写成*/ $._data($('#box').get(0),'events') // 这里是获取id为box的dom元素身上绑定的所有事件 $._data($('#box').get(0),'events')['click']// 这里是获取id为box的dom元素身上绑定的click事件 /*或写成*/ $._data($('#box').get(0)).events /*或还可以写成*/ $.cache[$('#box').get(0)[$.expando]].events 兼容兼容各个jQuery版本的方式，这样获取即可： var eventsData = $.data(domObj,'events') || $._data(domObj,'events');/

持续更新地址 https://wdd.js.org/js-best-pr... 1. 风格 一千个读者有一千个哈姆雷特 ，每个人都有自己的code style。我也曾为了要不要加分号给同事闹个脸红脖子粗，实际上有必要吗？ 其实JavaScript已经有了比较流行的几个风格 JavaScript Standard Style Google JavaScript Style Guide Airbnb JavaScript Style Guide 我自己使用的是 JavaScript Standard Style , 我之所以使用这个，是因为它有一些工具。可以让你写完代码后，一旦保存，就自动帮你把你的风格的代码修正成标准分割，而不是死记硬背应该怎么写。看完这个页面，你就应该立马爱上 JavaScript Standard Style , 如果你用vscode, 恰好你有写vue, 你想在.vue文件中使用standard风格，那么你需要看看 这篇文章 2. 可维护性 很多时候，我们不是从零开始，开发新代码。而是去维护别人的代码，以他人的工作成果为基础。确保自己的代码可维护，是赠人玫瑰，手留余香的好事。一方面让别人看的舒服，另一方面也防止自己长时间没看过自己的代码，自己都难以理解。 2.1. 什么是可维护代码 可维护的代码的一些特征 可理解 易于理解代码的用途 可适应 数据的变化

JavaScript JavaScript是一门编程语言，浏览器内置了JavaScript语言的解释器，所以在浏览器上按照JavaScript 语言的规则编写相应代码，浏览器可以解释出相应的处理。 注：在编写代码时要养成一行代码以 “ ; ”（分号）结尾。因为在代码上线的时候，一般会对代码进行压缩，这时所有的JavaScript代码将被压缩为一行这时就需要以分号来识别一行代码的结束。 1，存在方式 文件方式 <script tyoe="text/javascript" src="JS文件"></script> 代码块 <script type="text/javascript"> JS代码 </script> 2，JavaScript 代码存在位置 HTML 的 head 中 HTML 的body代码块底部（推荐，因为HTML是从上到下解析的，放到上面如果代码出现问题无法解析，网站内容就无法正常的显示影响用户体验度） 3，变量 全局变量 局部变量 JavaScript中变量声明非常容易出错，局部变量必须以 var 开头，如果不加表示默认声明的是全局变量 name = "seven" # 全局变量 var name = "seven" # 局部变量 4，注释 // # 单行注释 /* */ # 多行注释 5，数据类型 数字（Number） var age = 18; var age

SAX概念 SAX是Simple API for XML的缩写，它并不是由W3C官方所提出的标准，可以说是“民间”的事实标准。实际上，它是一种社区性质的讨论产物。虽然如此，在XML中对SAX的应用丝毫不比DOM少，几乎所有的XML解析器都会支持它。 与DOM比较而言，SAX是一种轻量型的方法。我们知道，在处理DOM的时候，我们需要读入整个的XML文档，然后在内存中创建DOM树，生成DOM树上的每个Node对象。当文档比较小的时候，这不会造成什么问题，但是一旦文档大起来，处理DOM就会变得相当费时费力。特别是其对于内存的需求，也将是成倍的增长，以至于在某些应用中使用DOM是一件很不划算的事（比如在applet中）。这时候，一个较好的替代解决方法就是SAX。 SAX在概念上与DOM完全不同。首先，不同于DOM的文档驱动，它是事件驱动的，也就是说，它并不需要读入整个文档，而文档的读入过程也就是SAX的解析过程。所谓事件驱动，是指一种基于回调（callback）机制的程序运行方法。（如果你对Java新的代理事件模型比较清楚的话，就会很容易理解这种机制了） 在XMLReader接受XML文档，在读入XML文档的过程中就进行解析，也就是说读入文档的过程和解析的过程是同时进行的，这和DOM区别很大。解析开始之前，需要向XMLReader注册一个ContentHandler

1 创建节点 内部插入 { 1 append() $(selector).append("html,jquery,dom") 接受html字符串，匹配jquery和dom对象 插入节点后面 2 prepend() 同上 ，插入元素位置前面 }以上两种方法都具有破坏性，当重复调用则会删除前面匹配对象 外部插入 { 1 affter（） 匹配元素之前插入 2 before() 匹配元素之后插入 } 内部插入与外部插入区别在于内部插入后与原节点关系为父子节点，而外部插入为兄弟节点。 2 删除内容 dom内置方法（nodechild.removechild(node) { 1 remove(selector) 主要删除当前匹配节点以及包含的子节点 2 empty() 同上 但不删除当前匹配节点 3 datach（[expr]）expr是一个选择表达式将需要移出元素从匹配元素中过滤出来 与上面两种方法不同detach（）移除的节点以及节点内容都会保存下来 可以后面再接入dom文档中 } 3 包裹内容 { 外包 1 wrap（wrappingElement）参数表示html，选择表达式，jquery和dom对象 内包 2 wrapinner（xx）同上 总包 3 wrapall（xx） 卸包 4 unwrap（）无参数 能将匹配元素的父级元素删除保留自身和兄弟元素 } wrap（

在本篇博文中我将实现一个完整的实例：主要使用Node.js爬取一个网页，需要通过第三方模块cheerio.js分析这个网页的内容，最后将这个网页的图片保存个在本地。 一、项目目录与思路 新建一个项目名为：project_01,输入命令在控制台，使其生成package.json文件： 命令： npm init 在控制台输入npm install命令下载需要的模块，在本项目中需要的request和cheerio模块，将使用命令进行下载到本地： 命令： npm install request cheerio -S 此时项目的文件夹的目录为： img文件夹用来存储图片文件 node_modules文件夹是模块默认的保存位置 index.js文件是整个项目的入口文件。 config.js文件是配置文件，用来存放网页地址和图片文件夹的路径，这样做的目的是使整个项目的可拓展性增强。 analyze.js文件用来存储分析DOM的方法。 package.json文件是包的描述文件。 打开node_modules文件夹可以看到相应的模块： 整体的思路：通过第三方模块request的请求网页地址，从而得到整个网页的DOM结构，根据DOM结构利用cheerio模块分析出图片文件的地址，再次请求这个地址，再次请求这个地址，最后将得到的图片数据存储在本地。 二、 配置网页地址及图片存放的文件夹 配置内容

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。 一.查找元素 1、直接查找 document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签名获取标签集合 2、间接查找 parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling //