你的位置:首页 > Java教程

[Java教程]干货满满,绝不错过,DOM、BOM 操作超级集合


本章内容:

  • 定义
  • 节点类型
  • 节点关系
  •  选择器
  • 样式操作方法style
  • 表格操作方法
  • 表单操作方法
  • 元素节点ELEMENT
  • 属性节点attributes
  • 文本节点TEXT
  • 文档节点 Document
  • 位置操作方法
  • 定时器
  • 弹出框
  • location
  • 其它
  • 事件操作
  • 实例

 

定义

文档对象模型(Document Object Model,DOM)是一种用于HTML和

 

节点类型

 12中节点类型都有NodeType属性来表明节点类型

节点类型描述
1Element代表元素
2Attr代表属性
3Text代表元素或属性中的文本内容。
4CDATASection代表文档中的 CDATA 部分(不会由解析器解析的文本)。
5EntityReference代表实体引用。
6Entity代表实体。
7ProcessingInstruction代表处理指令。
8Comment代表注释。
9Document代表整个文档(DOM 树的根节点)。
10DocumentType向为文档定义的实体提供接口
11DocumentFragment代表轻量级的 Document 对象,能够容纳文档的某个部分
12Notation代表 DTD 中声明的符号。

 

节点关系

nodeType返回节点类型的数字值(1~12)
nodeName元素节点:标签名称(大写)、属性节点:属性名称、文本节点:#text、文档节点:#document
nodeValue文本节点:包含文本、属性节点:包含属性、元素节点和文档节点:null
parentNode父节点
parentElement父节点标签元素
childNodes所有子节点
children第一层子节点
firstChild第一个子节点,Node 对象形式
firstElementChild第一个子标签元素
lastChild最后一个子节点
lastElementChild最后一个子标签元素
previousSibling上一个兄弟节点
previousElementSibling上一个兄弟标签元素
nextSibling下一个兄弟节点
nextElementSibling下一个兄弟标签元素
childElementCount第一层子元素的个数(不包括文本节点和注释)
ownerDocument指向整个文档的文档节点
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title></head><body>  <div id="t">    <span></span>    <span id="s">      <a></a>      <h1>Nick</h1>    </span>    <p></p>  </div>  <script>    var tT = document.getElementById("t");    console.log(tT.nodeType,tT.nodeName,tT.nodeValue); //1 "DIV" null    console.log(tT.parentNode); //<body>...</body>    console.log(tT.childNodes); //[text, span, text, span#s, text, p, text]    console.log(tT.children); //[span, span#s, p, s: span#s]    var sT = document.getElementById("s");    console.log(sT.previousSibling); //#text, Node 对象形式    console.log(sT.previousElementSibling); //<span></span>    console.log(sT.nextSibling); //#text    console.log(sT.nextElementSibling); //<p></p>    console.log(sT.firstChild); //#text    console.log(sT.firstElementChild); //<a></a>    console.log(sT.lastChild); //#text    console.log(sT.lastElementChild); //<h1>Nick</h1>    console.log(tT.childElementCount); //3    console.log(tT.ownerDocument); //#document  </script></body></html>

View Code

节点关系方法:

hasChildNodes()  包含一个或多个节点时返回true

contains()  如果是后代节点返回true

isSameNode()、isEqualNode()  传入节点与引用节点的引用为同一个对象返回true

compareDocumentPostion()  确定节点之间的各种关系

数值   关系 1   给定节点不在当前文档中2   给定节点位于参考节点之前4   给定节点位于参考节点之后8   给定节点包含参考节点16  给定节点被参考节点包含

compareDocumentPostion() 节点对应关系
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title></head><body>  <div id="t">    <span></span>    <span id="s">      <a></a>      <h1>Nick</h1>    </span>    <p></p>  </div>  <script>    var tT = document.getElementById("t");    var sT = document.getElementById("s");    console.log(tT.hasChildNodes()); //true    console.log(tT.contains(document.getElementById('s'))); //true    console.log(tT.compareDocumentPosition(document.getElementById('s'))); //20,因为s被tT包含,所以为16;而又在tT之后,所以为4,两者相加为20.    console.log(tT.isSameNode(document.getElementById('t'))); //true    console.log(tT.isEqualNode(document.getElementById('t'))); //true    console.log(tT.isSameNode(document.getElementById('s'))); //false  </script></body></html>

View Code

 

选择器

getElementById()

一个参数:元素标签的ID
getElementsByTagName()一个参数:元素标签名
getElementsByName()一个参数:name属性名
getElementsByClassName()一个参数:包含一个或多个类名的字符串

classList

返回所有类名的数组

  • add (添加)
  • contains (存在返回true,否则返回false)
  • remove(删除)
  • toggle(存在则删除,否则添加)
querySelector()接收CSS选择符,返回匹配到的第一个元素,没有则null
querySelectorAll()接收CSS选择符,返回一个数组,没有则返回[]

 

<!--getElementById()-->  <div id="t"></div>  <script>    var tT = document.getElementById('t');    console.log(tT);  </script><!--getElementsByTagName()-->  <div id="t">    <div></div>    <div></div>    <div></div>  </div>  <script>    var tT = document.getElementsByTagName('div');    console.log(tT); //[div#t, div, div, div, t: div#t]    console.log(tT[0]); //<div id="t">...</div>    console.log(tT.length); //4  </script><!--getElementsByName()-->  <div name="nick"></div>  <script>    var tT = document.getElementsByName("nick");    console.log(tT); //[div]  </script><!--getElementsByClassName()-->  <div >    <div></div>    <div></div>    <div></div>  </div>  <script>    var tT = document.getElementsByClassName('t');    console.log(tT); //[div.t]    console.log(tT[0]); //<div id="t">...</div>    console.log(tT.length); //1  </script><!--classList-->  <div ></div>  <script>    var tT = document.getElementsByTagName('div')[0];    tTList = tT.classList;    console.log(tT); //<div ></div>    console.log(tTList); //["t", "t2", "t3"]    tTList.add("t5");    console.log(tTList.contains("t5")); //true    tTList.remove("t5");    console.log(tTList.contains("t5")); //false    tTList.toggle("t5");    console.log(tTList.contains("t5")); //true  </script><!--querySelector()-->  <div ></div>  <div id="t"></div>  <div name="nick"></div>  <script>    var tT = document.querySelector("div");    console.log(tT); //<div ></div>    var tI = document.querySelector("#t");    console.log(tI); //<div id="t"></div>    var tC = document.querySelector(".t");    console.log(tC); //<div ></div>    var tN = document.querySelector("[name]");    console.log(tN); //<div name="nick"></div>  </script><!--querySelectorAll()-->  <div ></div>  <div id="t"></div>  <div name="nick"></div>  <script>    var tT = document.querySelectorAll("div");    console.log(tT); //[div.t.t2.t3, div#t.t, div]    var tI = document.querySelectorAll("#t");    console.log(tI); //[div#t.t]    var tC = document.querySelectorAll(".t");    console.log(tC); //[div.t.t2.t3, div#t.t]    var tN = document.querySelectorAll("[name]");    console.log(tN); //[div]  </script>

View Code

 

样式操作方法style

style.cssText可对style中的代码进行读写
style.item()返回给定位置的CSS属性的名称
style.lengthstyle代码块中参数个数
style.getPropertyValue()返回给定属性的字符串值
style.getPropertyPriority()检测给定属性是否设置了!important,设置了返回"important";否则返回空字符串
style.removeProperty()删除指定属性
style.setProperty()设置属性,可三个参数:设置属性名,设置属性值,是否设置为"important"(可不写或写"")
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title></head><body>  <div id="t" >8</div>  <script>    var tT = document.getElementById("t");    console.log(tT.style.cssText); //width: 100px; height: 100px; background-color: yellow;    tT.style.cssText = "background-color: yellow; width: 200px; height: 200px"; //修改属性    console.log(tT.style.cssText); //width: 200px; height: 200px; background-color: yellow;    console.log(tT.style.item("0")); //background-color    console.log(tT.style.length); //3    console.log(tT.style.getPropertyValue("background-color")); //yellow    console.log(tT.style.getPropertyPriority("background-color")); //空字符串    console.log(tT.style.removeProperty("width")); //200px    tT.style.setProperty("width","200px",""); //设置属性,第三个值为important优先值,可不写      </script></body></html>

View Code

 

表格操作方法

createTHead()

创建<thead>元素,返回引用

deleteTHead()

 删除<thead>元素

createTBody()

创建<tbody>元素,返回引用

insertRow(0)

插入<tr>元素,从0开始

deleteRow(pos)

 删除指定位置的行

insertCell(0)

插入<td>元素,从0开始

deleteCell(pos)

 删除指定位置的单元格

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title></head><body>  <script>    var table = document.createElement("table");    table.border = "1px";    table.width = "150px";    var theadt = table.createTHead();    var tbody = table.createTBody();    var trH0 = theadt.insertRow(0);    trH0.insertCell(0).appendChild(document.createTextNode("姓名"));    trH0.insertCell(1).appendChild(document.createTextNode("年龄"));    var trB0 = tbody.insertRow(0);    var trB1 = tbody.insertRow(1);    trB0.insertCell(0).appendChild(document.createTextNode("nick"));    trB0.insertCell(1).appendChild(document.createTextNode("18"));    trB1.insertCell(0).appendChild(document.createTextNode("jenny"));    trB1.insertCell(1).appendChild(document.createTextNode("21"));    trB0.deleteCell(1);    console.log(table);    document.body.appendChild(table);  </script></body></html>

View Code

 

表单操作方法

document.forms

获取所有表单

.submit()

提交表单
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title></title></head><body>  <form action="https://www.baidu.com/s" method="get">    <input type="text" name="wd" />    <input type="button" value="百度一下" onclick="this.disable=true;BaiDu(this);" />  </form>  <script>    var form = document.forms; //获取所有表单    var formOne = form[0];    console.log(form);    console.log(formOne);    function BaiDu(ths) {      var inputBaiDu = ths;      inputBaiDu.parentNode.submit();    }  </script></body></html>

View Code

 

元素节点ELEMENT

nodeType:1

nodeName访问元素的标签名
tagName访问元素的标签名
createElement()创建节点
appendChild()末尾添加节点,并返回新增节点
insertBefore()参照节点之前插入节点,两个参数:要插入的节点和参照节点
insertAfter()参照节点之后插入节点,两个参数:要插入的节点和参照节点
replaceChild()替换节点,两个参数:要插入的节点和要替换的节点(被移除)
removeChild()移除节点
cloneNode()克隆,一个布尔值参数,true为深拷贝,false为浅拷贝
importNode()从文档中复制一个节点,两个参数:要复制的节点和布尔值(是否复制子节点)
insertAdjacentHTML()

插入文本,两个参数:插入的位置和要插入文本

  • "beforebegin",在该元素前插入
  • "afterbegin",在该元素第一个子元素前插入
  • "beforeend",在该元素最后一个子元素后面插入
  • "afterend",在该元素后插入
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title></head><body>  <div id="t">    <span id="one"></span>    <span id="s">      <a></a>      <h1>Nick</h1>    </span>    <p></p>  </div>  <script>    var tT = document.getElementById("t");    //appendChild()    var a1New = document.createElement('a');    tT.appendChild(a1New);    console.log(tT.lastElementChild); //<a></a>    //insertBefore()    var a2New = document.createElement('a');    a2New.className = 't'; //设置css样式    a2New.id = 'oneNew';    a2New.innerText = 'jenny'; //设置标签中间文本    tT.insertBefore(a2New,document.getElementById('one'));    console.log(tT.firstElementChild); //<a >jenny</a>    //replaceChild()    var a3New = document.createElement('h3');    tT.replaceChild(a3New,document.getElementById('oneNew'));    console.log(tT.firstElementChild); //<h3></h3>    //removeChild()    tT.removeChild(tT.firstElementChild);    console.log(tT.firstElementChild); //<span id="one"></span>    //cloneNode()    var clNo = tT.cloneNode(true);    console.log(clNo); //<div id="t">...</div>    //importNode()    var imNoT = document.importNode(tT,true);    console.log(imNoT.firstChild); //#text    var imNoF = document.importNode(tT,false);    console.log(imNoF.firstChild); //null    //insertAdjacentHTML()    tT.insertAdjacentText("beforebegin","beforebegin");    tT.insertAdjacentText("afterbegin","afterbegin");    tT.insertAdjacentText("beforeend","beforeend");    tT.insertAdjacentText("afterend","afterend");  </script></body></html>

View Code
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>title</title></head><body>  <div id="t" title="tTitle" lang="en" dir="ltr"></div>  <script>    var tN = document.getElementById("t");    console.log(tN.nodeType); //1    console.log(tN.tagName); //DIV    console.log(tN.nodeName); //DIV    console.log(tN.id); //t    console.log(tN.title); //tTitle    console.log(tN.lang); //en    console.log(tN.dir); //ltr    console.log(tN.className); //tClass    var dirNew = document.createElement("div");    dirNew.className = "tC";    dirNew.innerText = "Nick";    console.log(dirNew); //<div >Nick</div>  </script></body></html>

View Code

 

属性节点attributes

nodeType:2

attributes

获取所有标签属性
getAttribute()获取指定标签属性
setAttribute()设置指定标签属
removeAttribute()移除指定标签属

var s = document.createAttribute("age")

s.nodeValue = "18"

创建age属性

设置属性值为18

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title></head><body>  <div id="t" name="nick"></div>  <script>    var tT = document.getElementById("t");    console.log(tT.attributes); //NamedNodeMap {0: id, 1: class, 2: name, length: 3}    console.log(tT.attributes.id); //id="t"    console.log(tT.attributes.class); //    console.log(tT.attributes.getNamedItem("name")); //name="nick"    console.log(tT.attributes.removeNamedItem("class")); //    console.log(tT.attributes.getNamedItem("class")); //null    var s = document.createAttribute("age"); //创建属性    s.nodeValue = "18"; //设置属性值    console.log(tT.attributes.setNamedItem(s));    console.log(tT.attributes); //NamedNodeMap {0: id, 1: name, 2: age, length: 3}    console.log(tT.attributes.item("1")); //name="nick"  </script></body></html>

View Code
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title></head><body>  <div id="t" name="nick"></div>  <script>    var tT = document.getElementById("t");    console.log(tT.attributes); //NamedNodeMap {0: id, 1: class, 2: name, length: 3}    console.log(tT.attributes.id); //id="t"    console.log(tT.attributes.class); //    console.log(tT.getAttribute("name")); //nick    tT.setAttribute("age",18);    console.log(tT.getAttribute("age")); //18    tT.removeAttribute("age");    console.log(tT.getAttribute("age")); //null  </script></body></html>

View Code

 

文本节点TEXT

nodeType:3

innerText所有的纯文本内容,包括子标签中的文本
outerText与innerText类似
innerHTML所有子节点(包括元素、注释和文本节点)
outerHTML返回自身节点与所有子节点
textContent与innerText类似,返回的内容带样式
data文本内容
length文本长度
createTextNode()创建文本
normalize()删除文本与文本之间的空白
splitText()分割
appendData()追加
deleteData(offset,count)从offset指定的位置开始删除count个字符
insertData(offset,text)在offset指定的位置插入text
replaceData(offset,count,text)替换,从offset开始到offscount处的文本被text替换
substringData(offset,count)提取从ffset开始到offscount处的文本
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title></head><body>  <div id="t">Nick</div>  <script>    var tT = document.getElementById("t");    var tTOne = tT.firstChild;    console.log(tTOne.nodeType); //3    console.log(tTOne.data); //Nick    console.log(tTOne.length); //4    var tTNew = document.createTextNode("18");    console.log(tTNew.nodeType,tTNew.data); //3 "18"    tTOne.appendData("18");    console.log(tTOne.data); //Nick18    tTOne.deleteData(4,2);    console.log(tTOne.data); //Nick    tTOne.insertData(0,"jenny");    console.log(tTOne.data); //jennyNick    tTOne.replaceData(0,5,"18");    console.log(tTOne.data); //18Nick    var tTSub = tTOne.substringData(2,6);    console.log(tTSub); //Nick  </script></body></html>

View Code
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title></head><body>  <div id="t">    <div>1</div>    <div>2</div>    <div>3</div>  </div>  <script>    var tT = document.getElementById("t");    console.log(tT.innerText); //1、2、3    console.log(tT.outerText); //1、2、3    console.log(tT.innerHTML); //<div>1</div>、<div>2</div>、 <div>3</div>    console.log(tT.outerHTML); //<div id="t">、<div>1</div>、<div>2</div>、<div>3</div>、</div>    console.log(tT.textContent); //1、2、3(带样式)  </script></body></html>

View Code

 

文档节点 Document

nodeType:9

document.documentElement代表页面中的<html>元素
document.body代表页面中的<body>元素
document.doctype代表<!DOCTYPE>标签
document.head代表页面中的<head>元素
document.title代表<title>元素的文本,可修改
document.URL当前页面的URL地址
document.domain当前页面的域名
document.charset当前页面使用的字符集
document.defaultView返回当前 document对象所关联的 window 对象,没有返回 null
document.anchors文档中所有带name属性的<a>元素
document.links文档中所有带href属性的<a>元素
document.forms文档中所有的<form>元素
document.images文档中所有的<img>元素
document.readyState两个值:loading(正在加载文档)、complete(已经加载完文档)
document.compatMode

两个值:BackCompat:标准兼容模式关闭、CSS1Compat:标准兼容模式开启

write()、writeln()、

open()、close()

write()文本原样输出到屏幕、writeln()输出后加换行符、

open()清空内容并打开新文档、close()关闭当前文档,下次写是新文档

 

位置操作方法

document.documentElement.offsetHeight

文档总高度

document.documentElement.clientHeight

文档占当前屏幕高度

document.documentElement.clientWidth

文档占当前屏幕宽度

offsetHeight

自身高度(height + padding + border)

scrollHeight

文档高度(height + padding)

offsetTop

距离上级标签定位高度(magin)

clientTop

border高度(border)

offsetParent

父级定位标签,元素

scrollTop

滚动高度

 

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    * {      margin: 0;      padding: 0;    }    .zg {      height: 1000px;      position: relative;      border: 3px solid transparent;    }    .dg {      height: 500px;      padding-top: 10px;      margin-top: 20px;      border: 2px solid transparent;    }  </style></head><body onscroll="Scroll()">  <div id="zg" >    <div id="dg" >    </div>  </div>  <script>    var zg = document.documentElement.offsetHeight;    console.log(zg); //1000、文档总高度    var dg = document.documentElement.clientHeight;    console.log(dg); //667,可变、文档占屏幕高度    var dgBox = document.getElementById("dg");    console.log(dgBox.offsetHeight); //514 (padding,border)、自身高度    console.log(dgBox.scrollHeight); //510(padding)、文档高度    console.log(dgBox.offsetTop); //20 (magin)、距离上级定位高度    console.log(dgBox.clientTop); //2(border)、border高度    console.log(dgBox.offsetParent); //<div id="zg" >...</div>元素、父级定位标签    function Scroll() {      console.log(document.body.scrollTop); //滚动高度    }  </script></body></html>

View Code

 

定时器

setInterval多次定时器(毫秒计时)
clearInterval清除多次定时器
setTimeout单次定时器
clearTimeout清除单次定时器
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title></head><body>  <input type="button" value="Interval" onclick="Interval();" />  <input type="button" value="StopInterval" onclick="StopInterval();" />  <script>    function Interval() {      s1 = setInterval(function () {        console.log(123);      }, 1000);      s2 = setInterval(function () {        console.log(456);      }, 2000);      console.log(1);    }    function StopInterval() {      clearInterval(s1);      clearInterval(s2);    }  </script></body></html>

定时器示例

 

弹出框

alert()弹出框
confirm()

确认框

返回值:true、false

prompt()

输入框

两个参数:提示的文本和输入的默认值,返回值:输入的值、""、null

var result = prompt("What is your name?" ,"Nick");if(result != null){  alert("welcome,"+result);  }console.log(result)

prompt

 

location

location.href

location.href = "url"

获取URL

重定向

location.assign("http://www.cnblogs.com/suoning")

重定向到URL

location.search = "wd=suoning"

修改查询字符串(百度搜索)

location.hostname

服务主机名,例:www.cnblogs.com

location.pathname

路径,例:suoning

location.port

端口号

location.reload()

重新加载

 

其它

navigator包含有关浏览器的信息
screen包含有关客户端显示屏幕的信息
history包含用户(在浏览器窗口中)访问过的 URL
window.print();

显示打印对话框

//后退一页history.go(-1)//前进一页history.go(1);//前进两页history.go(2);//无参数时,刷新当前页面history.go()//后退一页history.back()//前进一页history.forward()

history 方法

 

事件操作

 

实例:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title></head><body>  <input type="text" placeholder="请输入内容" />  <input type="text" value="请输入内容" onfocus="Focus(this)" onblur="Blur(this)" />  <!--onfocus鼠标点进去事件、onblur鼠标点出去事件-->  <script>    function Focus(ths) {      var th = ths;      if (th.value == "请输入内容"){        ths.value = "";        ths.className = "style_after";      }    }    function Blur(ths) {      var th = ths;      if (th.value == "请输入内容" || th.value.trim().length == 0){        ths.value = "请输入内容";        ths.className = "style_before";      }    }      </script></body></html>搜索框

搜索框
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title></head><body>  <div id="str_one" ><b> &nbsp;瓜子花生款泉水,抽烟喝酒大保健&nbsp; </b></div>  <script>    setInterval( function () {    str = document.getElementById("str_one");    str_text = str.innerText;    first_char = str_text[0];    sub_char = str_text.slice(1,str_text.length);    new_str = sub_char + first_char;    str.innerText = new_str;    },500);  </script></body></html>

跑马灯
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    .style_before {      color: lightgrey;    }    .style_after {      color: black;    }  </style></head><body>  <h3>爱好</h3>  <div>    <ul id="i1">      <li><input type="checkbox" value="1">篮球</li>      <li><input type="checkbox" value="2">足球</li>      <li><input type="checkbox" value="3">乒乓球</li>    </ul>  </div>  <button onclick="Cheakall()">全选</button>  <button onclick="Cancleall()">取消全选</button>  <button onclick="Reversall()">反选</button>  <script>    function Cheakall() {      var i1 = document.getElementById("i1");      var cheak = i1.getElementsByTagName("input");      for (i=0;i<cheak.length;i++) {        cheak[i].checked = true;      }    }    function Cancleall() {      var i1 = document.getElementById("i1");      var cheak = i1.getElementsByTagName("input");      for (i=0;i<cheak.length;i++) {        cheak[i].checked = false;      }    }    function Reversall() {      var i1 = document.getElementById("i1");      var cheak = i1.getElementsByTagName("input");      for (i=0;i<cheak.length;i++) {        if (cheak[i].checked) {          cheak[i].checked = false;        }else {          cheak[i].checked = true;        }      }    }  </script></body></html>

全选、反选
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    .hide {      display: none;    }    .c1 {      position: fixed;      top: 0;      right: 0;      bottom: 0;      left: 0;      background: rgba(0,0,0,.6);      z-index: 2;    }    .c2 {      position: fixed;      width: 400px;      height: 300px;      top: 50%;      left: 50%;      z-index: 3;      margin-top: -150px;      margin-left: -200px;      background-color: white;      text-align: center;      padding-top: 150px;    }  </style></head><body>  <div><input type="button" value="登录" onclick="hihi()"></div>  <div id="cc1" ></div>  <div id="cc2" >    <div>用户名:<input type="text"></div>    <div>密 码:<input type="text"></div>    <input type="button" value="确定">    <input type="button" value="取消" onclick="hisl()">  </div>  <script>    function hihi() {      document.getElementById("cc1").classList.remove("hide");      document.getElementById("cc2").classList.remove("hide");    }    function hisl() {      document.getElementById("cc1").classList.add("hide");      document.getElementById("cc2").classList.add("hide");    }  </script></body></html>

模态对话框
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    body{      margin: 0;      background-color: #dddddd;    }    .w{      margin: 0 auto;      width: 980px;    }    .pg-header{      background-color: black;      color: white;      height: 48px;    }    .pg-body .menu{      position: absolute;      left: 200px;      width: 180px;      background-color: white;      float: left;    }    .pg-body .menu .active{      background-color: #425a66;      color: white;    }    .pg-body .fixed{      position: fixed;      top: 10px;    }    .pg-body .content{      position: absolute;      left: 385px;      right: 200px;      background-color: white;      float: left;    }    .pg-body .content .item{      height: 900px;    }  </style></head><body onscroll="Hua();">  <div >    <div ></div>  </div>  <div >    <div id="menu" >      <ul>        <li>第一章</li>        <li>第二章</li>        <li>第三章</li>      </ul>    </div>    <div id="content" >      <div >床前明月管</div>      <div >疑是地上霜</div>      <div >我是郭德纲</div>    </div>  </div>  <script>    function Hua() {      var xo = document.getElementById("menu");      var huaGao = document.body.scrollTop;      if (document.body.scrollTop>48){        xo.classList.add("fixed");      }else {        xo.classList.remove("fixed");      }      var bod = document.body.offsetHeight;      var conAbs = document.getElementsByClassName("content")[0].offsetHeight;      var ck = document.documentElement.clientHeight;//      console.log((bod + conAbs) == (ck + huaGao));      if ((bod + conAbs) == (ck + huaGao)) {        var lenLi = xo.getElementsByTagName("li");        for (var i=0;i<lenLi.length;i++){          if (i == lenLi.length - 1){            lenLi[i].className = "active";          }else {            lenLi[i].className = "";          }        }        return      }      var item = document.getElementById("content").children;      for (var i=0;i<item.length;i++){        var currentItem = item[i];        var currentItemBodyTop = currentItem.offsetTop + currentItem.offsetParent.offsetTop;        var currentItemWindowTop = currentItemBodyTop - huaGao;        var currentHeight = currentItem.offsetHeight;        var bottomHeight = currentItemBodyTop + currentHeight;        var ziJi = xo.getElementsByTagName("li")[i];        if (currentItemWindowTop<0 && huaGao < bottomHeight){          ziJi.className = "active";        } else {          ziJi.className = "";        }      }    }  </script></body></html>

书签章节
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    ul{      list-style: none;      padding: 0;      margin: 0;    }    ul li{      float: left;      background-color: #2459a2;      color: white;      padding: 8px 10px;    }    .clearfix:after{      display: block;      content: '.';      height: 0;      visibility: hidden;      clear: both;    }    .hide{      display: none;    }    .tab-menu .title{      background-color: #dddddd;    }    .tab-menu .title .active{      background-color: #0099dd;      color: black;    }    .tab-menu .content{      border: 1px solid #dddddd;      min-height: 150px;    }    ul li:hover {      cursor: pointer;    }  </style></head><body>  <div >    <div >      <div >        <ul>          <li target="h1" onclick="Show(this);">索尼</li>          <li target="h2" onclick="Show(this);">谷歌</li>          <li target="h3" onclick="Show(this);">腾讯</li>        </ul>      </div>      <div id="content" >        <div con="h1">1...</div>        <div con="h2" >2...</div>        <div con="h3" >3...</div>      </div>    </div>  </div>  <script>    function Show(ths) {      var Showli = ths;      var littarget = Showli.getAttribute("target");      var liclass = Showli.parentNode.children;      for (var i=0;i<liclass.length;i++) {        if (liclass[i].getAttribute("target") == littarget) {          liclass[i].classList.add("active");        }else {          liclass[i].classList.remove("active");        }      }      var liycontent = document.getElementById("content").children;      for (var i=0;i<liycontent.length;i++) {        if (liycontent[i].getAttribute("con") == littarget) {          liycontent[i].className = "";        }else {          liycontent[i].className = "hide";        }      }    }  </script></body></html>

菜单
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    .go-top {      position: fixed;      right: 28px;      bottom: 19px;      width: 38px;      height: 40px;      background-color: aliceblue;    }    .hide {      display: none;    }  </style></head><body onscroll="Func();">  <div ></div>  <div id="i2" >    <a onclick="GoTop();">返回顶部</a>  </div>  <script>    function Func() {      var scrolltop = document.body.scrollTop;      var ii = document.getElementById("i2");      if (scrolltop>300) {        ii.classList.remove("hide");      }else {        ii.classList.add("hide");      }    }    function GoTop() {      document.body.scrollTop = 0;    }  </script></body></html>

返回顶部