DOM 操作HTML、CSS、EventListener

DOM操作html###

1.改变html输出流：
注意:绝对不要再文档加载完成之后使用document.write()。这会覆盖该文档

eg:(会覆盖原文档)

    
Hello
    按钮
    

2.寻找元素：
通过id找到html元素
通过标签名找到html元素
3.改变html内容：
使用属性：innerHTML

eg:

    
Hello
    按钮
    

4.改变HTML属性：
使用属性attribute:

        网址
        按钮
        
    

DOM操作HTML元素详解######

    1.HTML DOM：当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
    DOM 操作html：JS改变html元素、html属性、css样式、对页面中所有事件作出反应
            a.改变HTML输出流：
                注意：不要再文档加载完成之后使用document.write()。这会覆盖该文档
            b.寻找元素：
                通过ID 找到HTML元素         document.getElementById()
                通过标签名找到HTML元素       document.getElementsByTagName("p")      寻找相同元素中的第一个
            c.改变html内容：
                使用属性：innerHTML         document.getElementById().innerHTML= "";
            d.改变HTML属性：
                使用属性：attribute
                    
                        
                        
                    
        方法：
            getElementsByName()         获取name          通过 元素的name标签
            getElementsByTagName()      获取元素           通过元素名 P
            getAttribute()              获取元素属性      getAttribute("属性名")
            setAttribute()              设置元素属性      setAttribute("属性名","属性值")
            childNodes()                访问子节点
            parentNode()                访问父节点
            createElement()             创建元素节点
            createTextNode              创建文本节点
            insertBefore()              插入节点
            removeChild()               删除节点
            offsetHeight                网页尺寸
            scrollHeight                网页尺寸
        

DOM操作css###

1.通过DOM对象改变CSS
    语法：document.getElementBuId(id).style.property=new style;
    
        
    
    
        

            hello
        
        按钮
        
    

DOM 操作EventListener###

语法：document.getElementById(id).style.property=new style
Dom EventListener:
1.addEventListener(): 向指定元素添加事件句柄
2.removeEventListener(): 移除添加的事件句柄

                按钮