DOM、BOM操作集合

最新推荐文章于 2021-09-08 23:51:52 发布
最新推荐文章于 2021-09-08 23:51:52 发布
阅读量576 收藏 1
点赞数
分类专栏： # DOM、BOM操作集合 文章标签： dom 文档

DOM、BOM操作集合

一、定义

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

二、节点

节点类型
节点类型描述
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下一个兄弟节点
nextElementCount下一个兄弟标签元素
childElementCount第一层元素的个数（不包括文本节点和注释）
ownerDocument指向整个文档的文本节点
代码示例
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <div id="t">
        <span></span>
        <span id="s">
            <a></a>
            <h1>nick</h1>
        </span>
        <p></p>
    </div>
    <script type="text/javascript">

        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); //<h1>nick</h1>
        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>
节点关系方法：
  • hasChildNodes() 包含一个或多个节点时返回true
  • contains() 如果是后代节点返回true
  • isSaneNode()、isEqualNode() 传入节点与引用节点的引用为同一个对象返回true
  • compareDocumentPostion() 确定节点之间的各种关系
数值关系
1给定节点不在当前文档中
2给定节点位于参考节点之前
4给定节点位于参考节点之后
8给定节点包含参考节点
16给定节点被参考节点包含
代码示例
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <div id="t">
        <span></span>
        <span id="s">
            <a></a>
            <h1>Nick</h1>
        </span>
        <p></p>
    </div>
    <script type="text/javascript">
        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>

三、选择器

选择器
getElementById()一个参数：元素标签的ID
getElementByTagName()一个参数：元素标签名
getElementByName()一个参数：name属性名
getElementsByClassName()一个参数：包含一个或多个类名的字符串
classList返回所有类名的数组
  • add(添加)
  • contains(存在返回true，否则返回 false)
  • remove(删除)
  • toggle(存在则删除，否则添加)
querySelector()接受CSS选择符，返回匹配到的第一元素，没有则null
querySelectorAll()接收CSS选择符，返回一个数组，没有则返回[]
代码示例
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <!--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>
</body>
</html>

四、style

样式操作方法style
style.cssText可对style中的代码进行读写
style.item()返回给定位置的CSS属性的名称
style.lengthstyle代码块中参数个数
style.getPropertyValue()返回给定属性的字符串值
style.getPropertyPriority()检测给定属性是否设置了！important,设置了返回”important”;否则返回空字符串
style.removeProperty()删除指定属性
style.setProperty()设置属性，可三个参数:设置属性名，设置属性值，是否设置为”important”(可不写)
代码示例
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <div id="t" style="background-color: yellow; 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>

五、表格操作

表格操作方法
createTHead()创建 thead 元素，返回引用
deleteTHead()删除 thead 元素
createTBody()创建 tbody 元素，返回引用
inseRow(0)插入 tr 元素，从0开始
deleteRow(pos)删除指定位置的行
insertCell(0)插入 td 元素，从0开始
deleteCell(pos)删除指定位置的单元格
代码示例
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</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>

六、表单操作

表单操作方式
document.forms获取所有表单
.submit()提交表单
代码示例
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</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>

七、元素节点ELEMENT

nodeType:1
nodeName访问元素的标签名
tagName访问元素的标签名
createElement()创建节点
appendChild()末尾添加节点，并返回新增节点
insertBefore()参照节点之前插入节点，两个参数：要插入节点和参加节点
insertAfter()参照节点之后插入节点，两个参数：要插入的节点和参照节点
replaceChild()替换节点，两个参数：要插入的节点和要替换的节点（被移除）
removeChild()移除节点
cloneNode()克隆，一个布尔值参数，true为深拷贝，false为浅拷贝
importNode()从文档中复制一个节点，两个参数：要复制的节点和布尔值（是否复制子节点）
insertAdjacentHTML()插入文本，两个参数:插入的位置和要插入的文本
  • “beforebegin”,在该元素前插入
  • “afterbegin”,在该元素第一个子元素前插入
  • “beforeend”,在该元素最后一个子元素后面插入
  • “afterend”,在该元素后插入
代码示例：
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</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>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</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>

八、属性节点attributes

nodeType:2
attributes获取所有标签属性
getAttribute()获取指定标签属性
setAttribute()设置指定标签属性
removeAttribute()移除指定标签属性
var s=document.createAttribute(“age”) s.nodeValue=”18”创建age属性 设置属性值为18
代码示例
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</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>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</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>

九、文本节点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开始到count处的文本被text替换
substringData(offset,count)提取从offset开始到count处的文本
代码示例：
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</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>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</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>

十、文档节点 Document

nodeType: 4
document.documentElement代表页面中的 html 元素
document.body代表页面中的 body 元素
document.doctype代表 !DOCTYPE 标签
document.head代表页面中的 head 元素
document.title代表 title 元素的文本，可修改
document.URL当前页面的URL地址
document.domain当前页面的域名
document.chartset当前页面使用的字符集
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()write()文本原样输出到屏幕、writeln()输出后加换行符
open()/close()open()清空内容并打开新文档、close()关闭当前文档，下次写是新文档

十一、位置操作方法

document.documentElement.offsetHeight文档总高度
document.documentElement.clientHeight文档占当前屏幕高度
document.documentElement.clientWidth文档占当前屏幕宽度
offsetHeight自身高度(height+padding+border)
scrollHeight文档高度(height+padding)
offsetTop距离上级标签定位高度(magin)
clientTopborder高度(border)
offsetParent父级定位标签，元素
scrollTop滚动高度
代码示例
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<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>

十二、定时器

setInterval多次定时器(毫秒计时)>
clearInterval清除多次定时器
setTimeout单次定时器
clearTimeout清除单次定时器
代码示例
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</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
prompt
var result = prompt("What is your name?" ,"Nick");
if(result != null){
    alert("welcome,"+result);    
}
console.log(result)

十四、location

location.href获取URL
location.href=”URL”重定向
location.assign(“http://www.baidu.com”)重定向到URL
location.search=”wd=hundan”修改查询字符串(百度搜索)
location.hostname服务主机名，例：www.baidu.com
location.pathname路径，例：baidu
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()

十六、事件操作

属性此事件发生在何时….
onabort图像的加载被中断。
onblur元素失去焦点
onchange域的内容被改变
onclick当用户点击某个对象时调用的事件句柄
ondblclick当用户双击某个对象时调用的事件句柄
onerror在加载文档或图像时发生错误
onfocus元素获得焦点
onkeydown某个键盘按键被按下
onkeypress某个键盘按键被按下并松开
onkeyup某个键盘按键被松开
onload一张页面或一幅图像完成加载
onmousemove鼠标被移动
onmousedown鼠标按钮被按下
onmouseout鼠标从某个元素移开
onmouseover鼠标移到某元素之上
onmouseup鼠标按键被松开
onreset重置按钮被点击
onresize窗口或框架被重新调整大小
onselect文本被选中
onsubmit确认按钮被点击
onunload用户退出页面
hundan_520520
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
常用BOM操作
子敬的技术博客
07-08 1392
常用BOM操作 window常用对象 所有浏览器都支持 window 对象。它表示浏览器窗口。 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。 window window尺寸 有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。 对于Internet Explorer、Chrome、Firefox、Opera 以及 Sa...
常用的BOM操作
我是渣渣
11-01 504
JavaScript: 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.b
BOM常用操作
zhouyuzhu666的博客
09-08 458
BOM(Browser Object Model)浏览器对象模型，浏览器提供的js操作浏览器的API,BOM提供了与网页无关的浏览器的功能对象,它没有正式的标准，由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。 window是BOM的顶级对象，它表示浏览器的窗口，window对象在浏览器中有两重身份：1.是ECMAScript中的global对象；2.是浏览器窗口的javascript接口 1.window对象 1.1窗口的位置 sc
BOM对象集合JavaScript
Darlingmi的博客
06-13 210
一 、BOM——浏览器对象模型      BOM全称是Brower Object Model ，核心对象是window。可以独立于内容与浏览器进行交互。 二、window对象的常见事件 1、window.onload事件 window.onload事件是窗口（页面）加载事件，当文档内容（包括图像、脚本文件、CSS文件等）完全加载完成会触发该事件。 实现方式：         
个人对Bom常用的方法总结
jennyya的博客
11-08 1792
定义：BOM（Browser Object Model）是浏览器对象模型。 提供了独立于内容与浏览器窗口进行交互的对象，他的核心对象就是window（顶层对象）。 js语法的标准化组织是ECMA,但是BOM没有规范标准，所以提供了的方法会存在兼容性问题。 BOM是由一系列的对象组成。每个对象都提供了自己属性和方法。 有三个节点：元素节点、文本节点、属性节点 BOM结构图   ...
DOM和BOM的使用
01-08
属性集合是指 DOM 中的属性集合，它提供了许多方法和属性，开发者可以通过这些方法和属性来操作文档的内容和结构。 读取属性 读取属性是指通过 JavaScript 读取 DOM 中的属性。DOM 提供了许多方法和属性，开发者...
javascript操作BOM对象.docx
07-05
JavaScript 操作 BOM 对象 本文档主要介绍了 JavaScript 操作 BOM（ Browser Object Model）对象的相关知识点，包括 window 对象、history 对象、location 对象、Document 对象、Math 对象和 Date 对象等。 window...
BOM对象和DOM对象
12-02
**BOM对象与DOM对象详解** 在Web开发中，BOM（Browser Object Model）对象和DOM（Document Object Model）对象是两个至关重要的概念，它们分别处理浏览器交互和HTML文档结构的解析。 **一、BOM对象** BOM，浏览器...
javascript bom是什么及bom和dom的区别
11-22
总的来说，BOM和DOM都是JavaScript在Web开发中不可或缺的部分，BOM用于浏览器环境下的交互和控制，而DOM则是处理和操作页面内容的关键工具。理解并熟练运用这两个模型，是成为一个合格的前端开发者所必需的技能。
js学习资源(js基础、BOM和DOM操作)
03-08
在"js学习资源(js基础、BOM和DOM操作)"这个主题中，我们主要探讨JavaScript的基础知识，包括变量、数据类型、控制流程、函数等基本概念，以及如何使用JavaScript来操作浏览器对象模型（BOM）和文档对象模型（DOM）。...
JavaScript（核心、BOM、DOM）[转]
王东电台
03-03 2174
JavaScript是基于对象和事件驱动的客户端脚本语言。有如下特点： 交互性 安全性（不可以直接访问本地硬盘） 跨平台性（只要是可以解析js的浏览器都可以执行，和平台无关） 1、JavaScript和Java不同！ ①所属：NetScape和Sun ②基于对象和面向对象 ③JS可以直接解析执行，Java需先编译在运行 ④JavaScript是一
Javascript之BOM与DOM讲解
热门推荐
晨港飞燕的专栏
05-13 8万+
一.Javascript组成JavaScript的实现包括以下3个部分：ECMAScript(核心)描述了JS的语法和基本对象。文档对象模型 （DOM）处理网页内容的方法和接口浏览器对象模型（BOM）与浏览器交互的方法和接口javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异,IE 扩展了 BOM，...
JS访问表格内容，计时器等示例代码
做得最大的项目，就是人生
08-25 858
还是把总结的东西放到网上好哇，记不清楚直接拷贝来用哇         function OpenWin() {             window.open("http://www.g.cn");         }         function OpenWin
js——BOM操作相关方法
肖的博客
08-26 459
window.open();//打开新窗口 window.close();//关闭当前窗口 window.moveTo();//移动当前窗口 window.resizeTo();//调整当前窗口 //可用屏幕宽/高 screen.availWidth; screen.availHeight; screen.colorDepth;/...
js中BOM和DOM之间的详解
tiny_wei的博客
04-05 8535
一、Javascript组成JavaScript的实现包括以下3个部分：1、核心（ECMAScript）：描述了JS的语法和基本对象。2、文档对象模型 （DOM）：处理网页内容的方法和接口。3、浏览器对象模型（BOM）：与浏览器交互的方法和接口。二、BOM（浏览器对象模型）1、window对象说明：BOM的核心对象是window，他表示浏览器的一个实例。他既是通过JavaScript访问浏览器窗口...
常见的BOM功能
u013861109的博客
12-20 2931
window对象window对象是BOM的核心，window对象指当前的浏览器窗口。 window对象方法: 方法 描述 alert() 显示带有一段消息和确认按钮的警告框 prompt() 显示可提示用户的对话框 comfirm() 显示带有一段消息以及确认按钮和取消按钮的对话框 open() 打开一个新的浏览器窗口或查找一个已命名的窗口 close()
BOM常用属性与方法
williamgavin的博客
01-23 3127
BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。 – 百度百科 BOMBrowser Object Model wi
BOM操作常用方法
weixin_46389011的博客
04-05 516
window对象 浏览器弹出框：open("http://163.com","我的网页","width=200,height=200") 视窗宽高：nnerWidth,innerHeight 和document.documentElement.clientWidth clienHeight一样 浏览器窗口宽高：outerWidth,outerHeight 获取当前窗口相对屏幕的坐标：sc...
DOM操作和BOM操作
最新发布
02-06
好的。 DOM（文档对象模型）是一种用于表示HTML和XML文档的标准方式。它将文档的内容组织成一个树形结构，使开发人员可以使用脚本...例如，可以使用BOM操作来控制浏览器的滚动条、打开新的浏览器窗口或提示对话框。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值