DOM的含义：文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法，DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
获取DOM操作方法：
1.通过ID获取元素
语法:
document.getElementById(“id”)
2.innerHTML 属性:用于获取或替换 HTML 元素的内容。
<h2 id="con">javascript</H2>
<p> 实现与用户交互功能。</p>
<script type="text/javascript">
var mychar= document.getElementById("con") ;
document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
mychar.innerHTML="Hello world!";
document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
</script>
3.改变 HTML 样式
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
语法:
Object.style.property=new style;
注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。
基本属性表（property）:
改变 <p> 元素的样式，将颜色改为红色，字号改为20,背景颜色改为蓝：
<p id="pcon">Hello World!</p>
<script>
var mychar = document.getElementById("pcon");
mychar.style.color="red";
mychar.style.fontSize="20";
mychar.style.backgroundColor ="blue";
</script>
<script type="text/javascript">
var mychar= document.getElementById("con");
mychar.style.color = "red";
mychar.style.backgroundColor = "#ccc";
mychar.style.width = "300px";
</script>
4.显示和隐藏（display属性）
语法：
Object.style.display = value
value取值: 1)none:隐藏元素 2）block显示为块级元素
<script type="text/javascript">
function hidetext()
{
var mychar = document.getElementById("con").style.display = "none";
}
function showtext()
{
var mychar = document.getElementById("con").style.display = "block";
}
</script>
</head>
<body>
<h1>JavaScript</h1>
<p id="con">JavaScript是必不可少的工具。</p>
<form>
<input type="button" onclick="hidetext()" value="隐藏内容" />
<input type="button" onclick="showtext()" value="显示内容" />
</form>
</body>
通过style.display实现隐藏。
通过style.display实现显示。
7.控制类名（className 属性）
className 属性设置或返回元素的class 属性。
语法：
object.className = classname
作用:
1.获取元素的class 属性.
- 为网页内的某个元素指定一个css样式来更改该元素的外观.
<style>
body{ font-size:16px;}
.one{
border:1px solid #eee;
width:230px;
height:50px;
background:#ccc;
color:red;
}
.two{
border:1px solid #ccc;
width:230px;
height:50px;
background:#9CF;
color:blue;
}
</style>
</head>
<body>
<p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<input type="button" value="添加样式" onclick="add()"/>
<p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<input type="button" value="更改外观" onclick="modify()"/>
<script type="text/javascript">
function add(){
var p1 = document.getElementById("p1");
p1.className = "one";
}
function modify(){
var p2 = document.getElementById("p2");
p2.className = "two";
}
</script>
</body>
高级篇
将HTML代码分解为DOM节点层次图:
HTML文档可以说由节点构成的集合，DOM节点有:
- 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
- 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
- 属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。
节点属性:
遍历节点树:
DOM操作方法:
1.getElementsByName()方法:
返回带有指定名称的节点对象的集合。
语法：
document.getElementsByName(name)
与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。
注意:
因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。
<script type="text/javascript">
function getnum(){
var mynode= document.getElementsByName(name) ;
alert(mynode.length);
}
</script>
</head>
<body>
<input name="myt" type="text" value="1">
<input name="myt" type="text" value="2">
<input name="myt" type="text" value="3">
<input name="myt" type="text" value="4">
<input name="myt" type="text" value="5">
<input name="myt" type="text" value="6">
<br />
<input type="button" onclick="getnum()" value="看看有几项？" />
</body>
找到6项
2.getElementsByTagName()方法
返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。
语法:
document.getElementsByTagName(Tagname)
说明:
- Tagname是标签的名称，如p、a、img等标签名。
- 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。
<script type="text/javascript">
function getValue()
{
var myH = document.getElementById("myHead");
alert(myH.innerHTML)
}
function getElements()
{
var myS = document.getElementsByName("sex");
alert(myS.length);
}
function getTagElements()
{
var myI = document.getElementsByTagName("input");
alert(myI.length);
}
</script>
区别getElementByID,getElementsByName,getElementsByTagName
以人来举例说明，人有能标识身份的身份证，有姓名，有类别(大人、小孩、老人)等。
ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。
Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。
TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName("小孩")。
把上面的例子转换到HTML中，如下:
<input type="checkbox" name="hobby" id="hobby1"> 音乐
input标签就像人的类别。
name属性就像人的姓名。
id属性就像人的身份证。
3.getAttribute()方法
通过元素节点的属性名称获取属性的值。
语法：
elementNode.getAttribute(name)
说明:
- elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。
- name：要想查询的元素节点的属性名字
<body>
<p id="intro">课程列表</p>
<ul>
<li title="第1个li">HTML</li>
<li>CSS</li>
<li title="第3个li">JavaScript</li>
<li title="第4个li">Jquery</li>
<li>Html5</li>
</ul>
<p>以下为获取的不为空的li标签title值:</p>
<script type="text/javascript">
var con=document.getElementsByTagName("li");
for (var i=0; i< con.length;i++){
var text=con[i].getAttribute("title");
if(text!=null)
{
document.write(text+"<br>");
}
}
</script>
</body>
以下为获取的不为空的li标签title值:
第1个li
第3个li
第4个li
4.setAttribute()方法
setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
语法：
elementNode.setAttribute(name,value)
说明：
1.name: 要设置的属性名。
2.value: 要设置的属性值。
注意：
1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。
2.类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数。
<body>
<p id="intro">我的课程</p>
<ul>
<li title="JS">JavaScript</li>
<li title="JQ">JQuery</li>
<li title="">HTML/CSS</li>
<li title="JAVA">JAVA</li>
<li title="">PHP</li>
</ul>
<h1>以下为li列表title的值,当title为空时，新设置值为"WEB前端技术":</h1>
<script type="text/javascript">
var Lists=document.getElementsByTagName("li");
for (var i=0; i<Lists.length;i++)
{
var text = Lists[i].getAttribute("title");
document.write(text +"<br>");
if(text=="")
{
Lists[i].setAttribute("title","WEB前端技术");
document.write(Lists[i].getAttribute("title")+"<br>");
}
}
</script>
</body>
5.节点属性
在文档对象模型 (DOM) 中，每个节点都是一个对象。
DOM 节点有三个重要的属性 ：
nodeName : 节点的名称
nodeValue ：节点的值
nodeType ：节点的类型
一、nodeName 属性: 节点的名称。
- 元素节点的 nodeName 与标签名相同
- 属性节点的 nodeName 是属性的名称
- 文本节点的 nodeName 永远是 #text
- 文档节点的 nodeName 永远是 #document
二、nodeValue 属性：节点的值
- 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本自身
- 属性节点的 nodeValue 是属性的值
三、nodeType 属性: 节点的类型，常用的几种结点类型:
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
<body>
<ul>
<li>javascript</li>
<li>HTML/CSS</li>
<li>jQuery</li>
</ul>
<script type="text/javascript">
var node=document.getElementsByTagName("li");
for(var i=0;i<node.length;i++){ //这一步在做遍历
document.write("li["+(i+1)+"]:"+"<br/>"+"节点名:"+node[i].nodeName+"<br/>");
document.write("节点值:"+node[i].nodeValue+"<br/>");
document.write("节点类型:"+node[i].nodeType+"<br/><br/>");
}
</script>
</body>
li[1]:
节点名:LI 元素节点的 nodeName 与标签名相同。
节点值:null 元素节点的 nodeValue 是 undefined 或 null。
节点类型:1 参照上面列出的手册，说明他是一个元素类的节点类型。
6.访问子节点childNodes
访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，具有length属性。
语法：
elementNode.childNodes
注意：
如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。
<div>
javascript
<p>javascript</p>
<div>jQuery</div>
<h5>PHP</h5>
</div>
<script type="text/javascript">
var x=document.getElementsByTagName("div")[0].childNodes;
for(var i=0;i<x.length;i++)
{
document.write("第"+(i+1)+"个节点的值是："+x[i].nodeValue+"<br />");
document.write("第"+(i+1)+"个节点的名称是："+x[i].nodeName+"<br />");
document.write("第"+(i+1)+"个节点的属性是："+x[i].nodeType+"<br />");
document.write("<br />");
}
</script>
第1个节点的值是： javascript
第1个节点的名称是：#text 文本节点
第1个节点的属性是：3
第2个节点的值是：null
第2个节点的名称是：P
第2个节点的属性是：1
第3个节点的值是：
第3个节点的名称是：#text
第3个节点的属性是：3
第4个节点的值是：null
第4个节点的名称是：DIV
第4个节点的属性是：1
第5个节点的值是：
第5个节点的名称是：#text
第5个节点的属性是：3
第6个节点的值是：null
第6个节点的名称是：H5
第6个节点的属性是：1
第7个节点的值是：
第7个节点的名称是：#text
第7个节点的属性是：3
7.访问子节点的第一项和最后项。
firstChild 属性返回‘childNodes’数组的第一个子节点， lastChild 属性返回‘childNodes’数组的最后一个子节点。。
语法：
1.）node.firstChild | 2.）node.lastChild
说明：node.firstChild与elementNode.childNodes[0]是同样的效果。
node.lastChild与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。
<div id="con"><p>javascript</p><div>jQuery</div><h5>PHP</h5></div>
<script type="text/javascript">
var x=document.getElementById("con");
document.write("指定元素的第一个子节点"x.firstChild.nodeName+" "+x.firstChild.nodeValue+" "+x.firstChild.nodeType+"<br/>");
document.write("指定元素的最后一个子节点"x.lastChild.nodeName+" "+x.firstChild.nodeValue+" "+x.firstChild.nodeType);
</script>
8.访问父节点parentNode。
用来获取指定节点的父节点，父节点只能有一个。
语法：
elementNode.parentNode
<div id="text">
<p id="con"> parentNode 获取指点节点的父节点</p>
</div>
<script type="text/javascript">
var mynode= document.getElementById("con");
document.write(mynode.parentNode.nodeName);
</script>
运行结果:
parentNode 获取到指点节点的父节点时:
DIV
9.访问祖节点
语法：
elementNode.parentNode.parentNode
<div id="text">
<p>
parentNode
<span id="con"> 获取指点节点的父节点</span>
</p>
</div>
<script type="text/javascript">
var mynode= document.getElementById("con");
document.write(mynode.parentNode.parentNode.nodeName);
</script>
运行结果:
parentNode获取到的祖节点时：
DIV
总结：节点的有嵌套下层的层次关系，祖节点下面的父节点，父节点下面的子节点。
案例分析：
通过获取的mylist节点，使用访问父节点parentNode，将"HTML/CSS"课程内容输出。
<body>
<ul id="con">
<li id="lesson1">javascript
<ul>
<li id="tcon"> 基础语法</li>
<li>事件</li<li>流程控制语句</li>
<li>函数</li>>
<li>DOM</li>
</ul>
</li>
<li id="lesson2">das</li>
<li id="lesson3">dadf</li>
<li id="lesson4">HTML/CSS
<ul>
<li>文字</li>
<li>段落</li>
<li>表单</li>
<li>表格</li>
</ul>
</li>
</ul>
<script type="text/javascript">
var mylist = document.getElementById("tcon");
var hCon=mylist.parentNode.parentNode.parentNode.lastChild;
document.write(hCon.innerHTML);
</script>
</body>
10.访问兄弟节点(其有2个属性，两个属性获取的都是节点。)
nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。
语法：
nodeObject.nextSibling
说明：如果无此节点，则该属性返回 null。previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。
语法：
nodeObject.previousSibling
说明：如果无此节点，则该属性返回 null。
<body>
<ul id="u1">
<li id="a">javascript</li>
<li id="b">jquery</li>
<li id="c">html</li>
</ul>
<ul id="u2">
<li id="d">css3</li>
<li id="e">php</li>
<li id="f">java</li>
</ul>
<script type="text/javascript">
function get_nextSibling(n){
var x=n.nextSibling;
while (x && x.nodeType!=1){
x=x.nextSibling;
}
return x;
}
var x=document.getElementsByTagName("li")[0];
document.write(x.nodeName);
document.write(" = ");
document.write(x.innerHTML);
var y=get_nextSibling(x);
if(y!=null){
document.write("<br />nextsibling: ");
document.write(y.nodeName);
document.write(" = ");
document.write(y.innerHTML+"<br /><br />");
}else{
document.write("<br>已经是最后一个节点"+"<br /><br />");
}
//以下是本题题解
function get_previousSibling(n)
{
var z=n.previousSibling;
while (z&&z.nodeType!=1)
{
z=z.previousSibling;
}
return z;
}
var z=document.getElementsByTagName("li")[4];
document.write(z.nodeName+" = "+z.innerHTML);
var d=get_previousSibling(z);
if(d!=null)
{
document.write("<br />previoussibling:"+d.nodeName+" = "+d.innerHTML);
}
else {
document.write("<br />这是第一个节点，前面没有节点了。");
}
</script>
运行效果
javascript
jquery
html
css3
php
java
LI = javascript
nextsibling: LI = jquery 紧邻的下一个节点
LI = php
previoussibling:LI = css3 追溯上一个节点
11.插入节点appendChild()
在指定节点的最后一个子节点列表之后添加一个新的子节点。
语法:
appendChild(newnode)
参数:
newnode：指定追加的节点。
实例：<script>标签内，为ul添加一个li,设置li内容为PHP。
<body>
<ul id="test">
<li>JavaScript</li>
<li>HTML</li>
</ul>
<script type="text/javascript">
var otest = document.getElementById("test");
var newotest= document.createElement("li");
newotest.innerHTML = "PHP"
otest.appendChild(newotest)
</script>
12.插入节点insertBefore()
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
语法:
insertBefore(newnode,node);
注意: otest.insertBefore(newnode,node); 也可以改为: otest.insertBefore(newnode,otest.childNodes[0]);
参数:
newnode: 要插入的新节点。
node: 指定此节点前插入节点。
实例：
<body>
<ul id="test"><li>JavaScript</li><li>HTML</li></ul>
<script type="text/javascript">
var otest = document.getElementById("test");
var newnode=document.createElement("li");
newnode.innerHTML="php";
otest.insertBefore(newnode,otest.lastChild);
</script>
</body>
13.删除节点removeChild()
removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
语法:
nodeObject.removeChild(node)
参数:
node ：必需，指定需要删除的节点。
实例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div id="content">
<h1>html</h1>
<h1>php</h1>
<h1>javascript</h1>
<h1>jquery</h1>
<h1>java</h1>
</div>
<script type="text/javascript">
function clearText() {
var content=document.getElementById("content");
// 在此完成该函数
var conCN = content.childNodes;
while ( (conCN.length > 0) && (conCN[0].nodeType != 1) )
{
content.removeChild(conCN[0]);
}
//回显已删除
var newDiv = document.createElement("div");
if (conCN.length >0)
{
var rmNode = content.removeChild(conCN[0]);
newDiv.innerHTML = "clear \"" + rmNode.innerHTML + "\" done!";
}
else
{
newDiv.innerHTML = "there is no node!"
}
content.parentNode.appendChild(newDiv);
}
</script>
<button onclick="clearText()">清除节点内容</button>
</body>
</html>
请右上角复制代码，前往W3C在线实例测试工具亲自体验：https://www.w3school.com.cn/tiy/t.asp?f=html_intro
13.替换元素节点replaceChild()
replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。
语法：
node.replaceChild (newnode,oldnew )
参数：
newnode : 必需，用于替换 oldnew 的对象。
oldnew : 必需，被 newnode 替换的对象。
案例：
<div><b id="oldnode">JavaScript</b>是一个很常用的技术，为网页添加动态效果。</div>
<a href="javascript:replaceMessage()"> 将加粗改为斜体</a>
<script type="text/javascript">
function replaceMessage(){
var oldnode=document.getElementById("oldnode");
var newnode=document.createElement("i");
newnode.innerHTML=oldnode.innerHTML
oldnode.parentNode.replaceChild(newnode,oldnode);
}
</script>
请右上角复制代码，前往W3C在线实例测试工具亲自体验：https://www.w3school.com.cn/tiy/t.asp?f=html_intro
14.创建元素节点createElement
createElement()方法可创建元素节点。此方法可返回一个 Element 对象。
语法：
document.createElement(tagName)
参数:
tagName：字符串值，这个字符串用来指明创建元素的类型。
注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。
创建一个按钮，代码如下：
<script type="text/javascript">
var body = document.body;
var input = document.createElement("input");
input.type = "button";
input.value = "创建一个按钮";
body.appendChild(input);
</script>
效果：在HTML文档中，创建一个按钮。
使用setAttribute来设置属性，代码如下：
<script type="text/javascript">
var body= document.body;
var btn = document.createElement("input");
btn.setAttribute("type", "text");
btn.setAttribute("name", "q");
btn.setAttribute("value", "使用setAttribute");
btn.setAttribute("onclick", "javascript:alert('This is a text!');");
body.appendChild(btn);
</script>
效果：在HTML文档中，创建一个文本框，使用setAttribute设置属性值。 当点击这个文本框时，会弹出对话框“This is a text!”。
15.创建文本节点createTextNode
createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。
语法：
document.createTextNode(data)
参数：
data : 字符串值，可规定此节点的文本。
实例
<style type="text/css">
.message{
width:200px;
height:100px;
background-color:#CCC;
}
</style>
</head>
<body>
<script type="text/javascript">
var element=document.createElement("p");
element.className="message";
var newnode=document.createTextNode("I love Javascript!");
document.body.appendChild(element);
element.appendChild(newnode)
</script>
</body>
16.浏览器窗口可视区域大小
获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法:
一、对于主流浏览器IE9+、Chrome、Firefox、Opera 以及 Safari：
• window.innerHeight - 浏览器窗口的内部高度
• window.innerWidth - 浏览器窗口的内部宽度
二、对于 Internet Explorer 8、7、6、5：
• document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。
• document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。
或者
Document对象的body属性对应HTML文档的<body>标签
• document.body.clientHeight
• document.body.clientWidth
在不同浏览器都实用的 JavaScript 方案：
var w= document.documentElement.clientWidth
|| document.body.clientWidth;
var h= document.documentElement.clientHeight
|| document.body.clientHeight;
实例：
<script type="text/javascript">
/*法一
document.write(document.body.clientWidth+"<br>");
document.write(document.body.clientHeight);
*/
//法二
var w= document.documentElement.clientWidth
var h= document.documentElement.clientHeight
document.write("宽："+w+"<br>"+"高："+h)
</script>
17.网页尺寸scrollHeight
scrollHeight和scrollWidth，获取网页内容高度和宽度。
兼容性用用法：
var w=document.documentElement.scrollWidth
|| document.body.scrollWidth;
var h=document.documentElement.scrollHeight
|| document.body.scrollHeight;
实例：
<script type="text/javascript">
var w=document.documentElement.scrollWidth;
var h=document.documentElement.scrollHeight;
var a=document.body.scrollWidth;
var b=document.body.scrollHeight;
document.write(w+"*"+h);
document.write("<br>"+a+"*"+b);
</script>
18.网页尺寸offsetHeight
offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。
一、值
offsetHeight = clientHeight + 滚动条 + 边框。
二、浏览器兼容性
var w= document.documentElement.offsetWidth
|| document.body.offsetWidth;
var h= document.documentElement.offsetHeight
|| document.body.offsetHeight;
获取网页的宽度和高度,并输出。
<body>
<script type="text/javascript">
var w= document.documentElement.offsetWidth;
var h= document.documentElement.offsetHeight;
//法一
document.write("方法一"+"<br/>"+"网页内容的宽度为："+w+"<br />"+"网页内容的高度为："+h);
//法二
document.write("<br />"+"方法二"+"<br/>");
document.write("网页内容的宽度为："+document.body.offsetWidth+"<br />");
document.write("网页内容的高度为："+document.body.offsetHeight);
</script>
</body>
19.网页卷去的距离与偏移量
scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ，即左边灰色的内容。
scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ，即上边灰色的内容。
offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。
offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。
注意:
区分大小写
offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。
调整横竖滚动条后，点击按钮后，查看offsetTop、offsetLeft、scrollTop、scrollLeft值的变化。
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function req(){
var div = document.getElementById("div1");
document.getElementById("li1").innerHTML = (div.offsetTop)+"px";//div1距离屏幕顶部的距离
document.getElementById("li2").innerHTML = (div.offsetLeft)+"px";//div1距离屏幕左部的距离
document.getElementById("li3").innerHTML = (div.scrollTop)+"px";//div1纵向滚动条滚动的距离
document.getElementById("li4").innerHTML = (div.scrollLeft)+"px";//div1横向滚动条滚动的距离
}
</script>
</head>
<body style="border:10px solid #ccc;padding:0px 0px;margin:5px 10px">
<div style="width:60%;border-right:3px dashed blue;float:left;">
<div style="float:left;">
<div id="div1" style="border:5px blue solid;height:300px;width:200px;overflow:auto">
<div style="height:500px;width:400px">请调整横竖滚动条后，点击按钮后查看offsetTop、offsetLeft、scrollTop、scrollLeft值。</div>
</div>
<input type="button" value="点击我!" onclick="req()" style="border: 1px solid purple;height: 55px;"/>
</div>
</div>
<div style="width:35%;height:65px;float:right;">
<ul style="list-style-type: none; line-height:38px;ss">结果：
<li>offsetTop : <span id="li1"></span></li>
<li>offsetLeft : <span id="li2"></span></li>
<li> scrollTop : <span id="li3"></span></li>
<li>scrollLeft : <span id="li4"></span></li>
<li>总结：offsetLeft与offsetTop的值是相对不变的。<span id="lix"></span></li>
</ul>
</div>
<div style="clear:both;"></div>
</body>
</html>
请右上角复制代码，前往W3C在线实例测试工具亲自体验：https://www.w3school.com.cn/tiy/t.asp?f=html_intro
