Html 5一般的な新規API

6851 ワード
javaScript
1.getElementsByClassName()メソッド
getElementsByClassName()メソッドは、1つ以上のクラス名を含む文字列というパラメータを受信し、指定したクラスのすべての要素を持つ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):リストに指定した値がすでに存在する場合は、削除します.リストに値が指定されていない場合は、その値を追加します. 
//  "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、カスタムデータ属性
HTML 5では、要素に非標準的な属性を追加できることを規定していますが、プレフィックスdataを追加するには、要素にレンダリングに関係のない情報を提供したり、意味情報を提供したりすることを目的としています.これらのプロパティは、dataから始まるだけで任意に追加、任意に名前を付けることができます.例を見てみましょう.
//             
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 。 。


    
This is a paragraph with a list following it.

    
    
        
  • Item 1
    • 
        
  • Item 2
    • 
        
  • Item 3
    • 
    


var oBox = document.getElementById('content');
//     ，    innerHTML  ，      div  ；
console.log(oBox.innerHTML);

outerHTML ：

oBox.outerHTML = "
This is a paragraph.
";

DOM ：

var p = document.createElement("p");
p.appendChild(document.createTextNode("This is a paragraph."));
oBox.parentNode.replaceChild(p, oBox);

，

DOM

。

5、insertAdjacentHTML()

insertAdjacentHTML() 。 ： HTML 。 ：

  • "beforebegin"， ；
  • "afterbegin"， ；
  • "beforeend"， ；
  • "afterend"， 。

， 。 HTML （ innerHTML outerHTML ）， ， 。 。

//           
element.insertAdjacentHTML("beforebegin", "
Hello world!
");
//          
element.insertAdjacentHTML("afterbegin", "
Hello world!
");
//           
element.insertAdjacentHTML("beforeend", "
Hello world!
");
//           
element.insertAdjacentHTML("afterend", "
Hello world!
");
VHDL言語
(2018-05-04.Python ZeroからOneまで)五、(フロントエンド)HTML 5とCSS 3_1.5.3 CSS 3フィレット、シャドウ、rgba