HTML5中的DOM新特性
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新特性的更多相关文章
- HTML5 中的一些新特性
HTML5是HTML最新的修订版本,包含了新的标签元素,属性和行为,同时包含了一系列可以被用来让 Web 站点和应用更加多样化,功能更强大的技术.HTML5实现了不依赖flash插件播放视频,而且引入 ...
- html5中的dom中的各种节点的层次关系是怎样的
html5中的dom中的各种节点的层次关系是怎样的 一.总结 一句话总结:Node节点是所有节点的基类,所以都继承它的方法 1.dom提供在js中动态修改html标签的作用 比如增加修改标签等,并且是 ...
- Jdk5.0中出现的新特性
掌握jdk5.0中出现的新特性1.泛型(Generics)2.增强的"for"循环(Enhanced For loop)3.自动装箱/自动拆箱(Autoboxing/unboxin ...
- MVC中的其他新特性
MVC中的其他新特性 (GlobalImport全局导入功能) 默认新建立的MVC程序中,在Views目录下,新增加了一个_GlobalImport.cshtml文件和_ViewStart.cshtm ...
- C#6.0 中的那些新特性
C#6.0 中的那些新特性 前言 VS2015在自己机器上确实是装好了,费了老劲了,想来体验一下跨平台的快感,结果被微软狠狠的来了一棒子了,装好了还是没什么用,应该还需要装Xarmain插件,配置一些 ...
- iOS中的项目新特性页面的处理
一般项目中都会出现新特性页面,比如第一次使用应用的时候,或者在应用设置里查看新特性的时候会出现. 这里,选择新建一个专门处理项目新特性的控制器,来完成功能. 首先是 NewFeaturesViewCo ...
- Xcode中StoryBoard Reference 新特性的使用
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- 浅析Oracle 12c中Data Guard新特性
浅析Oracle 12c中Data Guard新特性 写在前面 无论是做Oracle运维的小伙伴还是老伙伴,想必对Oracle数据库的数据级灾备核心技术—Data Guard是再熟悉不过了!这项从 ...
- ES6系列之项目中常用的新特性
ES6系列之项目中常用的新特性 ES6常用特性 平时项目开发中灵活运用ES6+语法可以让开发者减少很多开发时间,提高工作效率.ES6版本提供了很多新的特性,接下来我列举项目中常用的ES6+的特性: l ...
随机推荐
- Centos 6.5开启rsync同步
一.测试环境 操作系统:Centos6.5 Server1:172.18.11.100 源服务器 Server2:172.18.11.110 目标服务器 二.操作步骤: 1.先 ...
- docker~save与load的使用
回到目录 对于没有私有仓库来说,将本地镜像放到其它服务器上执行时,我们可以使用save和load方法,前者用来把镜像保存一个tar文件,后台从一个tar文件恢复成一个镜像,这个功能对于我们开发者来说还 ...
- python-web.py 入门介绍
内容来源:webpy.org 介绍: 1.python中web.py 是一个轻量级Python web框架,它简单而且功能强大.web.py是一个开源项目. 2.安装很简单:pip install w ...
- 20170717_python_爬虫_网页数据解析_BeautifulSoup_数据保存_pymysql
上午废了老大劲成功登陆后,下午看了下BeautifulSoup和pymysql,晚上记录一下 自己电脑装的sublime,字体颜色竟然拷贝不下来 - - 写的过程中遇到了很多问题: 1.模拟登陆部分 ...
- c# 多线程 创建对象实例
本次的标题是我在写单例模式的博客时遇到的问题,所以今天专门写了的demo让自己记住怎么简单的使用多线程. 一直纠结的是怎么在for循环中多次实例化对象,好复现单例模式在没有加锁的情况下出现多个实例对象 ...
- HTTP文件下载JAVA后台的实现
HTTP文件的下载后台JAVA代码 1.使用org.apache.http.impl.client.CloseableHttpClient 先上代码: public String downloadFi ...
- Spring mybatis源码篇章-MybatisDAO文件解析(二)
前言:通过阅读源码对实现机制进行了解有利于陶冶情操,承接前文Spring mybatis源码篇章-MybatisDAO文件解析(一) 默认加载mybatis主文件方式 XMLConfigBuilder ...
- bootstrap-table 怎么自定义搜索按钮实现点击按钮进行查询
bootstrap-table自带搜索框感觉有点丑,我们可以把搜索功能单独拉出来放到页面的某一个位置. 首先我们看一下官方演示: 如果你感觉集成的检索框不太好看,而且我们也不想让搜索框和列表放到一块去 ...
- 来一手 AOP 注解方式进行日志记录
系统日志对于定位/排查问题的重要性不言而喻,相信许多开发和运维都深有体会. 通过日志追踪代码运行状况,模拟系统执行情况,并迅速定位代码/部署环境问题. 系统日志同样也是数据统计/建模的重要依据,通过分 ...
- java核心技术面试整理
[前方高能,是这半年BAT,京东,远景,华为,中兴以及苏研发中心被问到的Java公共问题的一个整理] ------------------------------------------------- ...