DOM:

1.文档对象模型（Document Object Model）标准编程接口

2.一个页面就是一个文档，DOM中使用document表示。页面中的所有标签都是元素，DOM中使用element表示。

网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示。DOM把以上内容都看做是对象。

 

• 根据id获取 document.getElementById()  返回的是元素对象

    <div id="time">2020-6-8</div><script>var tm = document.getElementById('time');console.log(tm);//输出：<div id="time">2020-6-8</div></script>

• 根据标签名获取 document.getElementByTagName() 返回的带有指定标签名的对象集合

    <ul><li>hhhhhh1</li><li>hhhhhh2</li><li>hhhhhh3</li><li>hhhhhh4</li><li>hhhhhh5</li></ul><ul id="nav"><li>hsd</li><li>hsd</li></ul><script>var lis = document.getElementsByTagName('li');//以伪数组的形式 [li,li,li,li]这样的形式存储console.log(lis.[0]);//输出第一个li  输出形式:<li>hhhhhh1</li>var navLis = document.getElementById('nav').getElmentByTagName('li');//先选中元素，再选择其中的li标签</script>

•  根据类名获取document.getElementByClassName('类名');返回一个对象集合
•  根据指定选择器document.querySelector('选择器'); 返回第一个元素对象
•  根据指定选择器document.querySelector('选择器'); 返回第一个元素对象

• innerText 和 innerHtml  读写元素中的内容 区别：Text不能识别html标签 Html可以，比如可以加粗文字<strong>保留空格和换行

<div id="title">编程语言</div>
<table border="1" id="table"><tr><td id="td1">java</td><td>java天下第一</td></tr><tr><td>c++</td><td>c++天下第一</td></tr><tr><td >c#</td><td id="td3">c#天下第一</td></tr>
</table>
<button id="btn1">标头</button>
<button id="btn2">第一行，第一格</button>
<button id="btn3">第三行，第二格</button>
<script>var btn1 = document.getElementById('btn1');btn1.onclick = function () {var title = document.getElementById('title');alert(title.innerHTML);}var btn2 = document.getElementById('btn2');btn2.onclick = function () {var tr1 = document.getElementById('td1');alert(tr1.innerHTML);}var btn3 = document.getElementById('btn3');btn3.onclick = function () {var tr3 = document.getElementById('td3');alert(tr3.innerHTML);}
</script>//用对象.innerHtml来显示元素内容

 

•