DOM元素

Document

document代表当前的页面，HTML DOM文档树

document.title
"百度一下，你就知道"
document.title='lll'
"lll"

获取具体的文档树节点

<div id="grandf">
    <h1 id="father">标题党</h1>
    <p id="p1">11111111</p>
    <p id="p2">22222222</p>
</div>

<script>
    var h1 = document.getElementById('father');
    var h2 = document.getElementById('grandf');
    var h = document.getElementById('p1');
    var w = document.getElementById('p2');
</script>

获取cookie

document.cookie
"BIDUPSID=50B7804EEDDEB1D54996B09CCD816D27; PSTM=1617372976; BD_UPN=12314753; BAIDUID=714BE0358B7A76D4FE871EF2BB2EE75C:FG=1; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; BAIDUID_BFESS=46B3012A1825ED5F1E00A0CC22EB37F4:FG=1; Hm_lvt_aec699bb6442ba076c8981c6dc490771=1623816517,1625823259,1626013744; COOKIE_SESSION=346_1_6_5_10_6_0_0_5_4_1_1_14485_0_0_0_1626013917_1626013739_1626014256%7C9%23366355_20_1626013737%7C9; BD_HOME=1; delPer=0; BD_CK_SAM=1; PSINO=6; H_PS_PSSID=33801_33968_34222_31254_34004_34073_22160; BA_HECTOR=0l0g812gah242ga0ol1gen7bd0q"

history
history代表游览器的记录
history.back()//后退
history.forward()//前进

操作DOM对象

DOM：文档对象模型

核心

游览器网页就是一个DOM树形结构！

• 更新：更新DOM节点
• 遍历dom节点：得到Dom节点
• 删除：删除一个Dom节点
• 添加：添加一个新的节点

要操作一个Dom节点，就必须先获得这个DOM节点

得到DOM节点

<div id="grandf">
    <h1 id="father">标题党</h1>
    <p id="p1">11111111</p>
    <p id="p2">22222222</p>
</div>

<script>
    var h1 = document.getElementById('father');
    var h2 = document.getElementById('grandf');
    var h = document.getElementById('p1');
    var w = document.getElementById('p2');
    
    h2.lastChild;
    h2.children;

更新节点

h1.innerText='lyj'
"lyj"
h1.innerText='<strong>lyj<strong>'
"<strong>lyj<strong>"
h1.innerHTML='<strong>lyj<strong>'
"<strong>lyj<strong>"
h1.style.color=Credential
ƒ Credential() { [native code] }
h1.style.color= red;

删除节点
删除节点步骤，先获取父节点，在通过父节点删除自己
remove

<div id="grandf">
    <h1 id="father">标题党</h1>
    <p id="p1">11111111</p>
    <p id="p2">22222222</p>
</div>
  var h2 = document.getElementById('grandf');
    var father = h2.parentElement;
    father.removeChild(h2);

创建和插入节点

创建和插入节点。
　　1、新建节点：createElement(“节点名”)
　　2、新建文本节点：createTextNode(“文本内容”)
　　3、将文本节点添加到新建节点中：appendChild(文本节点名)
　　4、获取要插入节点的对象：getElementById(“id名”)
　　5、将新建节点插入到目标节点对象中：insertChild(要插入节点名，目标节点位置)