前端：JS/27/HTML DOM简介和新特性 HTML DOM访问HTML元素的方法元素对象的属性（

HTML DOM简介和新特性

1,HTML DOM简介

核心DOM中，提供的属性和方法，已经可以操作网页了，为什么还要HTML DOM？

如果在核心DOM中，网页中节点层级很深时，访问这个节点时将十分的麻烦。因此使用HTML DOM中提供的通过id直接找节点的方法，而不用再从HTML根节点开始。

2，每一个HTML标记，都对应一个元素对象，如：<img>对应一个图片对象；<table>对应一个表格对象，等等

HTML DOM访问HTML元素的方法（频繁使用）

1，getElementById(id);

功能：查找网页中指定id的元素对象；

语法：var obj =document.getElementById(“id”);

参数：id是指网页中标记的id属性的值；

返回值：返回一个元素对象

例：var imgObj =document.getElementById(“img”);

2，getElementsByTagName(tagName)

功能：查找指定的HTML标记，返回一个数组。

语法：var arrObj =parentNode.getElementsByTagName(tagName);

参数：tagName是要查找的标记名称，不带尖括号；

返回值：返回一个数组，如果只有一个节点也返回一个数组；

例：找到ulTag下的所有li标记

元素对象的属性（标准属性）

1，tagName :标签名称，与核心DOM中的nodeName一样；

2，className :CSS类的样式；效果相当于HTML标记中加入class =“className”

3，id :同HTML标记id属性一样；

4，title :同HTML标记的title属性一样；

5，style :同HTML标记的style属性一样；

6，innerHTML :指包含在HTML标记中所有的内容，包括其中的HTML标记；

7，offsetWidth :元素对象的宽度，不带px单位；

8，offsetHeight :元素对象的高度，不带px单位；

9，scrollWidth :元素对象的总宽度，包括滚动条中的内容，不带px单位；

10，scrollHeight :元素对象的总高度，包括滚动条中的内容，不带px单位；

11，scrollTop :元素对象向上滚动过去了多少距离（有滚动条时才有效），不带px单位；

12，scrollLeft :元素对象向左滚动过去了多少距离（有滚动条时才有效），不带px单位；

例：

onscroll事件（属性）：当拖动滚动条时，调用JS函数

实例：书讯快递

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS实例：书讯快递滚动效果</title><style type="text/css">body,ul,li {margin: 0px;padding: 0px;}ul,li {list-style: none;}body {font-size: 12px;}#dome {width: 200px;height: 250px;margin: 50px auto;border: 1px solid #000;overflow: hidden;/* 溢出内容隐藏*/}#dome li {padding: 0px 5px;/* li的内填充 */}#dome1 {background-color: #00FFFF;}#dome2 {background-color: #FFFF00;}</style><script type="text/javascript">window.onload = function () {//1,获取三个<div>的id对象var dome = document.getElementById("dome");var dome1 = document.getElementById("dome1");var dome2 = document.getElementById("dome2");//2,三个<div>的高度一样dome1.style.height = dome.offsetHeight + "px";//这里的style是属性又是一个style对象，代表CSS对象；//style对象代表行内样式dome2.style.height = dome.offsetHeight + "px";//3,将dome1中的内容复制到dome2中dome2.innerHTML = dome1.innerHTML;//4,dome的scrollTop属性来实现滚动window.setInterval("start(dome)", 40);//定时器使40毫秒向上滚动1px}function start(dome) {//实现dome的滚动if (dome.scrollTop == dome.offsetHeight) {dome.scrollTop = 0;} else {dome.scrollTop++;//向上滚动1px}}</script></head><body><div id="dome"><div id="dome1"><ul><li>走到今日并非理所当然</li><li>顽风尚然强劲不挠</li><li>确实之物比想象中的</li><li>不要少吧</li><li>是因为记忆被岁月模糊了吗</li><li>还是说心灵被未曾见过的陌生人所烦扰了呢？</li><li>其实是支配躯体的疼痛啊</li><li>即使这样还是来到了这里</li><li>心无旁骛地瞻望终点就好</li><li>仅此唯一的理由</li><li>便是得以撒入回归之土</li><li>但那浅淡微薄的梦想</li><li>如能秉持初心不曾改变</li><li>未来也就不会无聊了吧......</li></ul></div><div id="dome2"></div></div></body></html>

显示效果如下：