DOM简介：DOM可以通过脚本程序，来动态的修正网页的构造、内容、外不雅观。

DOM只是一个观点、规范，标准。
但DOM在浏览器中是通过各种各样的工具来实现。

BOM对应的浏览器工具；window、screen、history、navigator、location等

jsphp代码我的PHP进修第十六天JavaScript实战案例代码 GraphQL

构造：便是增加节点(标记)、删除节点(标记)，可以变动HTML的节点树。

内容：添加内容、删除内容。
元素工具的innerHTML属性

举例：

<h1></h1>

<script>

//通过标记名称取到一个数组工具

var arr = getElementsByTagName(“h1”);

//给h1元素工具增加内容

var str = “<u onclick=“window.alert(‘OK’);”>张三</u>”;

//给h1元素工具增加样式，利用核心DOM中的方法

arr[0].setAttribute(“style”,”color:#990000;”);

//让h1元素工具居中对齐，利用HTML DOM中的方法

arr[0].style = “text-align:center”; //style属性添加的是“行内样式”

arr[0].innerHTML = str; //innerHTML的内容可以是文本、CSS代码、JS代码、子标记

</script>

Onclick后面是什么内容？该当是JS代码。

HTML的公共属性：style、id、 class、 title

元素工具：每一个HTML元素，都对应一个元素工具。

外不雅观：便是样式或格式，紧张指CSS。

每一个HTML标记，都具有一个公共属性style，这个style属性在CSS DOM中又是一个工具。

可以通过这个style工具，来引入CSS中所有属性；

举例：h1.style =“width:400px;”; //表示style是一个属性，可以直接给style属性赋值

h1.style(); //表示style()是一个工具的方法

h1.style.width; //表示style是一个工具，只有工具后面才可以跟小数点

“width”表示是CSS属性中的一个，可以改换成其它的CSS属性

H1.style.height = “400px”;

H1.style.backgroundColor = “orange”;

H1.style.backgroundImage = “images/bg.gif”; //你们测试一下路径是否要加url()。

把稳：style工具的属性，每次都只能写一个，不像setAttribute()可以同时写很多个

HTML DOM的特性

（1）每一个HTML标记都对应一个元素工具；

（2）每一个HTML标记的属性，都与元素工具的属性逐一对应；

HTML DOM获取工具的方法

（1）利用getElementById()方法

<div id=“box”></div>

<script>

var obj = document.getElementById(“box”);

……

</script>

（2）利用getElementsByTagName(“li”)方法

（3）表单中访问一样平常用name来访问元素

<form name=“form1”onsubmit=“return checkForm()”>

用户名：<input type=“text” name=“username” />

<input type=“submit” value=“submit”>

</form>

onsubmit事宜：当单击提交按钮时发生，实行checkForm()去验证表单中的元素是否输入合法。
如果返回true，解释验证通过，可以提交表单；反之，返回false，解释数据不合法，阻挡表单提交。

name属性的利用，必须以“document”开始，一级一级地写子工具。

<script>

function checkForm()

{

//取到name=username的表单工具

var username = document.form1.username;

//对username的value进行判断

if( username.value == “”)

{

return false;

}else

{

return true;

}

}

</script>

2.事宜、事宜句柄和事宜处理代码

举例：<a href=http://www.toutiao.com onClick=“window.alert(‘这是今日头条’)”>今日头条</a>

事宜句柄 事宜处理代码

含义：当单击链接时(条件)，弹出一个“警告对话框”(行为、动作)。

单击是事宜，对应的是click，所谓“事宜”都不带“on”。

当单击时的事宜，对应的是onClick，onClick可以称为“事宜句柄”

例如：

click事宜，对应的事宜句柄是：onClick；

load事宜，对应的事宜句柄是：onLoad

mouseover事宜，对应的事宜句柄是：onMouseOver

……

当事宜发生时，干什么事情？去实行JS程序代码，该代码完成一项功能。

事宜处理程序：是指某一个事宜的值，这个值可以是任何JS代码。

<script type=\"大众text/javascript\公众>

function showInfo()

{

window.alert(\公众这里是今日头条\公众);

return false;

}

</script>

</head>

<body>

<a href=\"大众http://www.toutiao.com\"大众 onclick=\公众return showInfo()\"大众>今日头条</a>

</body>

3.事宜模型的分类

基本事宜模型：添加了一些常用的事宜类型。

onClick：当单击发生时；

onLoad：当网页中所有的标记都加载完成时；

onMouseOver：当鼠标放上时；

onMouseOut：当鼠标移出时；

onBlur：当失落去焦点时(光标移走)，如：当从文本框中移出后发生

onFocus：当得到焦点时(光标定位)，一样平常用于表单中元素。
如：当光标定位到文本框中时发生

onChange：当内容改变时，如：选择上传文件

onSelect：当选择改变时，如：二级联动菜单

onSubmit：当单击提交表单时发生

onReset：当重置表单时发生

4.给HTML元素增加事宜的方法

（1）HTML标记加一个事宜句柄属性，去调用一个函数

<a href=http://www.toutiao.com onclick=“showInfo()”>今日头条</a>

<script>

function showInfo()

{

Window.alert(“这里是今日头条”);

}

</script>

（2）元素工具的事宜句柄属性

<div id=“box”></div>

<script>

var obj = document.getElementById(“box”);

obj.onmouseover = showInfo; //将函数showInfo的地址(不能加括号)，传给了事宜句柄onmouseover

//当鼠标移出后，弹一个信息，该信息是一个匿名函数

obj.onmouseout = function(){ window.alert(‘这里是新浪’);}

</script>

（3）事宜返回值

有的事宜返回值，会影响到(阻挡)某个元素的默认动作的实行。
比如：onclick和onsubmit

如果事宜返回true或空，则默认动作实行；反之，返回false，则阻挡默认动作的实行。

onsubmit事宜是在：单击提交按钮和数据发往做事器之前来实行。

<a href=http://www.toutiao.com onclick=“return showInfo()”>今日头条</a>

假设：单击链接时，弹出一个提示信息，但不想打开链接

function checkForm()

{

var theForm = document.form1;

if(theForm.username.value==\"大众\公众)

{

alert(\"大众用户名不能为空\"大众);

return false;

}else if(theForm.username.value.length<5 || theForm.username.value.length>20)

{

alert(\"大众长度应介于5-20之间\"大众);

return false;

}else

{

alert(\"大众表单提交成功\"大众);

return true;

}

}

</script>

</head>

<body>

<form name=\"大众form1\公众 method=\公众get\"大众 action=\"大众login.php\公众 onsubmit=\"大众return checkForm()\"大众>

用户名：<input type=\"大众text\"大众 name=\公众username\"大众 />

<input type=\"大众submit\公众 value=\公众提交表单\"大众 />

</form>

</body>

5.DOM事宜工具

DOM事宜模型，是针对非IE浏览器的，紧张供应了一个事宜工具event工具。

Event工具：当事宜发生时，会向调用函数通报一个event工具参数(全小写)。

DOM中event工具的属性

clientX：单击时间隔窗口左真个间隔

clientY：单击时间隔窗口顶真个间隔

pageX：间隔网页左真个间隔

pageY：间隔网页顶真个间隔

screenX：间隔屏幕左真个间隔

screenY：间隔屏幕顶真个间隔

（1）通过HTML标记的事宜句柄属性来利用event工具

<body style=\"大众margin:0px;padding:1000px 0px 0px;\公众>

<img width=\"大众400\公众 src=\公众images/01.jpg\"大众 onclick=\公众get_xy(event)\"大众 />

<script>

function get_xy(e)

{

var str = \"大众浏览器窗口的左端和上端间隔：clientX=\公众+e.clientX+\"大众，clientY=\公众+e.clientY;

str += \"大众n网页左真个间隔：pageX=\"大众+e.pageX+\公众，pageY=\公众+e.pageY;

str += \"大众n屏幕左真个间隔：screenX=\"大众+e.screenX+\公众，screenY=\"大众+e.screenY;

window.alert(str);

}

</script>

（2）通过元素工具的事宜句柄属性来利用event工具

把稳：元素工具的事宜句柄属性，必须全小写。

在元素工具的办法下，在给事宜句柄属性，通报函数时，不能带小括号和参数；但是在定义函数时，一定要有一个“形参”来吸收通报过来的event工具。

<script>

function init()

{

//取到id=img的工具

var obj = document.getElementById(\"大众img\"大众);

//给obj工具绑定事宜onclick

obj.onclick = get_xy; //通报一个函数的地址，不能加括号，当然也不能传参数

}

function get_xy(e)

{

var str = \"大众浏览器窗口的左端和上端间隔：clientX=\"大众+e.clientX+\公众，clientY=\"大众+e.clientY;

str += \"大众n网页左真个间隔：pageX=\"大众+e.pageX+\"大众，pageY=\公众+e.pageY;

str += \"大众n屏幕左真个间隔：screenX=\"大众+e.screenX+\"大众，screenY=\"大众+e.screenY;

window.alert(str);

}

</script>

</head>

<body onload=\"大众init()\"大众>

<img src=\"大众images/01.jpg\"大众 id=\公众img\"大众 />

</body>

6.IE事宜工具

最早事宜的观点是IE中提出的，IE一贯以来都利用自己的事宜模型，IE中也有自己事宜工具event工具。

Event工具，是window工具的属性，同时也是window的一个子工具(跟location一样)，window前缀可以省略。

直接在函数中利用 window.event或event来调用event工具。

因此，在调用函数时，并不须要通报给它一个event工具参数。

IE中的event工具与DOM中的event工具有两点不同：

（1）引入event工具的办法不同

<img src=“images/01.jpg” onclick=“get_xy()”>

<script>

function get_xy()

{

var str = \"大众浏览器窗口的左端和上端间隔：clientX=\公众+window.event.clientX+\公众，clientY=\"大众+event.clientY;

}

</script>

元素工具办法的引入

<script>

Var obj = document.getElementById(“img”);

obj.onclick = get_xy;

</script>

把稳：事宜的存在很短暂，当下一事宜发生时，上一个事宜自动消逝。

（2）event工具的属性不同

clientX：与DOM中的一样

clientY：与DOM中的一样

x：与DOM的pageX一样

y：与DOM的pageY一样

screenX、screenY与DOM中的一样

offsetX：当前单击的坐标，间隔目标工具左真个间隔(比如：间隔图片左边是多远)

offsetY：当前单击的坐标，间隔目标工具上真个间隔(比如：间隔图片顶边是多远)

7.document工具

title：网页标题

bgColor：网页背景色

fgColor：网页前景色（文本质彩）

综合实例：购物车中显示/隐蔽功能

/根据据您挑选的商品，当当为您推举部分的显示和隐蔽/

function shopping_commend_show(obj)

{

//取得id=shopping_commend_sort的工具

var content = document.getElementById(\公众shopping_commend_sort\"大众);

//判断content工具是否显示

if(content.style.display==\公众none\"大众)

{

content.style.display=\"大众block\"大众;

obj.src = \公众images/shopping_arrow_up.gif\公众;

}else

{

content.style.display=\"大众none\"大众;

obj.src = \"大众images/shopping_arrow_down.gif\"大众;

}

}