js4DOMの練習

DOMはDocumentObject Model（Document Object Model）の略語であり、DOMは、すべてのHTML要素のオブジェクトと属性、およびそれらにアクセスするためのメソッドを定義します。
DOMを取得する
方法は？ネイティブメソッドは次のとおりです。

// 方式一 根据id获取dom节点
document.getElementById("id");

// 方式二 获取标签名称为参数的dom节点，返回一个数组
document.getElementsByTagName("ul");

//方式三 获取class="hh"的dom节点，返回一个数组
document.getElementsByClassName("hh");

//方式四 #params: 根据id获取dom, .params: 根据class名获取dom 多个相同类名获取首个节点, 
//params:根据标签名称获取dom 多个标签名相同获取首个标签节点
document.querySelector("#params");

document.querySelectorAll("");

個人的には4番目のものを使用することを好みます。もちろん、jQueryを導入する必要がある場合、jQueryには次のようなdomを取得するためのより便利な方法があります。

//#params:根据id获取dom, .params:根据class名获取dom
$("params")

上記はdomを取得するためのより一般的に使用される方法であり、次のステップはdomを操作することです

// 比如html中有一个id 为show的元素
var show = document.querySelector("#show");
    console.log(show.innerHTML) // 获取该节点下的文本及标签
    show.innerHTML = "你好，我是dom"// 当然这里面也可以放置标签
    show.innerHTML ="<p id='showChild' οnclick='changeColor(this)'>点我试试</p>"

    function changeColor(dom){
    
    
        console.log(dom);
        dom.style.background = 'red';
    }

    console.log(show.textContent); // 获取里面的文本

    // 当然你也可以动态的创建节点并添加至dom中
    var virDom = document.createElement('div');
    console.log(virDom);
    virDom.setAttribute("class",'show');
    virDom.textContent = "你好我是dom";
    show.appendChild(virDom);

    // 你能够通过改变dom的className 实现某些简单的动画。
    virDom.className = "red";

    // 删除子节点,就好像他/她从未来过一样。
    show.removeChild(virDom);
    var showChild = document.querySelector("#showChild");
    
    // 还可以让她指定插入到某个节点之前那(要插入的节点,基准节点)
    show.insertBefore(virDom,showChild);

上記は、基本的なdom操作のデモンストレーションです。このdomを記録することはほとんど同じです、残りはより練習です。