js-day02-BOM和DOM

BOM和Document对象常见属性和方法:

BOM是browser object model的缩写，简称浏览器对象模型.

Document 对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

Document对象常见属性和方法:
wondow.onload事件:当页面加载完成做一些事情

window.onload = function(){
     //处理文档加载完之后的操作.
};

-----------------------------------------------
links　　 　　 链接对象
anchors 　　  锚对象
forms 　　 　 表单对象
images 　  　 图片对象
------------------------------------------------
document对象：能反映当前页面的各种属性。
document对象的常用属性
　　title:显示文章的标题。
　　body：获取body元素节点。
　　bgColor:显示页面的背景色。
　　fgColor:显示页面的前景色。
document对象的常用方法：
　　write():在页面中输出文本。
　　writeln():在页面中输出文本，并自动换行(多一个换行符,看不出来)。
------------------------------------------------
访问表单的方式
　　document.forms[索引]:获取当前页面中的第几个表单(索引从0开始).
　　document.表单名称:
　　document.getElementById("表单的id值");

    //需求:获取文档中所有的链接
    var links = window.document.links;
    p(links);
    p(links.length);//4,获取文档中超链接的数量
    p(links[1]);//获取文档中的第2条超链接
    p(links[1].innerHTML);//获取第2条超链接的文本内容
    
    //需求:获取页面中第一个表单对象
    p(document.forms[0]);//第一种方式,document.forms[index]
    p(document.loginForm);//第二种方式,document.表单对象的名称
    p(document.getElementById("loginFormId"));//方式三:document.getElementById("id名")
    
    p(document.forms[0].action);//获取form表单对象的action属性
    
    //操作文档对象
    p(document.title);
    document.title = "天照";//修改title属性
    p(document.title);
    document.bgColor = "yellow";//修改背景颜色
    
    document.write("天照");//在文档中写出数据

消息框/输入框/确认框

alert(‘信息’)：显示带有一段消息和一个确认按钮的警告框
//alert("你好1");
prompt(‘提示信息’,默认值)： 标准输入框
//var inputText = prompt("请输入你的名字","孙悟空");
confirm( ) ： 确认框
//var ret = confirm("亲,你确定删除吗?");

    alert(msg)方法用于显示一条带有指定消息和一个OK按钮的警告框<br/>
    <a href="javascript:window.alert('我的剑,就是你的剑');">弹出消息框</a><br/>
    prompt(text,defaulttext)方法用于显示可提示用户进行输入的对话框,返回用户输入的文本内容<br/>
    <a href="javascript:promptDialog();">弹出输入框</a><br/>
    confirm(msg)方法用于显示一个带有指定消息和OK及取消按钮的对话框<br/>
    <a href="javascript:confirm('你确定卸载英雄联盟吗?')">弹出确认框</a><br/>
    <a href="delete.html" onclick="return window.confirm('你确定卸载英雄联盟吗?')">卸载英雄联盟</a>

打开新窗口/关闭窗口

window.open()方法：打开一个新窗口
调用示例：
window.open("http://www.520it.com/", "_blank","")
第一个参数：要打开的网页url，可以是相对路径;
第二个参数：打开窗口的目标；除了自定义名称以外，还包括_self, _parent, _top及_blank几个特殊值;
第三个参数：是一个使用,组成的字符串，用于描述打开窗口的特性，比如大小、是否有工具栏等。
function openWin() {
　　open("newWin.html");
}
　　close( )：关闭窗口
function closeWin() {
　　close();
}
在Firefox中:close方法只能关闭使用js的open方法打开的窗口.

    <a href="javascript:window.open('newWindow.html');">打开新窗口</a><br/>
    <a href="javascript:window.close();">关闭窗口</a>

窗口大小位置设置

IE中有效
// moveBy(dx, dy)-移动偏移量
// moveTo(x, y)-移动到指定座标
// resizeBy(dw, dh)-窗口大小改变
// resizeTo(w, h)-窗口大小改变

    窗口位置大小设置(IE有效)<br/>
    <a href="javascript:moveBy(50,50)">moveBy(每次移动50px)</a><br/>
    <a href="javascript:moveTo(100.100)">moveTo(把窗口移动到指定位置)</a><br/>
    <a href="javascript:resizeBy(30,20)">resizeBy(按照指定像素,改变窗口大小)</a><br/>
    <a href="javascript:resizeTo(400,300)">resizeTo(把窗口修改为指定大小)</a><br/>

浏览器位置(IE兼容性)

获得窗口在屏幕上的位置(根据浏览器类型不同,方法分类)
IE:
screenLeft -获得窗口所在X坐标值
screenTop -获得窗口Y坐标值
W3C:
screenX -获得窗口所在X坐标值
screenY -获得窗口Y坐标值
---------------------------------------------------------
function getWindowSize() {
　　var x = window.screenX || window.screenLeft || 0;
　　var y = window.screenY || window.screenTop || 0;
　　alert("X坐标=" + x + ", Y坐标=" + y);
}
判断是否是IE浏览器

//获取浏览器坐标位置
function getWindowLocation(){
    //解决浏览器兼容问题
    var x = window.screenLeft || window.screenX || 0;
    var y = window.screenTop || window.screenY || 0;
    p("x:" + x +", y:" + y);
}

访问历史

查看浏览器历史:
history.go(index)函数，在浏览器历史记录中跳转，正数为前跳，负数为后跳
history.back()函数，后跳;
history.forward()函数，前跳;
history.length属性，获得历史记录的长度；

    <a href="javascript:window.history.back();">上一个</a><br/>
    <a href="javascript:window.histroy.forward();">下一个</a><br/>
    <a href="javascript:window.history.go(-1);">跳转到指定的一个记录</a><br/>

浏览器相关信息

navigator对象用于获得浏览器相关信息;使用console.dir(navigator)查看成员信息。
属性名称 　　 　　    说明
appCodeName 　　  产品名称
appName 　　　　   应用名称
appVersion 　　　　 版本号
cookieEnabled　　   是否允许使用cookie
language 　　　　    语言
oscpu 　　　　　　  操作系统名称
platform 　　　　 　 操作系统平台
product 　　　　　   产品代号或名称，比如Gecko
productSub 　　　    产品发布日期20100701
userAgent 　　　　  客户端详细信息,比如：Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.11) Gecko/20100701 Firefox/3.5.1
--------------------------------------------------------------------------------
判断操作系统:
var isWin = (navigator.platform == “Win32”) || (navigator.platform == “Windows”);
var isMac = (navigator.platform == “Mac68K”) || (navigator.platform == “MacPPC”) || (navigator.platform == “Macintosh”);
var isUnix = (navigator.platform == “X11”) && !isWin && !isMac;

//获取navigator对象中所有的信息
for(var name in window.navigator){
    p("属性名:"+name+", 属性值:"+window.navigator[name]);
}

访问页面的url

window对象的location属性,保护了该窗口所装载文档的地址:location包含的常用属性:
1.hostname:文档所在地址的主机名
2.href:文档所在地址的URL地址
3.host:wend所在地址的主机地址
4.port:文档所在地址的服务端端口
5.pathname:文档所在地址的文件地址
6.protocol:装载该文档使用的协议

var loc = window.location;
for(var name in loc){
console.debug(name,loc[name]);
}

表示直接:修改浏览器的地址栏为:http://jd.com
<a href="javascript:window.location.href='http://jd.com'">点击之后,跳转到[京东商城]</a>

 

定时器

定时器还可以在网页上设置电子时钟；

setTimeout(fn,time)函数，返回timer，用于指定一段时间后执行某函数
setInterval(fn,time)函数，返回timer，用于周期性执行某函数;
　　参数fn可以是字符串组成的jascript代码，也可以是一个函数名称；
　　参数time表示时间，毫秒为单位；

clearTimeout(timer)函数，清除由setTimeout创建的定时器；
clearInterval(timer)函数，清除由setInterval指定的定时器；

//事件:当页面文档加载完毕,才执行响应函数
//需求:5秒之后再跳转到List.html页面
window.onload = function(){
    /*
    //设置定时器,并且接受返回的参数(该参数主要用于取消定时器)
    var timeOutId = setTimeout(function(){
        window.location = "list.html";
    }, 5000);
    //取消定时器
    clearTimeout(timeOutId);
    */
    //=========================
    //设置周期性的定时器
    setInterval(function(){
        //获取span元素之间的文本内容(时间)
        var spanEl = document.getElementById("time");
        //p(spanEl);
        //获取当前时间再减去1,然后再赋值给span元素的文本内容
        spanEl.innerHTML = spanEl.innerHTML - 1;
        //判断span元素的文本内容等于0的时候,跳转到list.html
        if(spanEl.innerHTML == 0){
            window.location = "list.html";
        }
    }, 1000);
}

 DOM和DOM和获取元素的三种方式

DOM ：DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范,DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件.
　　D：文档 – html 文档 或 xml 文档
　　O：对象 – document 对象的属性和方法
　　M：模型
DOM 是针对xml(html)的基于树的API。
DOM树:节点（node）的层次。
DOM 把一个文档表示为一棵家谱树（父，子，兄弟）
DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面

 DOM和获取元素的三种方式:

//DOM获取元素的三种方式
window.onload = function(){
    //方式一:getElementById(id),返回对拥有指定id的第一个对象的引用(常用)
    var divEl = document.getElementById("div1");
    p(divEl);//打印元素对象
    p(divEl.innerHTML);//打印元素的文本内容
    //方式二:getElementsByName(name),返回带指定名称的对象集合
    var inputEls = document.getElementsByName("hobby");
    p(inputEls);
    //方式三:getElementsByTagName(tagname),返回带指定标签名的对象集合
    var divEls = document.getElementsByTagName("div");
    p(divEls);
}

Node对象的属性和方法

 

Node对象常用属性和方法:
firstChild
lastChild
childNodes
previousSibling
nextSibling
asChildNodes()

Node对象常用属性和方法<br/>
    <div id="person" style="background-color: gray"><span style="background: red;">十六</span><span style="background: yellow;">松鼠航</span><span style="background: orange;">果果</span><span style="background: blue;">豆豆</span></div>

window.onload = function(){
    /*
      Node对象常用属性和方法
      firstChild
      lastChild
      childNodes
      previousSibling
      nextSibling
      hasChildNodes()
    */
    //需求一:div元素有子元素吗?
    var hasChild = document.getElementById("person").hasChildNodes();
    p(hasChild);//true
    //需求二:获取div元素的所有子元素
    var childs = document.getElementById("person").childNodes;
    p(childs);//打印div的子元素对象
    p(childs.length);//打印div的子元素数量
    //需求三:获取div元素的第一个子元素和最后一个子元素的文本内容
    //方式一
    p("第一个子元素:"+childs[0].innerHTML+", 最后一个子元素:"+childs[childs.length-1].innerHTML);
    //方式二
    var first = document.getElementById("person").firstChild;
    var last = document.getElementById("person").lastChild;
    p("第一个子元素:"+first.innerHTML+", 最后一个子元素:"+last.innerHTML);
    //需求四:获取书航所在span元素的上一个兄弟节点和下一个兄弟节点的文本内容
    var prev = document.getElementById("person").childNodes[1].previousSibling;
    var next = document.getElementById("person").childNodes[1].nextSibling;
    p("上一个兄弟节点:"+prev.innerHTML+",下一个兄弟节点:"+next.innerHTML);
}

元素节点/文本节点/属性节点的nodeName/nodeValue/nodeType区别:

　　　　noteType 　　nodeName 　　nodeValue
元素节点 1 　　　　 当前元素标签名　　 null
属性节点 2 　　　　 当前属性名称 　　 当前属性的值
文本节点 3 　　　　 #text　　　　　　 当前文本内容

Node对象常用属性和方法<br/>
    <div id="person" style="background-color: gray"><span style="background: red;">十六</span><span style="background: yellow;">松鼠航</span><span style="background: orange;">果果</span><span style="background: blue;">豆豆</span></div>

window.onload = function(){    
    //元素节点/属性节点/文本节点的nodeName/nodeValue/nodeType的区别
    p("--------------元素节点-------------");
    var eleNode = document.getElementById("person");
    p("nodeType:"+eleNode.nodeType);//1
    p("nodeName:"+eleNode.nodeName);//DIV
    p("nodeValue:"+eleNode.nodeValue);//null
    p("--------------属性节点-------------");
    var attrNode = eleNode.getAttributeNode("id");
    p("nodeType:"+attrNode.nodeType);//2
    p("nodeName:"+attrNode.nodeName);//id
    p("nodeValue:"+attrNode.nodeValue);//person
    p("--------------文本节点-------------");
    var textNode = eleNode.firstChild.firstChild;
    p("nodeType:"+textNode.nodeType);//3
    p("nodeName:"+textNode.nodeName);//#text
    p("nodeValue:"+textNode.nodeValue);//十六
}

属性操作:
　　1):给某个元素上的某个属性设置值.
　　2):获取某个元素上的某个属性的值.
-------------------------------------------
1.元素上的原始属性和自定义属性的获取值和设置值
　　操作元素的原始属性:
　　　　获取属性值:
　　　　　　元素对象.属性名;
　　　　　　元素对象["属性名"];
　　　　设置属性值:
　　　　　　元素对象.属性名=值;
　　　　　　元素对象["属性名"]=值;
　　操作元素自定义属性:
　　　　获取属性值:
　　　　　　元素对象.getAttribute("属性名");
　　　　设置属性值:
　　　　　　元素对象.setAttribute("属性名",值);

    //需求1:获取<input id="username" name="username" type="text" value="默认值" java="no better"> 的属性
    var inputEl = document.getElementById("username");
    //获取属性
    //方式1:对象.属性名
    p(inputEl.name);
    //方式2:对象[属性名]
    p(inputEl["value"]);
    //方式3:对象.getAttribute(属性名),获取自定义属性
    p(inputEl.getAttribute("java"));
    //设置属性
    inputEl.value = "第一次更改";
    inputEl["value"] = "第二次更改";
    inputEl.setAttribute("value","第三次更改");//已经修改,但是没有显示
    p(inputEl);

2.操作属性名和默认属性值相同的属性. 如:checked,selected
　　在DOM中的:属性值为true(选中)和false(不被选中).

    //需求2:操作属性名和默认属性值相同的属性,如:checked、selected
    //<input id="hobby" type="checkbox" value="java" checked/>
    var hobby = document.getElementById("hobby");
    p(hobby.checked);//true
    hobby.checked = false;//不被选中

3.操作class属性.-->属性名为:className
　　在html中属性为class,在DOM中对应className.

    //需求3:操作class属性,---->属性名为:className
    //<div id="div1" class="myclass">div1的内容,需求三</div><br/>
    var divEl = document.getElementById("div1");
    p(divEl.className);

4.操作style的属性.如:background-color
　　在html中的属性:background-color,在DOM中对应:backgroundColor.

    //需求4:操作style属性,如:font-size、background-color
    //<div id="div2" style="background-color: yellow; font-size: 30px;color:red;">需求四</div>
    var divEl = document.getElementById("div2");
    p(divEl.style);
    p(divEl.style.color);//red
    p(divEl.style.fontSize);//30px
    p(divEl.style.backgroundColor);//yellow

5.操作readonly属性:readonly--->readOnly
　　在html中的顺序:readonly,在DOM中:readOnly;

    //需求5:操作readonly属性:readonly--->readOnly
    //<input id="email" type="text" readonly value="需求⑤"/><br/>
    var email = document.getElementById("email");
    p(email.readOnly);//true
    email.readOnly = false;//设置为可以读写

插入/追加/删除/替换节点

1.给父节点追加现有/新子节点

    <span id="sp" style="background-color: gray;">span元素</span>
    <div id="div1" style="background-color: orange;">div1</div>
    <div id="div2" style="background-color: yellow;">div2</div>
    
    <button onclick="appendDIV1();">把span元素追加到div1中</button>
    <button onclick="appendDIV2();">把span元素追加到div2中</button>
    <button onclick="insertDIV1();">新创建span元素插入到div1中</button>
    <button onclick="insertDIV2();">新创建span元素插入到div2中</button>

//需求:把span追加到DIV1中
function appendDIV1(){
    //1.获取已经存在的span元素
    var span = document.getElementById("sp");
    //2.获取id为div1的DIV元素
    var div1 = document.getElementById("div1");
    //3.把span元素作为DIV元素的子节点
    div1.appendChild(span);
}

//需求:把span追加到DIV2中
function appendDIV2(){
    //1.获取已经存在的span元素
    var span = document.getElementById("sp");
    //2.获取id为div2的DIV元素
    var div2 = document.getElementById("div2");
    //3.把span元素作为DIV元素的子节点
    div2.appendChild(span);
}

//需求:创建新的span元素插入到div1中
function insertDIV1(){
    //1.创建新的span元素
    var span = document.createElement("span");
    span.innerHTML ="我是新的span元素";
    span.style.backgroundColor = "yellow";
    //2.获取id为div1的DIV元素
    var div1 = document.getElementById("div1");
    //3.把span元素作为DIV元素的子节点
    div1.appendChild(span);
}

//需求:创建新的span元素插入到div2中
function insertDIV2(){
    //1.创建新的span元素
    var span = document.createElement("span");
    span.innerHTML ="我是新的span元素";
    span.style.backgroundColor = "yellow";
    //2.获取id为div2的DIV元素
    var div2 = document.getElementById("div2");
    //3.把span元素作为DIV元素的子节点
    div2.appendChild(span);
}

 2.在指定节点之前/之后插入新节点
3.删除节点/替换节点

    <button onclick="insertAfter();">在十六后面添加果果</button>
    <button onclick="insertBefore1();">在豆豆前面添加果果</button>
    <button onclick="deleteItem5();">删除三浪</button>
    <button onclick="replaceItem1();">把书航替换为松鼠航</button>
    <br/>
    <select id="groupPerson" multiple size="5">
        <option id="item1">书航</option>
        <option id="item2">十六</option>
        <option id="item4">豆豆</option>
        <option id="item5">三浪</option>
    </select>

//需求:在十六后面插入果果
function insertAfter(){
    //1:创建果果节点
    var item3 = document.createElement("option");
    item3.innerHTML = "果果";
    item3.id = "item3";
    //2:获取十六节点
    var item2 = document.getElementById("item2");
    //3:在十六节点后面插入果果节点,需要判断十六是否为最后一个节点
    if(!item2.nextSibling){
        item2.parentNode.appendChild(item3);
    }else{
        item2.parentNode.insertBefore(item3, item2.nextSibling);
    }
}

//需求:在豆豆前面插入果果
function insertBefore1(){
    //1:创建果果节点
    var item3 = document.createElement("option");
    item3.innerHTML = "果果";
    item3.id = "item3";
    //2:获取豆豆节点
    var item4 = document.getElementById("item4");
    p(item4);
    //3:在豆豆节点前面插入果果节点
    item4.parentNode.insertBefore(item3, item4);
}

//需求:删除三浪
function deleteItem5(){
    //1.获取三浪
    var item5 = document.getElementById("item5");
    //删除三浪
    item5.parentNode.removeChild(item5);
}

//需求:把书航替换为松鼠航
function replaceItem1(){
    //1.获取书航节点
    var item1 = document.getElementById("item1");
    //2.创建松鼠航节点
    var newItem1 = document.createElement("option");
    newItem1.id = "item1";
    newItem1.innerHTML = "松鼠航";
    //3.把书航节点替换为松鼠航节点
    item1.parentNode.replaceChild(newItem1, item1);
}

今日小结