【复习】js中的dom部分

2022.1.16 [P195-P202]

【1】P195 简单认识dom：通过此接口改变页面的结构内容

【2】P196 getElementById获取元素

1.通过id获取

<div id = "time">2019-9-9</div>
<script>
    var timer = document.getElementById('time');
    console.log(timer);
    console.log(typeOf timer);
    console.log(timer);
<script>

【3】P197 getElementByTagName获取某种标签元素

1.根据标签名获取

注：得到的元素对象的集合，以伪数组的形式储存

<script>
    var lis = document.getElementByTagName('li');
    console.log(lis);
    for (var i = 0;i<lis.lenthgh;i++)
    {
        console.log(kis[i]);
    }

2.还可以获取某个元素内部所有指定标签名的子元素

注：父元素必须是单个对象，可以用id特别标出，获取时不包括父元素自己

var ol = document.getElementById('ol');
console.log(ol.getElementByTagName('li'));

【4】P198 H5新增获取元素方式

1.根据类名获得某些元素集合 以伪元素形式输出 

getElementsByClassName

2.querySelector返回指定选择器的第一个元素对象

注：里面的选择器要加符号

3.querySelectorAll()返回指定选择器的所有元素对象集合

【5】p199 获取body和html元素

1.body

document.body;

2.html

document.documentElement;

【6】p200事件三要素

1.事件源【以下以按钮为例】

<button id = "btn">A</button>

var btn = document.getElementById('btn');

2.事件类型（如何触发）

3.事件处理程序

btn.onclick = function(){alert('b');}

【7】p201执行事件的步骤

【8】操作元素：修改元素内容

btn.onclick = function(){
    div.innerText = getDate();
}
function getDate(){
    rerutn...
}