へへへ、熱いうちに鉄を打って、前にまとめたものを整理して貼ってください.DOM部分にとって重要です.
1.要素を取得する
1.1属性から要素を取得する

document.body

document.documentElement 

body,htmlはdocumentからしか入手できません.

[SelectElement].options

selectの次のグループのoptionsを取得します.

[FormName]

[FormName][InputName]

name=「formName」のform要素を取得して、何を取得しますか?これは変数名をそのまま使ってもいいです.
一つ取ってもいいですか?
最後の手段で要素を取得する場合、位置付けされたフォーム要素が一つであれば要素を返します.配列ではなく、フォーム要素が複数であれば要素のセットを返します.
1.2メソッドで要素を取得する

document.getElementById()

この方法は、documentからしかid属性が対応するパラメータの単一要素を取得できません.

document.getElementsByName()

この方法は、documentからしかname属性が対応するパラメータの要素のセットを取得できません.

[Element].getElementsByTagName()

ラベル名が対応するパラメータの要素セットを取得します.

[Element].getElementsByClassName()

クラス属性に対応するパラメータを含む要素のセットを返します.IE 8＋

[Element].querySelector()

一つの要素IE 8＋使い方はJQueryに似ています.

[Element].querySelectorAll()

要素IE 8+のセットを返します.使い方はJQueryに似ています.
classを通じて元素のパッケージ関数を獲得して、IE 8以下のブラウザーに対応するために、この年は自分で閉じた関数で互換性の問題を解決しますか?見たくないなら、見ないでください.

function getByClass(parent, classStr) {
    
    if(parent.getElementsByClassName) {
        
        return parent.getElementsByClassName(classStr)
    
    }
    else {
        var arr = []
        var elements = parent.getElementsByTagName('*')
        var hasClass = false

        for(var i = 0; i

2.要素を作成する
2.1属性による要素の作成

[element].innerHTML

// eg:
div.innerHTML = '
Hello
'

属性が付与された値はページに直接レンダリングされます.ラベル要素は無効です.
2.2方法により要素を作成する

document.createElement()

この方法は、document要素のみが使用できます.パラメータは、作成したいラベル名です.しかし、我々は[element].apendChild(createelement)を呼び出す必要があります.作成した要素をDOMに挿入します.
3.元素の属性
3.1一般属性
一般的な属性値は.演算と［］演算で取得できます.

    



    document.getElementById('link').href
    // => "http://www.jianshu.com/"

いくつかの方法でユーザー定義の属性を操作することもできます.もちろん彼らは一般的な属性にも有効です.

[Element].getAttribute([attributeName])
[Element].setAttribute([attributeName],[attributeValue])
[Element].removeAttribute([attributeName]) 

説明が必要なものはいくつかあります.
3.2[Element].クラスName
classNameは実際には元素のクラスです.彼の値を直接修正してクラスを変えることができます.

div.className = 'col-xs-6 col-md-4'

また、[element].classistが返したクラス配列で操作することもできます.この属性はie 10以上のブラウザでのみサポートされます.

div.classList
// => ['col-xs-6', 'col-md-4']

div.classList.add('col-offset-2')
// => ['col-xs-6', 'col-md-4', 'col-offset-2']

div.classList.remove('col-md-4')
// => ['col-xs-6', 'col-offset-2']

div.classList.contains('col-xs-6')
// => true

3.3[Element].スタイル
一般的にはCSSStyleDeclarationというオブジェクトが得られますが、基本的には最も直接的なDOM操作はそれを修正して完成します.

div.style.color  = 'orange'

このようにCSSStyleDeclarationというオブジェクトを使用すると、もう一つの不思議な機能があります.私たちが行で設定したスタイルはこのオブジェクトに追加され、インデックス値を付けます.

    





 
 
                300+，          ，           ，