兼容浏览器原生DOM的各种特性一览表

兼容浏览器原生DOM的各种特性总结

HTML5

• 新元素 ：<article>、<aside>、<audio>、<canvas>、<data>、<details>、<dialog>、<embed>、<figcaption>、<figure>、<footer>、<header>、<main>、<mark>、<meter>、<nav>、<output>、<progress>、<ruby>、<section>、<summary>、<time>、<video>。
• 新属性 ：<a>的download属性、<input>的placeholder属性、<meta>的charset属性、<style>的scoped属性、<script>的defer和async属性。
• 新方法 ：<document>的querySelector()和querySelectorAll()方法、<element>的classList属性和closest()方法。

CSS3

• 新选择器 ：:nth-child()、:nth-last-child()、:first-child()、:last-child()、:only-child()、:empty()、:not()、:target。
• 新属性 ：display的flex和grid属性、flex-direction的row和column属性、justify-content的flex-start、flex-end、center和space-between属性、align-items的flex-start、flex-end、center和baseline属性、align-content的flex-start、flex-end、center和space-between属性、order属性、flex-grow属性、flex-shrink属性、flex-basis属性。
• 新方法 ：<element>的getBoundingClientRect()方法、<window>的requestAnimationFrame()方法。

JavaScript

• 新对象 ：ArrayBuffer、DataView、Int8Array、Uint8Array、Int16Array、Uint16Array、Int32Array、Uint32Array、Float32Array、Float64Array、Set、Map、WeakSet、WeakMap。
• 新方法 ：<array>的forEach()方法、<array>的filter()方法、<array>的map()方法、<array>的reduce()方法、<array>的reduceRight()方法、<array>的some()方法、<array>的every()方法、<array>的indexOf()方法、<array>的lastIndexOf()方法、<array>的includes()方法、<array>的find()方法、<array>的findIndex()方法、<string>的startsWith()方法、<string>的endsWith()方法、<string>的includes()方法、<string>的repeat()方法、<string>的padStart()方法、<string>的padEnd()方法、<date>的toLocaleDateString()方法、<date>的toLocaleTimeString()方法、<date>的toLocaleString()方法、<function>的bind()方法、<function>的call()方法、<function>的apply()方法、<object>的assign()方法、<object>的freeze()方法、<object>的seal()方法、<object>的preventExtensions()方法、<object>的isFrozen()方法、<object>的isSealed()方法、<object>的isExtensible()方法、<promise>的then()方法、<promise>的catch()方法、<promise>的finally()方法、<promise>的all()方法、<promise>的race()方法。

兼容模式和Standards Mode

• 兼容模式 ：浏览器在兼容模式下运行时，会遵循旧的HTML和CSS标准。这可能会导致一些网站或应用程序在兼容模式下无法正常运行。
• Standards Mode ：浏览器在Standards Mode下运行时，会遵循最新的HTML和CSS标准。这可以确保网站或应用程序在所有浏览器中都能正常运行。

兼容性测试工具和资源

• Can I Use：这是一个在线工具，可以帮助开发者检查浏览器对各种HTML、CSS和JavaScript特性的支持情况。
• Modernizr：这是一个JavaScript库，可以帮助开发者检测浏览器对各种HTML、CSS和JavaScript特性的支持情况。
• 浏览器兼容性表：这是一个表格，列出了各种浏览器对各种HTML、CSS和JavaScript特性的支持情况。

结论

本文总结了兼容浏览器原生DOM的各种特性，包括HTML5、CSS3和JavaScript的各种元素、属性和方法，以及兼容模式和Standards Mode之间的差异。本文还提供了兼容性测试工具和资源，帮助开发者确保其网站或应用程序在所有主流浏览器中都能正常运行。