HTML DOM

docnment

getElementById

//根据id设置标签
document.getElementById("demo");
//因为id是唯一的，所以getElementById可以直接设置
document.getElementById("demo").innerHTML = 值;

getElementsByClassName

//根据class设置标签
document.getElementsByClassName("demo");
//class类可以很多个一起用
let sum = document.getElementsByClassName("demo");
//sum[0]表示第一个使用class("demo")的标签
sum[0].innerHTML = "你好";

getElementsByTagName

//根据标签设置
document.getElementsByTagName("h1");
//标签同时也有很多
let sum = document.getElementsByTagName("h1");
//sum[0]表示第一个h1标签
sum[0].innerHTML = "你好";

querySelector

       
//根据id
document.querySelector("#demo").innerHTML = "你好";
//根据class
document.querySelector(".demo").innerHTML = "你好";
//根据标签
document.querySelector("h1").innerHTML = "你好";

//querySelectorAll
//id
let sum = document.querySelectorAll("#demo");
sum[0].innerHTML = "你好";
//class
let sum = document.querySelectorAll(".demo");
sum[0].innerHTML = "你好";
//标签
let sum = document.querySelectorAll("h1");
sum[0].innerHTML = "你好";

innerHTML可以识别HTML语句,innerText只能识别文本

节点

//返回节点的父节点
parentNode
//返回子节点
childNodes
//返回第一个节点
firstChild
//返回最后一个节点
lastChild
//下一个节点
nextSibling
//上一个节点
previousSibling
//作用相同，但是省略换行和空
firstElementChild
lastElementChild
nextElementSibling
previousElementSibling