Html5 常见的新增API
2018-02-28 13:19
211 查看
1. getElementsByClassName()方法getElementsByClassName()方法接收一个参数,即一个包含一或多个类名的字符串,返回带有指定类的所有元素的NodeList。传入多个类名时,类名的先后顺序不重要。//取得所有类中包含"username"和"current"的元素,类名的先后顺序无所谓
var allCurrentUsernames = document.getElementsByClassName("username current");
//取得ID 为"myDiv"的元素中带有类名"selected"的所有元素
var selected = document.getElementById("myDiv").getElementsByClassName("selected");2. classList 属性add(value):将给定的字符串值添加到列表中。如果值已经存在,就不添加了。
contains(value):表示列表中是否存在给定的值,如果存在则返回true,否则返回false。
remove(value):从列表中删除给定的字符串。
toggle(value):如果列表中已经存在给定的值,删除它;如果列表中没有给定的值,添加它。
4000
HTML5 规定可以为元素添加非标准的属性,但要添加前缀data-,目的是为元素提供与渲染无关的信息,或者提供语义信息。这些属性可以任意添加、随便命名,只要以data-开头即可。来看一个例子。
<p>This is a <strong>paragraph</strong> with a list following it.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
p.appendChild(document.createTextNode("This is a paragraph."));
oBox.parentNode.replaceChild(p, oBox);结果,就是新创建的<p>元素会取代DOM 树中的<div>元素。5、insertAdjacentHTML()方法插入标记的最后一个新增方式是insertAdjacentHTML()方法。它接收两个参数:插入位置和要插入的HTML 文本。第一个参数必须是下列值之一:
"beforebegin",在当前元素之前插入一个紧邻的同辈元素;
"afterbegin",在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素;
"beforeend",在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素;
"afterend",在当前元素之后插入一个紧邻的同辈元素。
注意,这些值都必须是小写形式。第二个参数是一个HTML 字符串(与innerHTML 和outerHTML的值相同),如果浏览器无法解析该字符串,就会抛出错误。以下是这个方法的基本用法示例。//作为前一个同辈元素插入
element.insertAdjacentHTML("beforebegin", "<p>Hello world!</p>");
//作为第一个子元素插入
element.insertAdjacentHTML("afterbegin", "<p>Hello world!</p>");
//作为最后一个子元素插入
element.insertAdjacentHTML("beforeend", "<p>Hello world!</p>");
//作为后一个同辈元素插入
element.insertAdjacentHTML("afterend", "<p>Hello world!</p>");
var allCurrentUsernames = document.getElementsByClassName("username current");
//取得ID 为"myDiv"的元素中带有类名"selected"的所有元素
var selected = document.getElementById("myDiv").getElementsByClassName("selected");2. classList 属性add(value):将给定的字符串值添加到列表中。如果值已经存在,就不添加了。
contains(value):表示列表中是否存在给定的值,如果存在则返回true,否则返回false。
remove(value):从列表中删除给定的字符串。
toggle(value):如果列表中已经存在给定的值,删除它;如果列表中没有给定的值,添加它。
//删除"disabled"类 div.classList.remove("disabled"); //添加"current"类 div.classList.add("current"); //切换"user"类 div.classList.toggle("user"); //确定元素中是否包含既定的类名 if (div.classList.contains("bd") && !div.classList.contains("disabled")) { //执行操作 ) //迭代类名 for (var i = 0, len = div.classList.length; i < len; i++) { doSomething(div.classList[i]);3、自定义数据属性
4000
HTML5 规定可以为元素添加非标准的属性,但要添加前缀data-,目的是为元素提供与渲染无关的信息,或者提供语义信息。这些属性可以任意添加、随便命名,只要以data-开头即可。来看一个例子。
<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>
//本例中使用的方法仅用于演示 var div = document.getElementById("myDiv"); //取得自定义属性的值 var appId = div.dataset.appId; var myName = div.dataset.myname; //设置值 div.dataset.appId = 23456; div.dataset.myname = "Michael"; //有没有"myname"值呢? if (div.dataset.myname) { alert("Hello, " + div.dataset.myname); }4、outerHTML 属性outerHTML 属性和innerHTML 有点类似;在读模式下,outerHTML 返回调用它的元素及所有子节点的HTML 标签。在写模式下,outerHTML会根据指定的HTML 字符串创建新的DOM 子树,然后用这个DOM子树完全替换调用元素。下面是一个例子。<div id="content">
<p>This is a <strong>paragraph</strong> with a list following it.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
var oBox = document.getElementById('content'); // 读模式下,返回的和innerHTML类似,只不过包括了div本身; console.log(oBox.innerHTML);使用outerHTML 属性以下面这种方式设置值:oBox.outerHTML = "<p>This is a paragraph.</p>";这行代码完成的操作与下面这些DOM 脚本代码一样:var p = document.createElement("p");
p.appendChild(document.createTextNode("This is a paragraph."));
oBox.parentNode.replaceChild(p, oBox);结果,就是新创建的<p>元素会取代DOM 树中的<div>元素。5、insertAdjacentHTML()方法插入标记的最后一个新增方式是insertAdjacentHTML()方法。它接收两个参数:插入位置和要插入的HTML 文本。第一个参数必须是下列值之一:
"beforebegin",在当前元素之前插入一个紧邻的同辈元素;
"afterbegin",在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素;
"beforeend",在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素;
"afterend",在当前元素之后插入一个紧邻的同辈元素。
注意,这些值都必须是小写形式。第二个参数是一个HTML 字符串(与innerHTML 和outerHTML的值相同),如果浏览器无法解析该字符串,就会抛出错误。以下是这个方法的基本用法示例。//作为前一个同辈元素插入
element.insertAdjacentHTML("beforebegin", "<p>Hello world!</p>");
//作为第一个子元素插入
element.insertAdjacentHTML("afterbegin", "<p>Hello world!</p>");
//作为最后一个子元素插入
element.insertAdjacentHTML("beforeend", "<p>Hello world!</p>");
//作为后一个同辈元素插入
element.insertAdjacentHTML("afterend", "<p>Hello world!</p>");
相关文章推荐
- HTML5常见的新增API详解
- Html5 常见的新增API详解
- 搞懂html5新增的拖放API(分析火狐和其它浏览器的不同)
- 20178/2 笔记 html5新增API
- html5常见新增标签
- 用html5新增的js媒体 API手写的一个视频播放器
- HTML5脚本扩展---新增小型API
- HTML5学习笔记简明版(11):新增的API
- 对HTML5新增JS Api的思考
- HTML5 新增API学习总结
- HTML5外包团队:HTML5 Forms新增了许多新控件及其API
- html5新增api(持续更新)
- HTML5新增的拖放API---(一)
- HTML5中新增的文件API和拖拽API详解
- HTML5新增API学习笔记(二)本地程序缓存
- 深入理解javascript选择器API系列第三篇——HTML5新增的3种selector方法
- HTML5之新增标签与API
- AJAX-----14HTML5中新增的API---files
- 深入理解javascript选择器API系列第三篇——HTML5新增的3种selector方法
- Html5新增常见标签