HTML5的范围十分广泛，这里只对DOM节点部分进行相应的总结，部分常用知识点如：getElementsByClassName()，charset().并没有对进行过多的阐述。

元素下的classList属性

classList属性下面有四个方法：

  • add(value): 添加，已存在的属性不添加
  • remove(value)：删除属性
  • contain(value)：检测属性是否存在，返回布尔型
  • toggle(value)：检测属性，存在将其删除，不存在添加
    //删除“disable”类

    div.classList.remove("disable");

    //添加“current”类

    div.classList.add("current");

    //是否存在"Class"类

    div.classList.contain("Class");

    //检测“toggle”类

    div.classList.toggle("toggle");

readyState属性

readyState属性有两个值：

  • loading：正在加载的文档
  • complete：已经加载完的文档

innerHTML和outerHTML的区别

  • innerHTML可以返回元素内的所有子元素
  • outerHTML可以返回包括元素本身和所有子元素

insertADjacentHTML()方法

insertADjacentHTML()可以接收两个参数

第一个参数：

  • "beforebegin"：在该元素之前的位置插入一个节点
  • "afterbegin": 在元素下的子元素内的第一个位置，插入节点
  • "beforeend": 在元素下的子元素内的最后一个位置，插入节点
  • "beforebegin"：在该元素之后的位置插入一个节点

第二个参数：HTML字符串

//代码中的使用

    div.insertAdjacentHTML("beforebegin","<p>hello world!</p>");

    div.insertAdjacentHTML("afterbegin","<p>hello world!</p>");

    div.insertAdjacentHTML("beforeend","<p>hello world!</p>");

    div.insertAdjacentHTML("afterend","<p>hello world!</p>");

scrollIntoView()方法

参数为布尔型：

  • true：浏览器窗口移动到指定元素的顶部；
  • false: 浏览器窗口移动到指定元素的底部；
<html>

<head>

    <title>HTML5_ScrollInToView方法</title>

    <meta  charset="utf-8">

    <script type="text/javascript">

        window.onload = function(){

            document.querySelector("#roll1").onclick = function(){

                document.querySelector("#scroll1").scrollIntoView(true);

            };

            document.querySelector("#roll2").onclick = function(){

                document.querySelector("#scroll2").scrollIntoView(true);

            };

            document.querySelector("#roll3").onclick = function(){

                document.querySelector("#scroll3").scrollIntoView(true);

            };

            document.querySelector("#roll4").onclick = function(){

                document.querySelector("#scroll4").scrollIntoView(true);

            };

            document.querySelector("#down").onclick = function(){

                document.body.scrollIntoView(false);

            };

            var len=document.querySelectorAll(".go_top").length;

            for(var i=0;i<len;i++){

                document.querySelectorAll(".go_top")[i].onclick=function(){

                    document.body.scrollIntoView(true);

                };

            }

        }

    </script>

    <style type="text/css">

        .scroll{

            background-color: #0000FF;

            width: 100%;

            height: 800px;

            text-align: center;

            line-height: 800px;

            font-size: 100px;

        }

    </style>

</head>

<body>

<button id="roll1">一</button>

<button id="roll2">二</button>

<button id="roll3">三</button>

<button id="roll4">四</button>

<button id="down">下去</button>

    <div id="scroll1" class="scroll"><button id="go_top1" class="go_top">回去</button>一</div>

    <div id="scroll2" class="scroll" style="background-color: #07B57A"><button id="go_top2" class="go_top">回去</button>二</div>

    <div id="scroll3" class="scroll" style="background-color:#3a3019;"><button id="go_top3" class="go_top">回去</button>三</div>

    <div id="scroll4" class="scroll" style="background-color: #f73463"><button id="go_top4" class="go_top">回去</button>四</div>

</body>

</html>

HTML5中的DOM新特性的更多相关文章

  1. HTML5 中的一些新特性

    HTML5是HTML最新的修订版本,包含了新的标签元素,属性和行为,同时包含了一系列可以被用来让 Web 站点和应用更加多样化,功能更强大的技术.HTML5实现了不依赖flash插件播放视频,而且引入 ...

  2. html5中的dom中的各种节点的层次关系是怎样的

    html5中的dom中的各种节点的层次关系是怎样的 一.总结 一句话总结:Node节点是所有节点的基类,所以都继承它的方法 1.dom提供在js中动态修改html标签的作用 比如增加修改标签等,并且是 ...

  3. Jdk5.0中出现的新特性

    掌握jdk5.0中出现的新特性1.泛型(Generics)2.增强的"for"循环(Enhanced For loop)3.自动装箱/自动拆箱(Autoboxing/unboxin ...

  4. MVC中的其他新特性

    MVC中的其他新特性 (GlobalImport全局导入功能) 默认新建立的MVC程序中,在Views目录下,新增加了一个_GlobalImport.cshtml文件和_ViewStart.cshtm ...

  5. C#6.0 中的那些新特性

    C#6.0 中的那些新特性 前言 VS2015在自己机器上确实是装好了,费了老劲了,想来体验一下跨平台的快感,结果被微软狠狠的来了一棒子了,装好了还是没什么用,应该还需要装Xarmain插件,配置一些 ...

  6. iOS中的项目新特性页面的处理

    一般项目中都会出现新特性页面,比如第一次使用应用的时候,或者在应用设置里查看新特性的时候会出现. 这里,选择新建一个专门处理项目新特性的控制器,来完成功能. 首先是 NewFeaturesViewCo ...

  7. Xcode中StoryBoard Reference 新特性的使用

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  8. 浅析Oracle 12c中Data Guard新特性

    浅析Oracle 12c中Data Guard新特性   写在前面 无论是做Oracle运维的小伙伴还是老伙伴,想必对Oracle数据库的数据级灾备核心技术—Data Guard是再熟悉不过了!这项从 ...

  9. ES6系列之项目中常用的新特性

    ES6系列之项目中常用的新特性 ES6常用特性 平时项目开发中灵活运用ES6+语法可以让开发者减少很多开发时间,提高工作效率.ES6版本提供了很多新的特性,接下来我列举项目中常用的ES6+的特性: l ...

随机推荐

  1. spring基础系列--JavaConfig配置

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/7171011.html 早以前,Spring推荐使用XML的方式来定义Bean及Bean之间 ...

  2. kali切换字符界面模式和切换图形界面模式

    我也是走了很多弯路,下面把正确的命令写出来,网上的不是说不正确,是linux命令做出了更改 Systemd是一种新的linux系统服务管理器 它替代了init, 直接上命令吧! 切换至字符界面 sud ...

  3. Java用Cookie简单限制点赞次数

    楼主最近在搞一个当下比较流行的点赞功能,这个功能也是让程序员又爱又恨啊 说起爱,点赞是个社会化的动作,全民都在为美好的事情,行为,动作,点赞. 说起恨,你很难在用户没有登录的情况下限制恶意点赞的机器人 ...

  4. 华为OJ之尼科彻斯定理

    题目详情: 验证尼科彻斯定理,即:任何一个整数m的立方都可以写成m个连续奇数之和. 例如: 1^3=1 2^3=3+5 3^3=7+9+11 4^3=13+15+17+19 输入:一个整形数字 输出: ...

  5. 数据库sql优化方案

    声明:这个不是我自己写的,是我们老师给我,我拿出来分享一下! 为什么要优化:     随着实际项目的启动,数据库经过一段时间的运行,最初的数据库设置,会与实际数据库运行性能会有一些差异,这时我们    ...

  6. BI服务器配置与客户端情况

    1. BI描述 FineBI是一款纯B/S端的商业智能分析服务平台:支持通过web应用服务器将其部署在服务器上,提供企业云服务器.用户端只需要使用一个浏览器即可进行服务平台的访问和使用.因此在配置使用 ...

  7. （转）java之runnable jar与普通jar

    背景:项目中有时候需要导出相关的jar包,可是总是不能分清楚. 1 导出包 导出普通jar包(可作为第三方库,类似dll,so等) 在eclipse中右键选择except->java->j ...

  8. （转）如何将 Excel 文件导入到 Navicat for MySQL 数据库

    场景:工作中需要统计一段时间的加班时长,人工统计太过麻烦,就想到使用程序实现来统计 1 如何将 Excel 文件导入到 Navicat for MySQL 数据库 Navicat for MySQL  ...

  9. Hbase单机安装部署

    Hbase单机安装部署 http://blogxinxiucan.sh1.newtouch.com/2017/07/27/Hbase单机安装部署/ 下载Hbase Hbase官网下载地址 http:/ ...

  10. 小白浅论JAVA数组中“for加强版”

    代码: /*String[] s=new String[]{"sdsfd","fgd","sdf"}; for(String a:s) Sy ...