2018-03-24 JS DOM入門

3916 ワード

DOM現在の共通バージョンはDOM 3です.
1.JS初級は主に二つの役割についています.
1.元素を探しています.2.元素を追加します./クラスを削除します.
2.ノードAPI

1.nodeType

Node.ELEMENT_NODE === 1  //true，    
Node.TEXT_NODE === 3     //true，    
Node.COMMENT_NODE === 8 //true，        
Node.DOCUMENT_TYPE_NODE === 10 //true， ：
Node.DOCUMENT_FRAGMENT_NODE === 11 
//  ！

xxx.nodeType === 3       //     xxx

.tagName ulのtagNameは「UL」(大文字!)

let brother = li.getElementsByTagName('UL')[0];

getElements ByTagNameというAPIで検索されたのは、li要素の子孫であり、順番にすべてのulに戻り、戻るのは配列であり、［0］

を記入します.

.get Attribute

a.href     //    href，     href  http  
a.getAttribute('href')  //       href

.targetとcurrentTarget

liTags[i].onmouseenter = function (x) {
      console.log(x.target);       //x.target          ， a     span，      span
      console.log(x.currentTarget) //x.currentTarget        ，  liTags[i]    
}

.セレクタ

let a = document.querySelector('a[href="' + id + '"]')
//href        ，          ！    id

.息子チルドレン

var c = div.children;    //   div       
var c = div.childNodes;  //   div

.Siblingsは、すべての兄弟を獲得する方法の一つである.

var getSiblings = function (elem) {
var siblings = [];
var sibling = elem.parentNode.firstChild;
for (; sibling; sibling = sibling.nextSibling) {
    if (sibling.nodeType !== 1 || sibling === elem) continue;
        siblings.push(sibling);
    }
    return siblings;
};

すべての兄弟方法を取得するためのgetSiblings():

var elem = document.querySelector('#some-element');
var siblings = getSiblings(elem);

nextSibling改行があれば、改行は次の兄弟とみなされます.

.nodeName()

document.body.nodeName    //'BODY'，body     ，(  svg，            ）
document.documentElement.nodeName    //'HTML'

9.clone Node()

var div2 = div1.cloneNode();  //  div1     div2
var div2 = div1.cloneNode(true);  //  div1             div2，    var div2=div1;

.isSameNode()とisEqualNode()の検出内容が同じかどうかisSameNodeは、2つの要素が同じノード

であるかどうかを検出する.

11.RemoveChild()はページ内でchildノードを除去するが、childはメモリ内に存在する

である.

.replacceChild()は息子を交換して、換えられたのはページの中でなくなっただけで、それともメモリの中の

が存在します.

.normalize()コードを正常化する

.innerText()とtextContent()inneratextはIEのプライベート実装であるが、FF以外のブラウザにも実装されており、text Contentはw 3 cの標準APIであり、現在はIE 9も実現されている.違い1:textContentはすべての要素の内容を取得します.scriptとstyleタグの中の内容を含んでいます.innerTextは区別されません.要素の中の既存の内容を上書きします.

div1.textContent = 'hello';  //  div1       hello   
div1.appendChild(document.createTextNode('hello'));  //        div1

3.Dcument API

1.Dcument.children[html、Dcumentはhtmlのお父さん

です.

.document.documentElementはhtml

です.

.Dcument.writeはなるべく使わないようにします.遅延性と非同期性の方法で、ページ全体の内容を

に上書きします.

.querySelector()とquerySelectorAll()querySelectorAllは、疑似配列

を返します.
4.JSでページ内のジャンプを完了する

let aTags = document.querySelectorAll('nav.menu > ul > li > a');   //    a  ，        
for(let i=0;i

5.consone.logデバッグの大法
問題が発生したら、一歩ごとにconsone.logで、多くの問題を解決できます.
6.set Interval()

let i=0;
let say = setInterval(() => {
            if(i === 25){
                window.clearInterval(say);      //  setInterval       
                return;
            }
            i++;
           console.log(i);    // 1   25，    ， 25  
        },1000);

7.Tween.js
動画のスピードチェック表

cdnでtweenを検索し、htmlで

を参照してください.

githb-tweenで使用教程

を調べます.
この文章の著作権は彭奕沢と腹をすかせた人谷に属します.

webフロントエンドの実験2:JSを利用してウェブページのソースコードを保護します.