HTML5常见新增API

HTML

1.getElementsByClassName()方法

getElementByClass方法接受一个参数,即一个包含一或多个类名 的字符串,返回带有指定类的所有元素的NodeList。传入多个类名时,类名的先后顺序不重要.

var allCurrentUsername = document.getElementByClassName("demo active");

var selected = document.getElementById("myElement").getElementByClassName("selected");
2.classList
  • add(value): 将给定的字符串值添加到列表中。如果值已经存在,就不添加了。
  • contains(value): 表示列表中是否存在给定的值,如果存在则返回true,否则返回false。
  • remove(value): 从列表中删除给定的字符串。
  • toggle(value): 如果列表中已经存在给定的值,删除它;如果列表中没有给定的值, 添加它。
div.classList.remove("disabled");
div.classList.add("current");
div.classList.toggle("username");
if (div.classList.contains("bd") && !div.classList.contains("disabled")) {
    // TODO
    }
for (var i = 0, len = div.classList.length; i < len; i++) {
    doSomething(div.classList[i]);
}
3.自定义数据属性

HTML5 规定可以为元素添加非标准的属性,但要添加前缀data-, 目的是为元素提供与渲染无关的信息,这些属性可以任意添加、随便命名,只要以data-开头即可:

<div id="demo" data-appId="123" data-appName="Hello"></div>
var div = document.getElementById("demo");

var appId = div.dataset.appId;
var appName = div.dataset.appName;

div.dataset.appId = 321;
div.dataset.appName = "Hi";

if (div.dataset.appName){
    alert("Hi," + div.dataset.appName);
}
4.outerHTML属性

outerHTML 属性和innerHTM 类似;
在读的模式下,outerHTML 返回调用它的元素及所有子节点的HTML 标签。在写的模式下,outerHTML 会根据指定的HTML字符串创建新的DOM子树,然后用这个DOM子树完全替换调用元素。举个例子:

<div id="wrapper">
    <p>This is a <strong>pragraph</strong> with a list follwing it.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>
var oBox = document.getElementById('wrapper');
console.log(oBox.innerHTML);

用使用outerHTML 属性以下面这种方式设置值:

oBox.outerHTML = "<p>This is a paragraph.</p>";

上面这段代码完成的操作与下面的代码作用一样:

var p = document.createElement('p');
p.appentChild(document.createTextNode('THis is a paragraph.'));
oBox.parentNode.replaChild(p, oBox);
5.insertAdjacentHTML()方法

插入标记的最后一个新增方式是insertAdjacentHTML()方法。它接收两个参数:插入的位置 和 要插入的HTML文本。第一个参数必须是指定的值之一:

  • "beforebegin", 在当前元素之前插入一个紧邻的同辈元素;
  • "afterbegin", 在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素;
  • "beforeend", 在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素;
  • "afterend", 在当前元素之后插入一个紧邻的同辈元素。

注意,这些值都必须是小写形式。第二个参数是一个HTML 字符串(与innerHTML 和outerHTML的值相同),如果浏览器无法解析该字符串,就会抛出错误。

element.insertAdjacentHTML('beforbegin', '<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>');

发表评论