dom刷新局部元素_JavaScript中DOM和BOM基础

BOM部分基础内容

BOM(Broswer Object Model)浏览器对象模型 ,主要用来获取或设置浏览器的属性、行为 ; 使JavaScript可以和浏览器进行交互 ; window 是 BOM 对象，而非 js 对象 ;

注：凡是window的属性和方法，均可以省略“window.”

【1】常见框窗操作

1.警告框

window.alert("msg");

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script type="application/javascript">////警告框function testAlert(){var result = alert("这是一个警告框！");console.log(result);}</script>
</head>
<body>
<button onclick="testAlert();">testAlert</button></body>
</html>

2.确认框

window.confirm("msg");

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script type="application/javascript">//确认框function testConfirm(){var result = confirm("你确认要离开了吗？");if(result){alert("欢迎下次再来！")}else{alert("那你在逛逛吧！")}console.log(result);}</script>
</head>
<body>
<button onclick="testConfirm();">testConfirm</button>
</body>
</html>

3.询问框

window.prompt("msg","defaulvalue")

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script type="application/javascript">//询问框function testPrompt(){var result = window.prompt("请输入U盾密码","例如：123456");console.log(result);}</script>
</head>
<body>
<button onclick="testPrompt();">testPrompt</button>
</body>
</html>

【2】常见页面操作

1.打开一个窗口

window.open()

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script type="application/javascript">var a  = 10;window.onload = function(){console.log(window);console.log("11111111111")}function testOpen(){var sonwindow = window.open("son.html","aaa","height=300,width=500,top=50,left=50,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no")//子窗口的window对象console.log(sonwindow);}function fatherSayHello(){alert("hello son!");}</script>
</head>
<body>
<button onclick="testOpen();">打开一个新窗口</button></body>
</html>

2.在子窗口中使用，表示父窗口的window对象

window.opener

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script type="application/javascript">function sayHello(){alert("hello world!");}//在子窗口中opener表示父窗口的window对象，可以利用该对象调用父窗口中的方法和属性function callFatherMethod(){window.opener.fatherSayHello();window.opener.a}function testClose(){window.close();}function testFatherClose(){window.opener.close();}</script>
</head>
<body>
<button onclick="callFatherMethod()">调用父窗口的方法</button>
<button onclick="testClose()">关闭本窗口</button>
<button onclick="testFatherClose()">关闭父窗口</button>
</body>
</html>

3.关闭当前窗口

window.close()

【3】常见定时任务的操作

1.定时任务

var taskid = window.setTimeout(function,ms);

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script type="application/javascript">function setTime() {//            window.setTimeout("alert('hello！')",5000);window.setTimeout(sayHello, 5000);}var sayHello = function () {alert("你好！");}</script>
</head>
<body>
<button onclick="sayHello();">调用sayHello</button>
<button onclick="setTime();">调用setTime</button>
</body>
</html>

2.间隔执行任务

var taskid = window.setInteval(function,ms);

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script type="application/javascript">var sayHello = function () {alert("你好！");}window.onload = function(){window.setInterval(sayHello, 2000);}</script>
</head>
<body></body>
</html>

3.清除定时任务

window.clearTimeout(taskid);

4.清除间隔执行任务

window.clearInteval(taskid);

【4】window的相关属性

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script type="application/javascript">function testScreen() {console.log(screen.width + "*" + screen.height)}function testBack(){window.history.back();}function testForward(){window.history.forward();}function testGo(){window.history.go(0)}function testLocation(){//            window.location.reload(); //刷新window.location.href = window.location.href; //刷新}function goBaidu(){window.location.href = "http://www.baidu.com";}function testNavigator(){console.log(window.navigator.userAgent)}</script>
</head>
<body><button onclick="testScreen();">screen属性</button><button onclick="testBack()">history-后退</button><button onclick="testForward()">history-前进</button><button onclick="testGo()">history-Go</button><button onclick="goBaidu()">百度</button><button onclick="testLocation()">刷新</button><button onclick="testNavigator()">用户代理</button>
</body>
</html>

DOM部分基础内容

DOM(Document Object Model)文档对象模型 , 主要用来获取或设置文档中标签的属性 ;

结点的概念：整个文档就是由层次不同的多个节点组成，可以说结点代表了全部内容。结点类型
1.元素结点
2.属性结点
3.文本结点 结点的注意点：
1.文本节点和属性结点都看作元素结点的子结点
2.我们一般所说的结点指的就是元素结点，将html标签看作是一个对象，并用“结点”称呼它
3.结点的关系有：父子关系、兄弟关系

【1】获取元素结点的方式

1)直接获取

① document.getElementById()

② document.getElementsByName()

③ document.getElementsByTagName()

2)间接获取

父子关系

firstChild lastChild childNodes

子父关系

parentNode

兄弟关系

nextSibling previousSibling

示例：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script type="application/javascript">function getEle() {var obj = document.getElementById("userid");}function getEle2() {// 获取的是一个数组var obj = document.getElementsByName("fav");console.log(obj)}function getEle3(){var obj = document.getElementsByTagName("input");console.log(obj);}function getEle4(){var father = document.getElementById("regForm");var sons = father.childNodes;console.log(sons[1]);console.log(father.firstChild);console.log(father.lastChild);}function getEle5(){var son = document.getElementById("userid");console.log(son.parentNode)}function getEle6(){var bro = document.getElementById("userid");console.log(bro.nextSibling.nextSibling.nextSibling);bro.previousSibling}</script>
</head>
<body><button onclick="getEle();">点我测试！</button>
<button onclick="getEle2();">点我测试2！</button>
<button onclick="getEle3();">点我测试3！</button>
<button onclick="getEle4();">点我测试4！</button>
<button onclick="getEle5();">点我测试5！</button>
<button onclick="getEle6();">点我测试6！</button><form id="regForm">用户名：<input id="userid" type="text" name="username"><br/>密码：<input type="password" name="password"><br/>昵称：<input id="nickid" type="text" name="nickname" value="大名鼎鼎" abcd="1234" ><br/>性别：男<input type="radio" name="gender" value="nan">&nbsp;&nbsp;女<input type="radio" name="gender" value="nv"><br/>爱好：狗<input type="checkbox" name="fav" value="dog">猫<input type="checkbox" name="fav" value="cat">羊驼<input type="checkbox" name="fav" value="yt"><br/><input type="submit" value="注册">
</form>
</body>
</html>

【2】操作属性结点

1)通过对象“.”属性，来操作属性

优：可以动态获取用户修改的属性值

缺：不能获取自定义属性的值

2)getAttribute("key") setAttribute("key","value") removeAttribute("key")

优：可以获取自定义属性的值

缺：不能动态获取用户修改的属性值

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script type="application/javascript">function getField1(){var obj = document.getElementById("nickid");/*console.log(obj.type);obj.type = "password";*/var objval = obj.getAttribute("name");console.log(objval);
//            obj.setAttribute("abcd","5678");obj.removeAttribute("type");console.log(obj.value)console.log(obj.getAttribute("value"));}</script>
</head>
<body>
<button onclick="getField1();">属性测试1</button>
<form id="regForm">用户名：<input id="userid" type="text" name="username"><br/>密码：<input type="password" name="password"><br/>昵称：<input id="nickid" type="text" name="nickname" value="大名鼎鼎" abcd="1234" ><br/>性别：男<input type="radio" name="gender" value="nan">&nbsp;&nbsp;女<input type="radio" name="gender" value="nv"><br/>爱好：狗<input type="checkbox" name="fav" value="dog">猫<input type="checkbox" name="fav" value="cat">羊驼<input type="checkbox" name="fav" value="yt"><br/><input type="submit" value="注册">
</form>
</body>
</html>

【3】处理文本结点

1) 通过对象.innerText 获取标签内部的文本信息

2) 通过对象.innerHTML 获取标签内部的HTML代码

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script type="application/javascript">function getText1(){var myDiv = document.getElementById("myDiv");console.log(myDiv.innerText);}function getText2(){var myDiv = document.getElementById("myDiv");console.log(myDiv.innerHTML);}function getText3(){var myDiv = document.getElementById("myDiv");myDiv.innerText = "<img src='1.jpg' />";}function getText4(){var myDiv = document.getElementById("myDiv");myDiv.innerHTML = "<img src='1.jpg' />";}</script>
</head>
<body>
<button onclick="getText1();">文本测试1</button>
<button onclick="getText2();">文本测试2</button>
<button onclick="getText3();">文本测试3</button>
<button onclick="getText4();">文本测试4</button>
<hr/>
<form id="regForm">用户名：<input id="userid" type="text" name="username"><br/>密码：<input type="password" name="password"><br/>昵称：<input id="nickid" type="text" name="nickname" value="大名鼎鼎" abcd="1234" ><br/>性别：男<input type="radio" name="gender" value="nan">&nbsp;&nbsp;女<input type="radio" name="gender" value="nv"><br/>爱好：狗<input type="checkbox" name="fav" value="dog">猫<input type="checkbox" name="fav" value="cat">羊驼<input type="checkbox" name="fav" value="yt"><br/><input type="submit" value="注册">
</form>
</body>
</html>

【4】动态改变DOM结构

1)创建一个结点对象

document.createElement("标签名")

2)（父结点）追加子结点对象

fatherNode.appendChild(子结点对象)

3)（父结点）在指定结点前添加子结点

fatherNode.insertBefore(新结点对象，参考结点对象)

4)（父结点）替换旧的子结点对象

fatherNode.replaceChild(新结点对象，旧结点对象)

5)（父结点）删除旧子结点对象

fahterNode.removeChild(旧结点对象)

示例：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script type="application/javascript">function changeDom1() {var ipt = document.createElement("input");ipt.type = "text";}function changeDom2() {var father = document.getElementById("regForm");var ipt = document.createElement("input");ipt.type = "text";father.appendChild(ipt);}function changeDom3() {var father = document.getElementById("regForm");var refChild = document.getElementById("brid");var newChild = document.createElement("input");newChild.type = "text";father.insertBefore(newChild, refChild);}function changeDom4() {var father = document.getElementById("regForm");var refChild = document.getElementById("brid");var newChild = document.createElement("input");newChild.type = "text";father.replaceChild(newChild, refChild);}function changeDom5() {var father = document.getElementById("regForm");var refChild = document.getElementById("nickid");father.removeChild(refChild);}</script>
</head>
<body>
<button onclick="changeDom1();">创建结点对象</button>
<button onclick="changeDom2();">追加子结点对象</button>
<button onclick="changeDom3();">插入子结点对象</button>
<button onclick="changeDom4();">替换子结点对象</button>
<button onclick="changeDom5();">删除子结点对象</button>
<hr/>
<form id="regForm">用户名：<input id="userid" type="text" name="username"><br/>密码：<input type="password" name="password"><br/>昵称：<input id="nickid" type="text" name="nickname" value="大名鼎鼎" abcd="1234"><br id="brid"/>性别：男<input type="radio" name="gender" value="nan">&nbsp;&nbsp;女<input type="radio" name="gender" value="nv"><br/>爱好：狗<input type="checkbox" name="fav" value="dog">猫<input type="checkbox" name="fav" value="cat">羊驼<input type="checkbox" name="fav" value="yt"><br/><input type="submit" value="注册">
</form>
</body>
</html>