js中的dom

HTML DOM对象(Document Object Model)：是一种文档对象模型，从js的角度，认为网页中的每一个标签都是一个独立的对象，这一类对象称为dom对象，以面向对象的思想来操作网页内容

获取dom对象

一般有四种方式进行获取：

通过 id 找到 HTML 标签

document.getElementById(“id")；

通过标签名找到 HTML 标签

document.getElementsByTagName("p"); 

通过类名找到 HTML 标签

document.getElementsByClassName("p");

通过name找到HTML标签

document.getElementsByName(“name"); 

修改标签属性

Html dom允许javaScript 改变html标签的内容。

document.getElementById(“username").value=“new value"; document.getElementById("image").src=“new.jpg";

document.getElementById("id").style.property=new style;

document.getElementById("p2").style.backgroundImage="url(bg.jpg)";

修改html的内容可以通过innerHTML属性

document.getElementById(“div”).innerHTML=new HTML 

注意：innerHTML浏览器会解释里面的内容，当成html标签来看待，而innerText则当成字符串直接显示在网页上。

注册事件

第一种方法：

第二种方法

注册事件的标准案例：