---恢复内容开始---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>DOM2 && DOM3  || HTML5DOMAPI</title>

</head>

<body>

<div>

    <p>12312</p>

    <ul>

        <li>1</li>

        <li>11</li>

        <li>111</li>

        <li>1111</li>

    </ul>

</div>

<script>

    root = document.querySelector('div');

    //带命名空间的文档结构

    /*

    <xhtml:body xhtml:class="xx">

    </xhtml:body>

    */

    root.localName //不带XML空间前缀的tagName

    document.doctype.publicId

    //"-//W3C//DTD XHTML 1.0 Transitional//EN"

    document.doctype.systemId

    //"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

    document.importNode; //解决不同DOM类型之间的DOM&node移动操作

    document.defaultView //window 当前的window环境

    //document.contentDocument /*for标准*/|| document.contentWindow.document /*for IE*/

    document.styleSheets

    document.scripts

    /* style */

    style = {

        cssText : '', //样式

        length : '', //有几个样式

        getPropertCssValue : '',

        getPropertyValue : '',

        "item(index)" : '', //返回第索引个的样式

        removeProperty : '',

        setProperty : ''

    };

    //HTML5元素遍历 //NodeIterator ,treeWalker

    var iterator = document.createTreeWalker(root,NodeFilter.SHOW_ELEMENT,filter,false);

    function filter( node ){ //有点想 ARRAY.prototype.sort方法

        return node.tagName.toLowerCase() === 'li' ?

        NodeFilter.FILTER_ACCEPT :  //接受这个节点

        NodeFilter.FILTER_SKIP      //过滤掉这个节点

    };

    node = iterator.nextNode(); //专有方法 nextNode() 和previousNode() ，取得节点的元素

    while( node != null){

        console.log(node.tagName);

        node = iterator.nextNode();

    };

    //获取range方法，

    var range = document.createRange();

    range.selectNode(root);

    console.log( range );

    //range.setStart(obj,offset)

    //range.setEnd(obj,offset)

    //range.extraContent;

    //range.cloneContent;

    //range.insertNode;

    //range.surrandContent(span);

    //range.collapse( true or false );

    //range.compareBoundaryPoints(0 || 1 || 2 || 3,range2);

    root.classList;

    root.classList.contain;

    root.classList.add;

    root.classList.remove;

    root.classList.toggle;

    document.activeElement; //默认body

    /*

    data-xx ; dataSet.xx = 1; 存数据的，实现更快访问

    */;

    //[

        //beforebegin,

        //afterbegin,

        //beforeend,

        //afterend

    //]

    root.insertAdjacentElement

    root.insertAdjacentText

    root.insertAdjacentHTML

    root.insertAdjacentBefore

    //HTML5 scrollAPI

    document.body.scrollIntoView()

    document.domain //可以实现同一个域名不同二级域名的跨域，但是只能document.domain更改一次,否则会报错

    root.nodeType  === '3' ? root.normalize()&&root.splitText('aaa/*这个是切割标志符*/') : ''

    document.createComment('\'xxx');

    var aDiv = document.getElementsByTagName('div'); //这个aDiv是根据页面自动更新的

</script>

</body>

</html>

//娃哈哈，博客园的恢复功能不错

---恢复内容结束---

读JS高级API笔记_(DOM&&DOM2&&DOM3)哎呀——园龄才9个月啊的更多相关文章

  1. js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定

    js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定 addEventListener()与removeEventListener( ...

  2. 读JS高级——第五章-引用类型 _记录

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js高级程序设计 笔记 --- DOM

    DOM是针对HTML和XML文档的一个API.DOM描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分. 1,节点层次 DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的 ...

  4. 读书笔记 - js高级程序设计 - 第十章 DOM

      文档元素 是文档的最外层元素,在Html页面中,文档元素始终都是<html>元素 在xml中,任何元素都可以是文档元素 Node类型 Node.ELEMENT_NODE 元素 Node ...

  5. JS全部API笔记

    我相信对于程序猿都有做笔记的习惯. 我初学到现在也做了不少笔记,以前,总是怕写的文章或者好的内容分享出来就怕被直接copy以后更个名就不再是你的. 但通过博客园,学习到不少东西,人家都不怕什么了,我自 ...

  6. js高级程序设计 笔记 --- 错误处理、json和ajax

    1,错误处理 1,try-catch语句 try{可能导致错误的代码} catch(error) {在错误发生时该怎么处理} error.message是所有浏览器都支持的属性. finally语句是 ...

  7. js高级程序设计 笔记 --- 表单

    一,基础知识 在html中,表单是form元素,而在js中,表单对应的是HTMLFormElement类型,继承自HTMLElement,其独特的属性和方法有(常见): action:接收请求的URL ...

  8. JS高级学习笔记（9） 之 转：前端路由跳转基本原理

    原文链接: 前端路由跳转基本原理 前述 前端三大框架Angular.React和Vue都推行单页面应用SPA开发模式,这是因为在路由切换时,替换DOM Tree中发生修改的DOM部分,来减少原来因为多 ...

  9. JS高级学习笔记（6）- 事件循环

    参考文章:深入理解JS引擎的执行机制        JavaScript 异步.栈.事件循环.任务队列 我的笔记:ES系列之Promise async 和 await Event Loop 前提 js ...

随机推荐

  1. 随机序列生成算法---生成前N个整数的一组随机序列

    问题描述: 给定输入N,生成从1开始的:1,2,3,4,......N 一组随机序列,序列中的数不能重复出现. 比如:N=5,合法的随机序列为{4,3,1,5,2} .{3,1,4,2,5}……非法的 ...

  2. poj 1463 Strategic game DP

    题目地址:http://poj.org/problem?id=1463 题目: Strategic game Time Limit: 2000MS   Memory Limit: 10000K Tot ...

  3. np问题

    NP(np) Time Limit:1000ms Memory Limit:64MB 题目描述 LYK 喜欢研究一些比较困难的问题,比如 np 问题.这次它又遇到一个棘手的 np 问题.问题是这个样子 ...

  4. jira与readmine区别

    JIRA适合多人的团队(100+),而Readmine适合中小型团队. Redmine是用ruby开发的基于web的项目管理软件,免费.JIRA收费Redmine可以创建子任务,而jira不易创建子任 ...

  5. 实例化Model的三种方式

  6. iOS数组使用

    相关链接: ios数组基本用法和排序 NSArray 排序汇总 iOS 数组排序方法 IOS-筛选数组内的元素 关于EnumerateObjectsUsingBlock和for-in之间的较量 [iO ...

  7. 27Spring_的事务管理_银行转账业务加上事务控制_基于tx.aop进行声明式事务管理

    上一篇文章中,银行转账业务没有使用事务,会出现问题,所以这篇文章对上篇文章出现的问题进行修改. 事务 依赖 AOP , AOP需要定义切面, 切面由Advice(通知) 和 PointCut(切点) ...

  8. git详细教程

    Table of Contents 1 Git详细教程 1.1 Git简介 1.1.1 Git是何方神圣? 1.1.2 重要的术语 1.1.3 索引 1.2 Git安装 1.3 Git配置 1.3.1 ...

  9. git流程及操作

    一.git认识 git是什么?Git是目前世界上最先进的分布式版本控制系统 二.git安装 三.git创建本地库 1.首先选择e盘新建一个文件夹如douban 2.点击鼠标右键,执行Git Bash ...

  10. CSS 动画之九-会呼吸的信封

    新年已经到来,各个网站都举办着各种不同类型的活动,'会呼吸的信封'有可能就是你遇到的其中一种.其实就是一个信封的样式,在封口处加上开合开合的动画效果,吸引用户去打开这个信封,点击后可能会送红包,优惠券 ...