Practica js 4DOM

DOM es la abreviatura de Document Object Model (Document Object Model), DOM define los objetos y atributos de todos los elementos HTML, así como los métodos para acceder a ellos.
¿Cómo obtener el DOM?
El método nativo es el siguiente:

// 方式一 根据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("");

Personalmente prefiero usar el cuarto. Por supuesto, si necesita introducir jQuery, jQuery tiene una forma más conveniente de obtener dom, como por ejemplo:

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

Lo anterior es la forma más utilizada para obtener dom, luego el siguiente paso es operar 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);

Lo anterior es una demostración de la operación dom básica. Grabar este dom es casi lo mismo, el resto es más práctica.

Supongo que te gusta