html5新增api(持续更新)
2017-06-12 15:55
183 查看
getElementsByClassName()方法
getElementsByClassName()方法接收一个参数,即一个包含一或多个类名的字符串,返回带有指定类的所有元素的NodeList。传入多个类名时,类名的先后顺序不重要。//取得所有类中包含"username"和"current"的元素,类名的先后顺序无所谓 var allCurrentUsernames = document.getElementsByClassName("username current"); //取得ID 为"myDiv"的元素中带有类名"selected"的所有元素 var selected = document.getElementById("myDiv").getElementsByClassName("selected");
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]); }
自定义数据属性
<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); }
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>
使用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);
结果,就是新创建的
元素会取代DOM 树中的
元素。
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>");
结果可以概括为:
<!-- beforebegin --> <p> <!-- afterbegin --> foo <!-- beforeend --> </p> <!-- afterend -->
相关文章推荐
- Xcode-通过ApplicationLoader上传Api问题总结(持续更新)
- HTML5 API——无刷新更新地址 history.pushState/replaceState 方法
- 中文API学习文档(持续更新)
- HTML5脚本扩展---新增小型API
- 【转】HTML5 API——无刷新更新地址 history.pushState/replaceState 方法
- Spark JAVA RDD API 最全合集整理,持续更新中~
- Android for myself新增知识点总结(保持持续更新)
- 对HTML5新增JS Api的思考
- 免费节假日API 更新新功能了 新增农历信息返回
- 【转】HTML5 API——无刷新更新地址 history.pushState/replaceState 方法
- 深入理解javascript选择器API系列第三篇——HTML5新增的3种selector方法
- 其他几个API_获得新增的数据主键_批处理_可滚动的结果集_可更新的结果集(不常用)
- Android 系统中,那些能大幅提高工作效率的 API 汇总(持续更新中...)
- PJAX初体验(主要是利用HTML5 新增API pushState和replaceState+AJAX)
- OpenGL ES Shader相关API 总结【4】—— GLSL 语法小结【持续更新】
- HTML5之新增标签与API
- Pebble智能手表重大更新:全面整合iOS 7通知中心,SDK新增四个API
- Android 系统中,那些能大幅提高工作效率的 API 汇总(持续更新中...)
- Android 使用系统Api设置系统各种属性(持续更新,欢迎讨论)
- Nova API microversion 变更记录 (持续更新)