HTML DOM 级别以及一些小坑

幸运
185
文章
0
评论
March 18, 202012:15:13 评论 143 1324字阅读4分24秒

API (Web 或 XML 页面) = DOM + javascript(脚本语言)

问题

问题从一个异常开始。

有网友写了如下代码。

  1. function download() {
  2.      console.log(1);
  3. }
  1. <a onclick="download()">下载</a>

当点击按钮的时候,却报错了:

UncaughtTypeError:downloadisnotafunction

报错信息很奇怪: download 不是一个函数。如果我们在 devtools console 执行 $0.download 会得到 "",一个空字符串。

我们尝试把 <a> 换成 <button>,可以正常执行。

解读

先说答案:html 5 中为 <a> 增加了 download 属性,所以在 a 上调用 download() 会提示 downloadisnotafunction,因为所有的属性都是字符串。

同样的坑还有:如果把表单里面的某个控件 id 设置为 submit,会导致表单提交 form.submit() 出错,错误信息和这个类似, submitisnotafunction。

DOM

实际上没有没有 DOM0 级的官方标准。

DOM 是 Netscape 最早提出,并且与 JS 的诞生是在同一个时间。Netscape2 浏览器首先实现了 DOM,定义了获取文档中一些元素的入口,比如 document.forms 和 document.images,后期的浏览器为了实现向后兼容,同样也支持这些接口。在 JS 事件中,我们经常提及的 DOM 事件,也是在这个阶段定义的。其它比较常用的还有 css 访问、DOM 遍历、等。。。

DOM(Document Object Model) 的繁荣可以追溯至 1990 年代后期微软与 Netscape 的“浏览器大战”,双方为了在 javascript 与 JScript 一决生死,于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物,计有 VBScript、ActiveX、以及微软自家的 DHTML 格式等,使不少网页使用非微软平台及浏览器无法正常显示。

1998 年 10 月,DOM1 成为了 W3C 的推荐标准。DOM1 级由两个模块组成:DOM核心(DOM Core)和DOM html。分别定义了:

  • DOM核心:针对任何结构化文档的标准模型
  • DOM html:只针对HTML文档的标准模型

DOM1 就像一个刚出生的孩子,肯定有各种不足。于是各种浏览器都在原来的基础上添加新的私有 API,比如 attachEvent 和 addEventListener,于是 W3C 又推出了 DOM level 2。而这个版本最大的变化就是 添加事件监听的方法统一成了 addEventListener,并增加了第三个参数。(关于第三个参数可以看我之前的文章 #6 [Web性能优化]Chrome 51 引入新特性:Passive event listeners

W3C 在 2000 年推出 DOM level 2,直到 9 年后的 2009 年,微软发布的 IE9 才遵循这个标准。WTF!!!

后来陆续推出了 DOM3 和 DOM 4。

本文来源于:HTML DOM 级别以及一些小坑-幸运草博客
特别声明:以上文章内容仅代表作者本人观点,不代表幸运草博客观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与幸运草联系。

  • 本站QQ群
  • weinxin
  • 捐赠本站
  • weinxin
前端基础-HTML列表表格 html

前端基础-HTML列表表格

一、 列表 ul, ol, dl 1. 无序列表 ul HTML <ul> 元素 ( 或 HTML 无序列表元素) 代表多项的无序列表,即无数值排序项的集合,且它们在列表中的顺序是没有意义的。通常情况下,无序列表项的头部可以是几种形式,如一个点,一个圆形或方形。头部的风格并不是在页面的 HTML 描述定义, 但在其相关的 CSS 可以用 list-style-type属性。ul标签需要和li标签结合使用。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> </head> <body> <ul type="disc"> <li>第1元素</li> <li>第2元素</li> <li> 第3元素 <ul> <li>二级1</li> <li>二级2</li> <li>二级3</li> </ul> </li> <li>第4元素</li> <li>第5元素</li> </ul> </body> </html> type 用于设置列表的着重号样式 属性说明: 属性 描述 circle 空心圆 disc 实心圆 square 方块 2. 有序列表 ol HTML <ol> 元素 表示多个有序列表项,通常渲染为有带编号的列表。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> </head> <body> <ol type="1"> <li>第1元素</li> <li>第2元素</li> <li> 第3元素 <ol> <li>二级1</li> <li>二级2</li> <li>二级3</li> </ol> </li> <li>第4元素</li> <li>第5元素</li> </ol> </body> </html> type 指示编号类型 属性说明: 属性 描述 'a'...
HTML基础入门 html

HTML基础入门

什么是网页? 网页由:文字,图片,音频,输入框,视频,按钮等一系列的元素来组成的 我们在学习网页开发之前我们首先需要了解一下什么是Web开发标准? WEB标准不是某一个标准,而是一系列标准的集合。网页主要是由三部分组成:结构,表现 和 行为。 Web表现是由W3C这个组织来定义的一套标准。 W3C:万维网联盟创建于1994年,是Web技术领域最具权威和影响力的国际中立性技术标准机构 结构标准(HTML):指的就是我们编写网页的结构 表现标准(CSS):层叠样式表 行为标准(JavaScript):简单的理解指的是网页的交互效果 我们在学习网页开发之前我们要了解一下浏览器的概念,认识一下主流的浏览器有哪些。 什么是浏览器:浏览器指的就是一种用于帮助我们检索并解析展示万维网信息的一个应用程序。 通过以上图片的展示想必大家对这些主流的浏览器都使用过吧! 那么接下来我们来说说浏览器的内核。 什么是浏览器的内核? 浏览器最重要或者说核心的部分是“Rendering  Engine”,可大概译为“渲染引擎”,不过我们一般习惯将之称为“浏览器内核”。 它的作用是负责对网页语法的解析并进行渲染(显示),渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息,不同的浏览器会有不同的内核,所以渲染出来的效果也是有所不同的。 了解一下主流浏览器的内核: Internet Explorer:Trident 内核 Chrome:Blink 引擎 Opera:在13年的时候用的还是Presto,之后用也是Blink引擎 FireFox:Gecko 内核 Safari:WebKit引擎 通过以上的知识点学习我们对Web前端开发也有了一定的了解了,那么接下来我们正式的进入到HTML的学习中了,请小伙伴我和一起加油学习吧 《HTML基础入门》 什么是HTML? HTML(Hyper Text Markup Language):超文本标记语言 那么我们在学习网页开发的时候我们需要知道什么是网页的结构 网页的结构: 通过以上的图片所展示的信息来看,想必大家对网页的结构都了解了 那么接下来我们来说一说网页结构中的标签分类: 双标签:标签有开头有结尾 例如: <head></head> <body></body>........ 单标签 :标签有开头没有结尾 例如: <link />  <hr />...... 这里有个细节,不知道小伙伴有没有发现呀,是什么呢? 标签的嵌套,标签里面嵌套着标签这里我们一般称之为是:"父子关系",标签并列显示我们称之为是:"兄弟关系"。 注意:网页的后缀都是 .html 结尾的,大家可以按照以上图片所给的格式编写出属于自己的一个网页吧 本文来源于:HTML基础入门-幸运草博客 特别声明:以上文章内容仅代表作者本人观点,不代表幸运草博客观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与幸运草联系。
「JS」HTML 简介 html

「JS」HTML 简介

  通常一个网页由什么部分构成? 一般由前端三巨头构成:HTML、CSS、JavaScript HTML 决定了这个网页的结构是什么样子的:什么东西在哪里,有什么内容等 CSS 决定了这个网页的部件是长什么样子的:颜色、大小、粗细、形状等 JavaScript 决定了这个网页怎么样动,有什么样的反应:动画怎么做,与用户怎么互动等 一个网页的绝大多数功能,通常由这三个部分完成,它们极大地丰富了我们的互联网生活。 什么是 HTML? HTML:超文本标记语言(Hyper Text Markup Language),它不是一门编程语言,而是一种标记语言,这种标记语言常常用于描述网页,我们在网上看到的诸多网页,其本尊都是它。 以 Chrome 浏览器打开 bing 主页为例,打开网址 https://cn.bing.com/ : 在主页按鼠标右键,点击 View Page Source ,显示网页的源代码,即 HTML 文本,看到它本来的样子,: 未经浏览器修饰的 bing 主页的 HTML 源码: 这些 HTML 代码,只有经过浏览器正确显示之后,才最终变成了你使用的样子: 想要做网页设计,甚至入门前端,就要从学习 HTML 开始。 Be a Architect Powered By Programming 本文来源于:「JS」HTML 简介-幸运草博客 特别声明:以上文章内容仅代表作者本人观点,不代表幸运草博客观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与幸运草联系。
Typora 自动导出 HTML html

Typora 自动导出 HTML

看之前我要提醒你,本文并没有解决“Typora 自动导出 HTML”问题! 使用 Typora 写文章真的太方便了,之前《如何优雅地使用 Typora 写文章》讲到发布微信公众号和图片自动上传云端,但是,当我有很多草稿需要导出 HTML 的时候,手动一个一个点击显得有那么一些麻烦,那么,懒癌患者开始思考,有没有自动导出的方法? 本篇文章不仅会提供相关脚本,也会提供整个开发思路,这对于学习、开发和优化程序是非常重要的。 分析 分析 Typora 导出的 HTML: 分析了多个 HTML 后发现了,只有 body 标签中的内容才是我们自己的文章,其他的都是样式代码,一摸一样的样式代码; 分析 Typora 安装的目录结构: 我找到了 style 文件夹,再进去: 发现了 base.css 和主题文件夹,凭借我敏锐的洞察力,这一定是导出 HTML 用到的样式文件; 样式解决了,我们还需要将文章转为 HTML,文章是 markdown(md)格式的; 通过 Typora 打开开发者工具: 可以发现,Typora 本身就是一个浏览器,已经将转换好的 HTML 代码显示出来了,那么我们只需要通过 js 读取,再拼接上样式即可; 该有的我们都有了,我们可以参照《如何优雅地使用 Typora 写文章》中的 typora-plugins-win-img,通过 js 调用 pandoc 转化 markdown 至 html,再附加主题样式; 最后一个问题是,控制这个 js 调用时间; 解析 typora-plugins-win-img 的 js: 字面意思是当鼠标离开或者点击 div #write 中的 img 时出发,好主意! 验证了这个方法; 那么,我也可以通过同样的方式调用转换程序; OK,判断可行; 动手 在 Typora 文件夹下建立如下目录结构: 编写 md2html.js 文件: (function($){ var baseHtml1 = "略"; var baseHtmlThemeCss = "略"; // 主题样式代码 var baseHtml2 = "略"; // write 文章主体代码 var baseHtml3 = "略";...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: