码迷，mamicode.com
首页 > 其他好文 > 详细

DOM、BOM 操作超级集合

时间：2016-07-25 14:44:24      阅读：355      评论：0      收藏：0      [点我收藏+]

标签：

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

 

定义

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。

 

节点类型

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

节点类型描述
1 Element 代表元素
2 Attr 代表属性
3 Text 代表元素或属性中的文本内容。
4 CDATASection 代表文档中的 CDATA 部分（不会由解析器解析的文本）。
5 EntityReference 代表实体引用。
6 Entity 代表实体。
7 ProcessingInstruction 代表处理指令。
8 Comment 代表注释。
9 Document 代表整个文档（DOM 树的根节点）。
10 DocumentType 向为文档定义的实体提供接口
11 DocumentFragment 代表轻量级的 Document 对象，能够容纳文档的某个部分
12 Notation 代表 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 class="t">
        <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 class="t t2 t3"></div>
    <script>
        var tT = document.getElementsByTagName(‘div‘)[0];
        tTList = tT.classList;
        console.log(tT); //<div class="t t2 t3"></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 class="t t2 t3"></div>
    <div class="t" id="t"></div>
    <div name="nick"></div>
    <script>
        var tT = document.querySelector("div");
        console.log(tT); //<div class="t t2 t3"></div>
        var tI = document.querySelector("#t");
        console.log(tI); //<div class="t" id="t"></div>
        var tC = document.querySelector(".t");
        console.log(tC); //<div class="t t2 t3"></div>
        var tN = document.querySelector("[name]");
        console.log(tN); //<div name="nick"></div>
    </script>


<!--querySelectorAll()-->
    <div class="t t2 t3"></div>
    <div class="t" 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.length style代码块中参数个数
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" style=" width: 100px; height: 100px">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 class="t">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" class="tClass" 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 class="tC">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" class="s1 s2" 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); //class="s1 s2"

        console.log(tT.attributes.getNamedItem("name")); //name="nick"
        console.log(tT.attributes.removeNamedItem("class")); //class="s1 s2"
        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" class="s1 s2" 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); //class="s1 s2"

        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" class="zg">
        <div id="dg" class="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" class="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" class="style_before" 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" style="height: 150px; color: red; font-size: 50px; text-align: center; line-height: 150px"><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" class="c1 hide"></div>
    <div id="cc2" class="c2 hide">
        <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 class="pg-header">
        <div class="w"></div>
    </div>
    <div class="pg-body">
        <div id="menu" class="menu">
            <ul>
                <li>第一章</li>
                <li>第二章</li>
                <li>第三章</li>
            </ul>
        </div>
        <div id="content" class="content">
            <div class="item">床前明月管</div>
            <div class="item">疑是地上霜</div>
            <div class="item" style="height: 100px">我是郭德纲</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 style="width: 400px; margin: 0 auto;">
        <div class="tab-menu">
            <div class="title clearfix">
                <ul>
                    <li target="h1" class="active" onclick="Show(this);">索尼</li>
                    <li target="h2" onclick="Show(this);">谷歌</li>
                    <li target="h3" onclick="Show(this);">腾讯</li>
                </ul>
            </div>
            <div id="content" class="content">
                <div con="h1">1...</div>
                <div con="h2" class="hide">2...</div>
                <div con="h3" class="hide">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 style="height: 2000px"></div>
    <div id="i2" class="go-top hide">
        <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>
返回顶部

 

DOM、BOM 操作超级集合

标签：

原文地址：http://www.cnblogs.com/zhangxiaolei521/p/5703271.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！