JavaScript的外部对象

来源：互联网发布：天天直播网络东方卫视编辑：程序博客网时间：2024/06/05 14:08

一.外部对象分为BOM和DOM
1.BOM（浏览器对象模型）window对象里模型，其中document跟DOM连接
2.DOM（文档对象模型）document对象，html根元素，元素，文本，属性

二.window对象——BOM
1.常用属性：
（1）document（窗口中显示的HTML文档对象）

（2）history（浏览过窗口的历史记录对象）
属性：length（URL数量）
方法：back(),forward(),go(num)

（3）location（窗口文件地址对象）
属性：href（当前窗口正在浏览的网页地址）
方法：reload()（重新载入当前网址，同按下刷新按钮）

（4）screen（当前屏幕对象）
常用属性：width/height（总宽高）,availWidth/availHeight（可用的宽高）
（5）navigator（浏览器相关信息）——navigator.userAgent

2.常用方法：
（1）alert(str);——提示对话框，显示str字符串内容
（2）confirm(str);——确定对话框，显示str字符串内容（按“确定”按钮返回true，否则false）
（3）setTimeout(exp，time);——一次性触发代码exp（返回已经启动的定时器）
（4）clearTimeout(id);——停止启动的定时器对象
（5）setInterval(exp，time);——周期性定时器，周期性触发代码exp
（6）clearInterval(id);——停止启动的定时器对象

三.document对象——DOM
1.节点信息：文档节点、元素节点、注释节点、文本节点、属性节点
nodeName（节点名称）：文本节点#text，文档节点#document
nodeType（节点类型）：元素节点返回1，属性节点返回2，文本节点返回3，
注释节点返回8，文档节点返回9
2.节点内容：innerText（标签里文本）,innerHTML（标签里的标签和文本）
3.节点属性：getAttribute()方法——获取属性值，setAttribute()，removeAttribute()
4.元素节点的样式：className属性：node.className = "hide",node.className = ""
style属性：node.style.color,node.style.fontSize

5.查询节点：
根据id查询：document.getElementById();
根据name查询：document.getElementByName();
根据标签名查询：document.getElementByTagName();
根据层次查询节点：parentNode,childNodes

6.增加节点：
var newNode = document.createElement(elementName);
newNode.innerHTML = ;
var parentNode = document.getElementById("city");
parentNode.appendChild(newNode);

7.插入节点：
var newNode = document.createElement(elementName);
newNode.innerHTML = content;
var parentNode = document.getElementById(elementName);
var refNode = document.getElementById(elementName);
parentNode.insertBefore(newNode,refNode);——>插入refNode节点之前

8.删除节点：
var parentNode = document.getElementById(elementName);
var childNode = document.getElementById(elementName);
parentNode.removeChild(childNode);

BOM常用属性demo1：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>BOM</title><script>function f1(){var b=confirm("您确定要离开本网站吗？");if(b){location.href="http://www.baidu.com";}}function f2(){location.reload();}function f3(){history.forward();}//页面加载之初，获取屏幕的尺寸console.log(screen.width);console.log(screen.height);console.log(screen.availWidth);console.log(screen.availHeight);//页面加载时，获取浏览器的版本信息console.log(navigator.userAgent);</script></head><body><input type="button" value="百度" onclick="f1();"><input type="button" value="刷新" onclick="f2();"><input type="button" value="前进" onclick="f3();"></body></html>

定时器demo2：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>定时器</title><script>//周期性定时器function f1(){var n =5;//启动周期性定时器：//每隔1000毫秒，让浏览器调用一次函数。//返回值是定时器的id，用于停止定时器。var id = setInterval(function(){console.log(n--);if(n<0){//停止定时器clearInterval(id);console.log("炸！");}} ,1000);//启动的定时器类似于一个子线程，//当前的方法f1类似于主线程（main），//二者并发执行，即主线程启动完子线程后，//立刻输出BOOM，而子线程却在1秒后执行第一次。console.log("BOOM!");}//一次性定时器var id;function f2(){//启动一次性定时器：//在5000毫秒后，让浏览器调用函数。//调用完成后，定时器会自动结束。//也可以在未调用前，手动结束。id = setTimeout(function(){console.log("预备！");},5000);}function f3(){clearTimeout(id);}</script></head><body><input type="button" value="倒数" onclick="f1();"><input type="button" value="预备" onclick="f2();"><input type="button" value="取消" onclick="f3();"></body></html>

时钟demo3：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>动态时钟</title><style>#screen{border: 1px solid red;width: 200px;text-align: center;height: 30px;line-height: 30px;font-size: 20px;}</style><script>var id;function start(){//若id非空，表示定时器已启动，不要再次启动if(id){return;}id = setInterval(function(){var date = new Date();var time = date.toLocaleTimeString();var p = document.getElementById("screen");p.innerHTML=time;} ,1000);}function stop(){clearInterval(id);//清空id，以便于下次启动id=null;}</script></head><body><input type="button" value="开始" onclick="start();"><input type="button" value="停止" onclick="stop();"><p id="screen"></p></body></html>

发送邮件demo4:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>发邮件</title><style>#screen{width: 200px;text-align: center;height: 30px;line-height: 30px;font-size: 20px;background-color: orange;}</style><script>var id;function send(){//定时器已启动，不要再次启动if(id){return;}var p = document.getElementById("screen");p.innerHTML="正在发送";id = setTimeout(function(){p.innerHTML="已发送";//停止定时器时，清空idid=null;} ,3000);}function cancel(){if(id){clearTimeout(id);var p = document.getElementById("screen");p.innerHTML="已撤回";//停止定时器时，清空idid=null;}}</script></head><body><input type="button" value="发邮件" onclick="send();"><input type="button" value="撤回" onclick="cancel();"><p id="screen"></p></body></html>

DOM操作demo5：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>读写节点</title><script>//onload是页面加载事件，在页面加载完成后自动触发。window.onload = function(){//1.读取节点的类型和名称var p1 = document.getElementById("p1");console.log(p1.nodeType);console.log(document.nodeType);console.log(p1.nodeName);console.log(document.nodeName);//2.读写节点的内容//双标签中间的文本叫内容//innerHTMLvar p2 = document.getElementById("p2");console.log(p2.innerHTML);p2.innerHTML = "DOM操作包括<u>查询</u>节点";//innerTextvar p3 = document.getElementById("p3");console.log(p2.innerText);p3.innerText = "DOM操作包括<u>增删</u>节点";//3.读写节点的值//表单控件中的数据叫值。var b1 = document.getElementById("b1");console.log(b1.value);b1.value = "BBB";//4.读写节点的属性//通过get,set方法进行读写var i1 = document.getElementById("i1");console.log(i1.getAttribute("src"));i1.setAttribute("src","../images/02.jpg");//通过属性名进行读写//id,className,stylevar a1 = document.getElementById("a1");console.log(a1.style.color);a1.style.color = "blue";}</script></head><body><p id="p1">DOM操作包括<b>读写</b>节点</p><p id="p2">DOM操作包括<b>查询</b>节点</p><p id="p3">DOM操作包括<b>增删</b>节点</p><p><input type="button" value="AAA" id="b1"></p><p><img src="../images/01.jpg" id="i1"></p><p><a href="#" style="color:red;" id="a1">登录</a></p></body></html>

查询节点demo6：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>查询节点</title><script>window.onload=function(){//根据name查询节点var radios = document.getElementsByName("sex");console.log(radios);//根据标签名查询节点var lis = document.getElementsByTagName("li");console.log(lis);//根据层次查询节点//查询节点的父亲var gz = document.getElementById("gz");var ul = gz.parentNode;console.log(ul);//查询节点的孩子console.log(ul.childNodes);lis = ul.getElementsByTagName("li");console.log(lis);//查询节点的兄弟//节点.父亲.孩子们[i]var sh = gz.parentNode.getElementsByTagName("li")[1];console.log(sh);}</script></head><body><p><input type="radio" name="sex">男<input type="radio" name="sex">女</p><ul id="city"><li>北京</li><li>上海</li><li id="gz">广州</li><li>深圳</li><li>杭州</li></ul><ol><li>河北省</li><li>山东省</li><li>江苏省</li></ol></body></html>

图片轮播demo7：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>图片轮播</title><style>div {width: 218px;height: 218px;border: 1px solid red;margin: 30px auto;}.hide {display: none;}</style><script>window.onload=function(){start();}var id;function start(){//轮播次数var n = 0;id = setInterval(function(){n++;var imgs = document.getElementsByTagName("img");//将所有图片先隐藏for(var i=0;i<imgs.length;i++){imgs[i].className = "hide";}//将下一个图片显示var next = n % imgs.length;imgs[next].className = "";},2000);}function stop(){clearInterval(id);}</script></head><body><!-- hover:伪类选择器  onmouseover:鼠标悬停事件  onmouseout:鼠标离开事件 --><div onmouseover="stop();" onmouseout="start();"><img src="../images/f1.jpg"><img src="../images/f2.jpg" class="hide"><img src="../images/f3.jpg" class="hide"></div></body></html>

增删节点demo8：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>增删节点</title><script>function f1(){//创建新节点var li = document.createElement("li");li.innerHTML = "雄安";//追加此节点var ul = document.getElementById("city");ul.appendChild(li);}function f2(){//创建新节点var li = document.createElement("li");li.innerHTML = "香港";//插入此节点var ul = document.getElementById("city");var gz = document.getElementById("gz");ul.insertBefore(li,gz)}function f3(){var ul = document.getElementById("city");var gz = document.getElementById("gz");ul.removeChild(gz);}</script></head><body><p><input type="button" value="增加" onclick="f1();"><input type="button" value="插入" onclick="f2();"><input type="button" value="删除" onclick="f3();"></p><ul id="city"><li>北京</li><li>上海</li><li id="gz">广州</li><li>深圳</li><li>杭州</li></ul></body></html>

阅读全文

0 0