《JavaScript高级程序设计（第3版）》

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <ul class="list">
  9.         <li class="item">1</li>
  10.         <li class="item">2</li>
  11.         <li class="item current">3</li>
  12.     </ul>
  13.     <button id="myButton">button</button>
  14.     <script>
  15.         /**
  16.          * getElementsByClassName()
  17.          * 支持 getElementsByClassName()方法的浏览器有 IE 9+、Firefox 3+、Safari 3.1+、Chrome 和 Opera 9.5+
  18.          */
  19.         +function() {
  20.             var nodeList = document.getElementsByClassName('item current') // item && current
  21.             console.log(nodeList)
  22.             var nodeList = document.getElementsByClassName('item')
  23.             console.log(nodeList)
  24.         }();
  25.  
  26.         /**
  27.          * classList
  28.          * 支持 classList 属性的浏览器有 Firefox 3.6+和 Chrome
  29.          * add(value)
  30.          * contains(value)
  31.          * remove(value)
  32.          * toggle(value)
  33.          */
  34.         +function() {
  35.             var nodeList = document.getElementsByClassName('item')
  36.             nodeList.item(0).classList.add('current')
  37.             nodeList.item(2).classList.remove('current')
  38.         }();
  39.  
  40.         /**
  41.          * document.activeElement document.hasFocus()
  42.          * 实现了这两个属性的浏览器的包括 IE 4+、Firefox 3+、Safari 4+、Chrome 和 Opera 8+
  43.          * 元素获得焦点的方式有页面加载、用户输入(通常是 通过按 Tab 键)和在代码中调用 focus()方法
  44.          * 默认情况下,文档刚刚加载完成时,document.activeElement 中保存的是 document.body 元 素的引用。
  45.          * 文档加载期间,document.activeElement 的值为 null
  46.          * 查询文档获知哪个元素获得了焦点,以及确定文档是否获得了焦点
  47.          * 通过检测文档是否获得了焦点,可以知道用户是不是正在与页面交互
  48.          */
  49.         +function() {
  50.             console.log(document.activeElement)
  51.             console.log(document.hasFocus())
  52.             var button = document.getElementById('myButton')
  53.             button.focus()
  54.             console.log(document.activeElement === button)
  55.             console.log(document.hasFocus())
  56.         }();
  57.  
  58.         /**
  59.          * document.readyState
  60.          * 支持 readyState 属性的浏览器有 IE4+、Firefox 3.6+、Safari、Chrome 和 Opera 9+
  61.          * IE4 最早为 document 对象引入了 readyState 属性。
  62.          * 然后,其他浏览器也都陆续添加这个属性, 最终 HTML5 把这个属性纳入了标准当中
  63.          * Document 的 readyState 属性有两个可能的值
  64.          * loading,正在加载文档
  65.          * complete,已经加载完文档
  66.          */
  67.         +function() {
  68.             if (document.readyState == 'complete') {
  69.                 console.log('complete')
  70.             }
  71.         }();
  72.  
  73.         /**
  74.          * document.compatMode
  75.          * 陆续实现这个属性的浏览器有 Firefox、Safari 3.1+、Opera 和 Chrome
  76.          * 标准模式 CSS1Compat
  77.          * 混杂模式 BackCompat
  78.          */
  79.         if (document.compatMode == 'CSS1Compat') {
  80.             console.log('Standards mode')
  81.         } else {
  82.             console.log('Quirks mode')
  83.         }
  84.  
  85.         /**
  86.          * 作为对 document.body 引用文档的<body>元素的补充,HTML5 新增了 document.head 属性, 引用文档的<head>元素
  87.          * 实现 document.head 属性的浏览器包括 Chrome 和 Safari 5
  88.          */
  89.         var head = document.head || document.getElementsByTagName('head')[0]
  90.         console.log(head)
  91.     </script>
  92. </body>
  93. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <ul class="list">
  9.         <li class="item" data-appId="12345" data-my-name="na">1</li>
  10.         <li class="item">2</li>
  11.         <li class="item current">3</li>
  12.     </ul>
  13.     <div id="box1">box1</div>
  14.     <div id="box2">box2</div>
  15.     <div id="box3" style="margin-top:600px">box3</div>
  16.     <div id="box4">box4</div>
  17.     <script>
  18.         /**
  19.          * document.charseet
  20.          * document.defalutCharset
  21.          * 表示根据默认浏览器及操作系统的设置,当前文档默认的字符集 应该是什么
  22.          * 支持 document.charset 属性的浏览器有 IE、Firefox、Safari、Opera 和 Chrome。
  23.          * 支持 document.defaultCharset 属性的浏览器有 IE、Safari 和 Chrome
  24.          */
  25.         console.log(document.charset, document.defaultCharset)
  26.  
  27.         // dataset
  28.         var firstLi = document.querySelector('.item')
  29.         firstLi.setAttribute('data-appId2', '54321')
  30.         firstLi.setAttribute('data-my-name2', 'nana')
  31.         // chrome DOMStringMap {appid: "12345", myName: "na", appid2: "54321", myName2: "nana"}
  32.         console.log(firstLi.dataset)
  33.         if (firstLi.dataset.appid) {
  34.             firstLi.dataset.appid = 111111
  35.         }
  36.  
  37.         var lastLi = document.querySelectorAll('.item')[2]
  38.         lastLi.dataset.appId = 'data-app-id'
  39.         lastLi.dataset.appid = 'data-appid'
  40.  
  41.         /**
  42.          * innerHTML
  43.          * 但是,不同浏览器返回的文本格式会有所不同。
  44.          * IE 和 Opera 会将所有标签转换为大写形式,
  45.          * 而 Safari、 Chrome 和 Firefox 则会原原本本地按照原先文档中(或指定这些标签时)的格式返回 HTML,包括空格 和缩进。
  46.          * 不要指望所有浏览器返回的 innerHTML 值完全相同
  47.          *
  48.          * 并不是所有元素都支持 innerHTML 属性。
  49.          * 不支持 innerHTML 的元素有:<col>、<colgroup>、 <frameset>、<head>、<html>、<style>、<table>、<tbody>、<thead>、<tfoot>和<tr>。
  50.          * 此 外,在 IE8 及更早版本中,<title>元素也没有 innerHTML 属性
  51.          */
  52.  
  53.         /**
  54.          * outerHTML
  55.          * 支持 outerHTML 属性的浏览器有 IE4+、Safari 4+、Chrome 和 Opera 8+。
  56.          * Firefox 7 及之前版本都不 支持 outerHTML 属性
  57.          */
  58.         document.getElementById('box1').outerHTML = '<p>This is a paragraph.</p>'
  59.  
  60.         /**
  61.          * scrollIntoView
  62.          * 支持 scrollIntoView()方法的浏览器有 IE、Firefox、Safari 和 Opera
  63.          */
  64.         setTimeout(function() {
  65.             document.getElementById('box4').scrollIntoView()
  66.         }, 0)
  67.     </script>
  68. </body>
  69. </html>

-_-#【JS】HTML5 API的更多相关文章

  1. -_-#【JS】defer / async

    引用JavaScript文件时的两个属性defer和async <script src="js1.js" defer></script> <scrip ...

  2. 【转】HTML5 API——无刷新更新地址 history.pushState/replaceState 方法

    (window.location)在通过JavaScript更改以后,浏览器都会通过刷新来到达你更改后的URL(location的意思就是位 置..) 而在JavaScript MVC开始流行之后,通 ...

  3. 【转】HTML5 API --- 页面可见性改变(visibilitychange)事件

    [摘要:[本文属本创,若有转载,请说明出处http://blog.csdn.net/yl02520/article/] visibilitychange事情是扫瞄器新增加的一个事情,当扫瞄器的某个标签 ...

  4. -_-#【JS】element.click()

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. -_-#【JS】隐含全局变量

    隐含全局变量与明确定义的全局变量有细微的不同,不同之处在于能否使用delete操作符撤销变量 使用var创建的全局变量(这类变量在函数外部创建)不能删除不使用var创建的隐含全局变量(尽管它是在函数内 ...

  6. -_-#【JS】isFinite

    /** * isFinite(number) * 检查是否是无穷大 * 如果 number 是有限数字(或可转换为有限数字),那么返回 true * 如果 number 是 NaN(非数字),或者是正 ...

  7. 【javascript】html5中使用canvas编写头像上传截取功能

    [javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...

  8. 【译】html5游戏入门

    [译]html5游戏入门 原文链接 简介 如果你想用canvas做个游戏,那么来对地方了. 但是但是你至少知道javascript怎么拼写(╯‵□′)╯︵┻━┻ 既然没问题,那先来玩一下或者下载 创建 ...

  9. 【Demo】HTML5 拍照上传

    本文主要讲解 手机浏览器 如何拍照 为什么会有这个需求 最近做一个项目要用到拍照然后上传照片,但是网页拍照一般都是用Flash做的,而我们主要是H5页面,如果在微信里面有权限就可以通过JSSDK调起摄 ...

随机推荐

  1. 两个有序数组的第n大数

    两个有序数组,各自含有n个元素,求第n大的元素 1.顺序遍历两个数组,计数变量k统计出现的第k小元素,时间复杂度为O(n) 代码例如以下: int getmid(int a[],int b[],int ...

  2. Android自动化测试之Monkey工具

    前言:Android自动化测试工具.方法和框架,包括android测试框架.CTS.Monkey.Monkeyrunner.benchmark.test tool等. 一. 什么是MonkeyMonk ...

  3. CentOS 6.4的安装--史上最全-CRPER木木

    安装工具及软件: VmwareWorkstation9 CentOS-6.4-x86_64-LiveCD Vmware初始设置:           刚装好的VMWARE启动后,虽说默认已经设置好基础 ...

  4. centos 安装nginx

    centos 安装nginx 安装依赖 更换源 yum install http://mirrors.163.com/centos/6.8/extras/x86_64/Packages/epel-re ...

  5. codevs 1993 草地排水 USACO

    /*Dinic*/ #include<iostream> #include<cstdio> #include<cstring> #include<queue& ...

  6. Oracle10g、 Oracle11g完美共存

    Oracle10g. Oracle11g完美共存           环境描述 客户服务器上已经安装Oracle9i软件并部署多套数据库,现在客户要求安装Oracle11g软件,并且创建11g数据库, ...

  7. 【转】iOS6中的Auto Layout：通过代码添加约束

        最近做的项目用到了Auto Layout,于是经过了一番大量的google,这是我看到的讲用代码创建约束最清晰的一篇教程,于是想跟更多的人分享一下.原文也比较简单,可以直接过去看,如果我翻译的 ...

  8. Linux2.6的所有内核版本

    Index of /pub/linux/kernel/v2.6 Name Last modified Size Parent Directory - incr/ 03-Aug-2011 20:47 - ...

  9. 你好，C++（33）对象生死两茫茫 6.2.3 一个对象的生与死：构造函数和析构函数

    6.2.2  使用类创建对象 完成某个类的声明并且定义其成员函数之后,这个类就可以使用了.一个定义完成的类就相当于一种新的数据类型,我们可以用它来定义变量,也就是创建这个类所描述的对象,表示现实世界中 ...

  10. 跟我学android-使用Eclipse开发第一个Android应用（三）

    打开Eclipse,选择 File—New –Android Application Project Application Name  就是我们的 应用名称,也是我们在手机应用程序列表里看到的名称. ...