前端_DOM&BOM
前端BOM
BOM:浏览器对象模型
window
alert：弹出信息框
alert('String')
// 或者
Window.alert("String")
confirm：弹出确认框，确定或取消；返回结果赋值给一个变量
var a=window.confirm("确定离开？") // true or false
prompt：弹出输入框，用一个变量接受输入信息
var a=window.prompt("请输入：")
定时器：setTimeout或setInterval
setInterval // 多次定时器，间隔性执行
clearInterval // 清除多次定时器
setTimeout // 单次定时器，设置定时器后，定时器后面的操作继续执行
clearTimeout // 清除单次定时器 window.setTimeout(function(){
console.log('开始定时');
} ,1000)
console.log('继续执行') // 无论定时器设置0还是1000毫秒，都先打印"继续执行" var num=0;
var timer=null;
timer=setInterval(function(){
num++;
if(num>5){
clearInterval(timer);
return;
}
console.log('num:'+num);
}, 1000);
location
location.host
location.hostname
location.href // 若赋值一个新的url(location.href='www.baidu.com')，则进行跳转；若console.log(location.href)，则打印当前url
location.reload // 重新加载网页，可以和定时器结合使用
location.replace // location.replace('www.baidu.com')，跳转网页，不会产生历史记录，点击网页前进后退不会返回这个页面
location.pathname
location.port
location.protocol
location.search function getQueryString(){
var qs = location.search.length>0 ? location.search.substring[1]:'';
var items=qs.length ? qs.split('&'):[];
var item=null,name=null,value=null,args={};
for (var i=0; i<items.length;i++){
item=items[i].split('=');
name=decodeURIComponent(item[0]);
value=decodeURIComponent(item[1]);
if(name.length){
args[name]=values;
}
}
return args;
}
var args = getQueryString();
console.log(args.name);
console.log(args.pwd) ;
navigator
用于检测浏览器上的插件
function hasPlugin(name){
name=name.toLowerCase();
for(var i=0;i<navigator.plugins.length;I++){
if(navigator.plugins[i].name.toLowerCase().indexOf(name)>-1)
{
return true;
}else{
return false;
}
}
alert(hasPlugin('flash'))
}
history
网页的历史记录
var count=0;
setTimeout(function(){
count++;
histroy.go(0) // 0表示刷新，1表示网页前进按钮，-1表示网页后退按钮
}, 2000)
前端DOM
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
查找元素
直接查找
document.getElementById // 根据ID获取一个标签
document.getElementsByName // 根据name属性获取标签集合
document.getElementsByClassName // 根据class属性获取标签集合
document.getElementsByTagName // 根据标签名获取标签集合
间接查找
parentNode // 父节点
childNodes // 所有子节点
firstChild // 第一个子节点
lastChild // 最后一个子节点
nextSibling // 下一个兄弟节点
previousSibling // 上一个兄弟节点
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
操作
节点对象的三大属性
// 在DOM中。每一个节点都是一个对象;DOM节点有三大属性 nodeNname // 节点名称，只读
// 元素节点的nodeName与标签名相同
// 属性节点的nodeName与属性名称相同
// 文本节点的nodeName永远是#text
// 注释节点的nodeName永远是#comments nodeValue // 节点的值
// 元素节点的nodeValue是undefined或null
// 文本节点的nodeValue是文本自身
// 属性节点的nodeValue是属性的值 nodeType // 节点的类型
// 元素的nodeType为1
// 属性nodeType为2
// 文本的nodeType为3
// 注释的nodeType为8
// 文档的nodeType为9
操作内容
innerText 文本
outerText
innerHTML HTML内容
innerHTML
value 值
操作属性
attributes // 获取标签所有属性
setAttribute(key,value) // 设置标签属性
getAttribute(key) // 获取指定标签属性值
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="全选" onclick="CheckAll();"/>
<input type="button" value="取消" onclick="CancelAll();"/>
<input type="button" value="反选" onclick="ReverseCheck();"/> <table border="1" >
<thead> </thead>
<tbody id="tb">
<tr>
<td><input type="checkbox" /></td>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>111</td>
<td>222</td>
</tr><tr>
<td><input type="checkbox" /></td>
<td>111</td>
<td>222</td></tr>
</tbody>
</table>
<script>
function CheckAll(ths){
var tb = document.getElementById('tb');
var trs = tb.childNodes;
for(var i =0; i<trs.length; i++){ var current_tr = trs[i];
console.log(current_tr.nodeType)
if(current_tr.nodeType==1){
var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
inp.checked = true;
}
}
} function CancelAll(ths){
var tb = document.getElementById('tb');
var trs = tb.childNodes;
for(var i =0; i<trs.length; i++){ var current_tr = trs[i];
if(current_tr.nodeType==1){
var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
inp.checked = false;
}
}
} function ReverseCheck(ths){
var tb = document.getElementById('tb');
var trs = tb.childNodes;
for(var i =0; i<trs.length; i++){
var current_tr = trs[i];
if(current_tr.nodeType==1){
var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
if(inp.checked){
inp.checked = false;
}else{
inp.checked = true;
}
}
}
} </script>
</body>
</html> Demo
反选1
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="全选" onclick="CheckAll();"/>
<input type="button" value="取消" onclick="CancelAll();"/>
<input type="button" value="反选" onclick="ReverseCheck();"/> <table border="1" >
<thead> </thead>
<tbody id="tb">
<tr>
<td><input type="checkbox" /></td>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>111</td>
<td>222</td>
</tr>
</tbody>
</table>
<script>
function CheckAll(ths){
var tb = document.getElementById('tb');
var trs = tb.childNodes;
for(var i =0; i<trs.length; i++){ var current_tr = trs[i];
if(current_tr.nodeType==1){
var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
inp.checked = true;
}
}
} function CancelAll(ths){
var tb = document.getElementById('tb');
var trs = tb.childNodes;
for(var i =0; i<trs.length; i++){ var current_tr = trs[i];
if(current_tr.nodeType==1){
var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
inp.checked = false;
}
}
} function ReverseCheck(ths){
var tb = document.getElementById('tb');
var trs = tb.childNodes;
for(var i =0; i<trs.length; i++){
var current_tr = trs[i];
if(current_tr.nodeType==1){
var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
if(inp.checked){
inp.checked = false;
}else{
inp.checked = true;
}
}
}
} </script>
</body>
</html> Demo
反选2
注：childNodes和children的区别
- children是指DOM Object类型的子对象，不包括tag之间隐形存在的TextNode；
- childNodes包括tag之间隐形存在的TextNode对象。
- TextNode节点对应nodeType=3，div节点对应nodeType=1；体会反选1和反选2实例
- 下面实例1中childNodes和children没区别
//实例1 <div id="father">
<div>01</div><div>02</div><div>03</div></div> <script type="text/javascript">
console.log(document.getElementById("father").childNodes);
</script> //实例2 <div id="father">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
<script type="text/javascript">
console.log(document.getElementById("father").childNodes);
</script>
class操作
className // 获取所有类名
classList.remove(cls) // 删除指定类
classList.add(cls) // 添加类
创建标签
// 方式一
var tag = document.createElement('a')
tag.innerText = "wupeiqi"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/wupeiqi" // 方式二
var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>"
插入标签
// 方式一
var obj = "<input type='text' />";
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentElement('afterBegin',document.createElement('p')) //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd' // 方式二
var tag = document.createElement('a')
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])
样式操作
var obj = document.getElementById('i1')
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";
实例
<input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="请输入关键字" style="color: gray;" />
<script>
function Focus(ths){
ths.style.color = "black";
if(ths.value == '请输入关键字' || ths.value.trim() == ""){ ths.value = "";
}
}
function Blur(ths){
if(ths.value.trim() == ""){
ths.value = '请输入关键字';
ths.style.color = 'gray';
}else{
ths.style.color = "black";
}
}
</script>
位置操作
总文档高度
document.documentElement.offsetHeight 当前文档占屏幕高度
document.documentElement.clientHeight 自身高度
tag.offsetHeight 距离上级定位高度
tag.offsetTop 父定位标签
tag.offsetParent 滚动高度
tag.scrollTop /*
clientHeight -> 可见区域：height + padding
clientTop -> border高度
offsetHeight -> 可见区域：height + padding + border
offsetTop -> 上级定位标签的高度
scrollHeight -> 全文高：height + padding
scrollTop -> 滚动高度
特别的：
document.documentElement代指文档根节点
*/
提交表单
document.geElementById('form').submit()
其他操作
console.log 输出框
alert 弹出框
confirm 确认框 // URL和刷新
location.href 获取URL
location.href = "url" 重定向
location.reload() 重新加载 // 定时器
setInterval 多次定时器
clearInterval 清除多次定时器
setTimeout 单次定时器
clearTimeout 清除单次定时器
事件
绑定事件
直接标签绑定 onclick='xxx()' onfocus； this 代表当前触发事件的标签
<input id='i1' type='button' onclick='ClickOn(this)'>
function ClickOn(self){
// self 当前点击的标签
}
先获取Dom对象，然后进行绑定
<input id='i1' type='button' >
document.getElementById('i1').onclick = function(){
// this 代指当前点击的标签 }
第三种绑定方式:对于一个标签，同时绑定多个方法
var myTrs = document.getElementsByTagName("tr");
myTrs.addEventListener('click',function(){},false)
注：谁调用function,this 就代表谁
实例
多行表格绑定事件
var myTrs = document.getElementsByTagName("tr");
var len = myTrs.length;
for(var i=0;i<len;i++){
myTrs[i].onmouseover = function(){
this.style.backgroundColor = "red";
};
}
参考
https://www.cnblogs.com/wupeiqi/articles/5643298.html
前端_DOM&BOM的更多相关文章
- 前端(4)BOM与DOM
前端(4)BOM与DOM I/O前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交 ...
- 第四章、前端之BOM和DOM
目录 第四章.前端之BOM和DOM 一.解释BOM和DOM 二.window对象 三.window子对象 四.弹出框 五.计时相关 六.HTML的DOM树 七.查找元素 八.节点操作 九.JS操作CS ...
- 04 前端之BOM与DOM
目录 前端之BOM与DOM BOM与DOM操作 BOM操作 前端之BOM与DOM BOM与DOM操作 BOM 浏览器对象模型>>>:使用js操作浏览器 DOM 文档对象模型>& ...
- 前端之BOM与DOM-JQuery
一.前端基础之BOM和DOM: 1: JavaScript分为 ECMAScript,DOM,BOM BOM:指的是浏览器对象模型,它使JavaScript有能力与浏览器进行“对话” DOM:是指文档 ...
- 前端之BOM和DOM
BOM和DOM简介 BOM(Browser Object Model)是指浏览器对象模型,它使JavaScript有能力与浏览器进行“对话”. DOM(Document Object Model)是指 ...
- 前端之BOM
老师的博客:https://www.cnblogs.com/liwenzhou/p/8011504.html BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScr ...
- 前端 --- 5 BOM 和 DOM
一.BOM BOM(Browser Object Model)是指浏览器对象模型, 它使 JavaScript 有能力与浏览器进行“对话”. 1. window 对象 一些常用的Window方法: ( ...
- 前端开发 —— BOM
0. BOM vs. DOM BOM:Browser Object Model,浏览器对象模型,是在 web 中使用 JavaScript 的绝对核心: BOM:提供了独立于内容而与浏览器窗口进行交互 ...
- 前端基础-BOM和DOM的介绍
阅读目录 BOM和DOM的简述 DOM详细操作 事件 一.BOM和DOM的简述 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我 ...
随机推荐
- MSSQL字符串取相应的第几个数组值
create function Get_StrArrayStrOfIndex( @str varchar(5000), --要分割的字符串 @split varchar(10), --分隔符号 @in ...
- 配置文件 "G:\虚拟机列表\Linux001.vmx" 由产品 VMware 创建, 其版本 VMware Workstation 不兼容并且不能使用.
解析: 报这种错误一般是虚拟机文件里声明的VMware版本和真实的VMware版本不一致导致.我们可以手动更改真实VMware版本,或者更改虚拟机文件里声明的VMware版本.以下我们通过更该虚拟机文 ...
- 【BZOJ4766】文艺计算姬
让你求一个两边各有n和m个点的完全二分图有多少个生成树. 这是一道比较经典的利用prufer序列结论求解答案的计数题. 大致思路考虑一张二分图求解prufer序列,由于prufer序列求解时最后剩下的 ...
- 【Deep Learning Nanodegree Foundation笔记】第 10 课：Sentiment Analysis with Andrew Trask
In this lesson, Andrew Trask, the author of Grokking Deep Learning, will walk you through using neur ...
- div随着屏幕滚动而滚动
<script type="text/javascript"> $(document).ready(function () { var menuYloc = $(&qu ...
- IIS7多站点ssl配置及http自动跳转到https
SSL证书配置参考如下: http转https实战教程iis7.5 window08 IIS7安装多域名SSL证书绑定443端口 关键是修改C:\Windows\System32\inetsrv\co ...
- [转帖]linux下使用 du查看某个文件或目录占用磁盘空间的大小
linux下使用 du查看某个文件或目录占用磁盘空间的大小 du -ah --max-depth= 去年用过一次 后来忘记了.. 命令这个东西 熟能生巧.. https://www.cnblogs.c ...
- oracle数据区间
区是段下面的一个管理单位,一个区在物理上是一段连续的数据块. 一个数据文件有一个文件头,它用了若干个数据块,这个文件头里记录着区的分配与释放的信息.在这个文件中有些区是被使用的,有些区是空闲的. 什么 ...
- SVN随笔记录(二)
二.TortoiseSVN操作 1.下载,安装,过程中需要勾选x ,目的是为了后期绑定idea 2.如果点击后出现一系列的找不到目标文件提示,重启电脑 3.重启后,绑定仓库路径 4.一般情况输入账号密 ...
- GDOI2018游记
前言 不知怎的,本蒟蒻居然拿到了GDOI参赛名额 于是乎,我稀里糊涂地跟着诸位大佬屁颠屁颠地来到了阔别已久的中山一中 腐败difficult and interesting的GDOI比赛就这样开始了. ...