day 46 前端基础之 BOM和 DOM
主要内容:https://www.cnblogs.com/liwenzhou/p/8011504.html
1 . Javascript 分为ECMAscript, DOM, BOM.
BOM(Browser Object Model) 是指浏览器对象模型, 它使JavaScript又能努力与浏览器进行对话
DOM(Document Object Model)是指文档对象模型, 通过它,可以访问html文档的所有元素.
windows对象是客户端javascript最高层对象之一, 由于windows对象是其他大部分对象的共同祖先.windows对象的方法和属性, 可以省略windows对象的引用.
2 . window的子对象
navigator对象 : 浏览器对象, 通过这个对象可以判定用户所使用的浏览器,包含了浏览器相关信息.
location对象: (重要) window.location 对象用于获得当前页面的地址,并把浏览器定向到新的页面
常用属性和方法:
location.href //获取url "https://www.sogo.com/"
location.href='url' //跳转到指定页面 location.reload() // 重新加载页面
history对象: window.history对象包含浏览器的历史
history.forward() // 前进一页 history.back() // 后退一页
弹出框: 在javascript中创建三种消息框:警告框 确认框 提示框
警告框: 经常用于确保用户可以得到某些信息.当警告框出现后,用户需要点击确定按钮才能进行操作.
alert(123)
确认框: 确认框用于使用户可以验证或者接受某些信息.
当确认框出现后, 用户需要点击确定后者取消按钮才能进行继续操作.点确认返回ture,否则else
confirm('que')
true
confirm('124')
false
提示框: 提示框常用提示用户在进入页面前输入某个值
prompt('请在下方输入','答案')
"答案"
prompt('请在下方输入','答案')
null
3 . 计时相关
a : 定义 : 通过使用javascript. 我们可以在一定时间间隔之后来执行代码, 而不是在函数调用后立即执行. 这称计时事件.
b : setTimeout 语法 : var t = setTimeout('js语句', 毫秒)
setTimeout(function jump(){alert(123)}, 3000) # 第一种方式
function kk(){
alert(123)
}
setTimeout(kk, 4000) # 第两种方式
2
clearTimeout() 语法 : clearTimeout( setTimeout_variable)
var timer = setTimeout(function(){
alert(123);}, 3000);// 取消settimeout设置
clearTimeout(timer)
c : setInterval() 语法 : var t = setTimeout('js语句', 时间间隔)
function an(){
console.log(123)
}
setInterval(an, 1000)
1
clearinterval()
function an(){
console.log(123)
}
var t2 = setInterval(an, 1000)
clearInterval(t2)
4 . 查找标签
1) 直接查找
1. document.getElementById("id值") --> 找到具体的标签对象
2. document.getElementsByClassName("样式类名") --> 找到标签对象的数组
3. document.getElementsByTagName("标签名") --> 找到标签对象的数组
document.getElementById('i1') #根据id获取一个标签
<div id="i1">div</div>
document.getElementsByClassName('c1') #根据class属性获取
var c1Ele = document.getElementsByClassName('c1')
undefined
c1Ele
HTMLCollection(2) [p.c1, p.c1]
c1Ele[0]
<p class="c1">p1</p>
c1Ele[1]
var c2e = document.getElementsByTagName('p') #根据标签名获取标签合集
undefined
c2e[0]
<p class="c1">p1</p>
c2e[0].innerText = 'biaoqian' # 修改文本内容
"biaoqian"
2 ) 间接查找
var d2 = document.getElementById('d2')
d2.children #所有子标签
HTMLCollection(3) [p, div#d3, p, d3: div#d3]
d2.firstElementChild #第一个子标签元素
<p>d3前面的p标签</p>
d2.lastElementChild #最后一个子标签元素
<p>d3后面的p标签</p>
d3 = document.getElementById('d3')
<div id="d3">div2</div>
d3.previousElementSibling #上一个兄弟标签
<p>d3前面的p标签</p>
d3.nextElementSibling #下一个兄弟标签
<p>d3后面的p标签</p>
parentElement 父节点标签元素
innertext innerHTML的区别
d2.innerText
"d3前面的p标签
div2
d3后面的p标签"
d2.innerHTML
"
<p>d3前面的p标签</p>
<div id="d3">div2</div>
<p>d3后面的p标签</p>
"
5 . 节点操作
1 ) 创建节点和添加节点
追加一个子节点(作为最后的子节点) : somenode.appendchild(newnode)
var pele = document.createElement('span') #创建一个节点
undefined
pele.innerText = '最美的太阳'
"最美的太阳"
d2.appendChild(pele) #追加一个子节点
<span>最美的太阳</span>
把增加的节点放到某一个节点的前边: somenode.insertbefore(newnode, 某个节点)
var div1 = document.createElement('div')
undefined
div1.innerText = '张杰'
"张杰"
d2.insertBefore(div1, d3)
<div>张杰</div>
实例二
var img1 = document.createElement('img');
undefined
img1.setAttribute('src','http://g.hiphotos.baidu.com/baike/pic/item/314e251f95cad1c8f1589f12723e6709c93d5127.jpg');
undefined
var i2 = document.getElementById('i2');
undefined
d2.appendChild(img1)
<img src="http://g.hiphotos.baidu.com/baike/pic/item/314e251f95cad1c8f1589f12723e6709c93d5127.jpg">
2 ) 删除节点和替换节点
删除节点的语法 : 获取要删除的元素, 通过父元素调用删除 removechild(要删除的节点)
替换节点的语法 : somenode.replacechild(newnode, 某个节点)
var d2 = document.getElementById('d2')
undefined
var d3 = document.getElementById('d3')
undefined
d2.removeChild(d3)
<div id="d3">div2</div>
div2 = document.createElement('div')
<div></div>
d2.replaceChild(div2, d2)
文本节点: innertext不能识别标签都按照文本显示
innerHTML能正常识别标签
d2.innerText = '<p>呵呵</p>' "<p>呵呵</p>" d2.innerHTML = '<p>呵呵</p>' "<p>呵呵</p>" #在文本中显示'呵呵'
6 . 获取值操作
适用于以下标签: input select textarea
var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);
7 class 的操作
className 获取所有样式类名(字符串) classList.remove(cls) 删除指定类 classList.add(cls) 添加类 classList.contains(cls) 存在返回true，否则返回false classList.toggle(cls) 存在就删除，否则添加
例子:
var d1ele = document.getElementById('d1')
d1ele.className 获取所有样式类名
"c c1"
d1ele.classList
DOMTokenList(2) ["c", "c1", value: "c c1"]0: "c"1: "c1"length: 2value: "c c1"__proto__: DOMTokenList
d1ele.classList.remove('c1') 删除指定类
undefined
d1ele.classList.add 增加指定类
ƒ add() { [native code] }
d1ele.classList.add('c1')
undefined
d1ele.classList.contains('c1') 存在返回ture, 否则返回false
true
d1ele.classList.toggle('c1') 存在就删除, 否则添加
false
d1ele.classList.toggle('c1')
true
8 . 指定css操作
d1ele <div id="d1" class="c c1"></div> d1ele.style.backgroundColor = 'deeppink' "deeppink" d1ele.style.borderRadius= '3px' "3px"
9 . 事件机制
1) 常用事件
复制代码 onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 // 练习：输入框 onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动） onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 onselect 在文本框中的文本被选中时发生。 onsubmit 确认按钮被点击，使用的对象是form。
2 ) 例子
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
<style>
.c {
height: 200px;
width: 200px;
background-color: red;
border-radius: 50%;
}
.c1 {
background-color: green;
}
</style>
</head>
<body>
<div id="d1" class="c c1"></div>
<button onclick="change()" id="b1">点我1</button>
<input type="button" id="b2" value="点我2">
<script>
function change() {
var d1Ele = document.getElementById("d1");
d1Ele.classList.toggle("c1");
}
// 通过JS给标签绑定事件
var b2Ele = document.getElementById("b2");
b2Ele.onclick=function () {
console.log(this);
// this表示触发事件的标签本身
var d1Ele = document.getElementById("d1");
d1Ele.classList.toggle("c1");
}
</script>
</body>
</html>
3 ) input框获取焦点和失去焦点事件
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
</head>
<body>
<input type="text" id="i1" value="对子哈特">
<script>
// 找到要绑定事件的标签
var i1Ele = document.getElementById("i1");
// 1. 先绑定获取焦点的事件
i1Ele.onfocus = function (ev) {
// 当输入框获取焦点之后要做的事儿
this.value = "";
};
// 2. 绑定失去焦点的事件
i1Ele.onblur = function (ev) {
this.value = "对子哈特";
}
</script>
</body>
</html>
10 select联动
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
</head>
<body>
<label for="s1"></label>
<select name="" id="s1">
<option value="01">省</option>
</select>
<label for="h1"></label>
<select name="" id="h1">
<option value="01">市</option>
</select>
<script>
var data = {
'北京':['昌平区','海定区','朝阳区'],
'上海':['浦东新区','徐汇区']
};
var s1ele = document.getElementById('s1');
var h1ele = document.getElementById('h1');
//拿到所有的省, 在s1中生成对应的option选项
for(var i in data){
//创建option标签
var opt = document.createElement('option');
//把信息加入到标签中
opt.innerText = i;
//把创建好的标签加入第一个select标签中
s1ele.appendChild(opt)
}
//拿到所有的市, 在h1中生成对应的option选项
//当第一个select框的值发生变化是的时候触发的动作
s1ele.onchange = function () {
// 0 清空第二个select框里的内容
s2ele.innerText = '';
// 1. 先获取用户选中的省
var p = this.value;
var cityarray = data[p];
for (var j in cityarray){
//生成空的option
var opt1 = document.createElement('option');
//往optin里添加内容
opt1.innerText = cityarray[j];
//把生活才能的option追加到select标签中
h1ele.appendChild(opt1);
}
}
</script>
</body>
</html>
浙公网安备 33010602011771号