1.DOM简介

当网页被加载时，浏览器会创建页面的文档对象模型，即dom（document object model）。

2.DOM操作HTML

2.1 改变HTML输出流

不要在文档加载完成之后使用document.write（）。会覆盖该文档

2.2 寻找元素

通过id找到HTML元素

立即学习“Java免费学习笔记（深入）”；

通过标签找到HTML元素

2.3 改变HTML内容

使用属性：innerHTML

2.4 改变HTML属性

使用属性：attribute

Object_HTML.html

nbsp;html>                                            Hello
                            function demo(){                var nv=document.getElementById("pid");                nv.innerHTML="World";                document.getElementsByName("p");//p如果相同，相同元素的第一个            }                        
        百度                            function demobd(){                document.getElementById("aid").href="index.html";            }                        
                                    function demoimg(){                document.getElementById("iid").src="img/308048.jpg";            }

登录后复制

3.DOM操作CSS

通过DOM对象改变CSS

语法：document.getElementById(id).style.property=new style

Object_CSS.html

nbsp;html>                                                        hello        
                            function demo(){                document.getElementById("p").style.background="blue";                document.getElementById("p").style.color="white";            }

登录后复制

css/Object_CSS.css

.p{    background-color: blueviolet;    height: 200px;    width: 300px;}

登录后复制

4.DOM EventListener

4.1 DOM EventListenter

方法：addEventListener()

removeEventListener()

4.2 addEventListener()

方法用于指定元素添加句柄

4.3 removeEventListener()

移除方法添加句柄

EventListener.html

nbsp;html>                                                        document.getElementById("btn").addEventListener("click",function(){                alert("hello");            });                                            var x=document.getElementById("btnjb");            x.addEventListener("click",hello);            x.addEventListener("click",world);            x.removeEventListener("click",hello);            function hello(){                alert("hello");            }            function world(){                alert("world");            }

登录后复制

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！