DOM操作步骤

①找到dom对象

②添加事件

③执行驱动程序

获取对象

获取文档对象

console.log(document)

获取html对象

console.log(document.documentElement)

 获取body对象

console.log(document.body)

通过元素的id查找标签对象

document.getElementById('box')

通过标签名字查找对象

document.getElementsByTagName('button')

 

 样式操作

在dom执行驱动程序函数里的操作，修改需要用到样式操作，例如：

Odiv.style.backgroundColor = 'green';
// 修改获取到对象的背景色

 

DOM的增删改创建

window加载顺序 （先加载DOM元素，之后再加载图片资源）

window.onload 方法 是等待DOM和图片资源加载完成之后才调用的方法，会出现时间覆盖现象，一般不推荐使用。程序入口函数

为了减少获取dom对象的冗余，可以写成类似函数

function $(idName) {
        return document.getElementById(idName)
    }

 

DOM的创建

<button id = 'btn'>添加</button>
    <div id = 'box'></div>
    <script>
    function $(idName) {
        return document.getElementById(idName)
    }
    $('btn').onclick = function () {
        var op = document.createElement('p');  //dom 创建一个 p 标签
        $('box').appendChild(op);   //dom的追加 向父元素内追加子元素 用appendchild方法
        op.innerText='alex'   //dom修改标签内容
    }