开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

什么是document

文档对象模型( Document Object Model ,简称DOM) , 是W3C组织推荐的处理可扩展标记语言( HTML或者XML )的标准编程接口。对于HTML Document对象，每个载入浏览器的 HTML 文档都会成为 Document 对象，同时document也是window对象的一个属性。

我们可以在浏览器开发模式下，直接打印这个对象，可以看到结果

dom常用操作方法

获取对象元素

1. getElementById

对于每个html标签可以设置id属性，在js中我们就可以通过id获取到这个元素。

        <div id="child"  class="child" >

        </div>  
        let child=document.getElementById('child')

2. getElementsByClassName

这个方法可以获取到html标签中，指定类名的元素。

同时拥有多个类名的元素，中间用空格隔开。

        <div id="child"  class="child child2"  >

        </div>
 let child=document.getElementsByClassName('child')//获取类名有child的元素
 let child=document.getElementsByClassName('child child2') //获取类名有child child2同时都有的元素

3. getElementsByTagName

这个方法是通获取指定html标签元素，如果传入* 那么获取到的是页面中所有元素，可以用来查看页面中的所有元素节点的个数用（".length"）

let child=document.getElementsByTagName('div') //获取页面中div的元素。

获取和设置属性

getAttribute('属性名')

这个方法可以获取指定元素上的某个属性。

       <div id="child"  class="child child2"  >

        </div>
    let child=document.getElementById('child')
    let name = child.getAttribute('class') //获取class属性
    console.log('name: ', name); //打印 name:  child child2

setAttribute(“属性名”,“属性值”)

可以给指定标签设置一个属性和对应的属性值

    let child=document.getElementById('child')
    child.setAttribute('title','我设置了属性')
    let title = child.getAttribute('title')
    console.log('title: ', title); //打印 title:  我设置了属性

removeAttribute('属性名')

移除元素的某个属性

 let child=document.getElementById('child')
 child.removeAttribute('class'); //就会把class属性移除掉了，样式就没了

window.onload 函数

网页中的某些JavaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况，为了避免类似情况的发生，我们可以使用window.onload事件，因为页面加载的时候会执行onload事件，如果有两个onload事件一起存在时，只能有后面一个会生效。

  window.onload=function(){
        console.log('window.onload: ', window.onload);
        let child2=document.getElementById('child2')   
        console.log('child2: ', child2);
    }

innerHTML方法

下面id="child"里是空内容，那么使用innerHTML方法，内容将会被填充。但是如果里面有内容，内容则会被替换。

    let child=document.getElementById('child')   
    child.innerHTML='<p>我来了</p>'

createElement('标签名')

创建一个标签，一般结合appendChild方法使用。

     let child=document.getElementById('child')
    var ptag=document.createElement("p");
    ptag.innerText='插入的标签'
    child.appendChild(ptag)

总结

主要记录一下平时可能常用的document对象的API,其实还有很多其他的，更多的可以查看官方文档 www.w3school.com.cn/jsref/dom_o… 来练习。

document 常用操作记录