DOM（文档对象模型）

DOM（文档对象模型）

借助DOM技术，将结构化文档（主要是XML和HTML）转化为DOM树。使用JS通过借口访问修改HTML内容和风格。

1.HTML模型中的继承关系及包含关系

DOM模型为HTML元素之间的继承关系。每个类都有相应的方法操作元素及其子元素。HTML元素有包含关系的限制，比如div可以相互嵌套。

document(html文档对象), element(html元素节点)

 attribute(html元素节点的属性), event(html元素节点的事件)

 

2.访问HTML元素

根据ID访问

Element document.getElementByID(id) 返回匹配到的HTML元素

 

根据CSS选择器访问

Element document.quarySelector(selectors) 返回第一个匹配到的HTML元素

NodeList document.quarySelectorAll(selectors) 返回匹配到的HTML元素集合,NodeList对象。

 

利用节点关系访问,HTML元素

HTML属性

Node parentNode   父节点

Node[] childNodes

Node firstChild

Node lastChild

Node previousSibling

Node nextSibling

document方法

Node[] getElementsByTagName(tagName)   所有tagName标签的html元素

Node[] getElementsByClassName(tagName)  所有name为tagName的html元素

例子

var city = document.getElementById("city");

document.write(city.lastChild.previousSibling.innerHTML);

元素之间的空白也算节点。

例子

var lis=document.getElementsByTagName("p")
for(var i=0;i<lis.length;i++){
    lis[i].innerHTML+=i;

}

 

3.访问表单控件

表单属性

action 表单的提交地址

length 表单域中元素的个数

method 表单的提交方式

target 提交表单时的结果窗口

elements 返回全部表单控件，可通过HTMLFormElement.elements[n],  HTMLFormElement.elemtents[idOrName],  HTMLFormElement.idOrName三种方法访问表单中的元素，第二种第三种返回表单中id或者name属性为idOrName的元素。

 

表单方法

reset() 重设表单

submit() 提交表单

 

 

HTMLSelectElement元素属性

form 列表框所在的表单对象

length 列表框元素数目

options 选项组成的数组

selectedIndex 选中选项的索引

type 下拉列表框的类型select-multiple或者select-one

 

HTMLSelectElement元素options属性

options[index]，通过下标访问option,option的属性如下：

form 返回所在form对象。

defaultSelected 是否为默认选项。

index 返回在列表框中的索引。
selected 是否被选中。

text 返回呈现的文本，与innerHTML属性相同。

value 返回选项的value值，通过设置该属性改变value值。

 

例子

var form=document.getElementById("form");
var option= form.elements.selectId.options[0].form

 

4.HTMLTableElement表格对象

caption 返回表格标题，用于修改标题。

HTMLCollection rows 返回所有的行，包括tbody,tfoot,thead。

HTMLCollection tBodies 返回表格所有tbody元素组成的数组。

tFoot 返回tfoot元素

tHead 返回thead元素

 

table.row[index] 返回表格的第index+1行

HTMLTableRowElement对象属性

cells 返回该表格行中所有单元格的数组

rowIndex 返回行的索引值

sectionRowIndex 返回该表格行在其元素中的索引值

 

HTMLTableCellElement元素属性

cellIndex 单元格在行中的索引值。

 

例子

var table =document.getElementById("d")
var cellIndex = table.tFoot.rows[0].cells[0].cellIndex

 

5.修改HTML元素

 

通过更改元素的可修改属性来改变HTML元素。

innerHTML 网页呈现的内容

value

className 选择器名字

style 内联样式

options[index]  select元素的列表项属性

 

例子

var table =document.getElementById("d")
table.tFoot.rows.item(0).cells[0].innerHTML=”robert”

 

6.增加HTML元素

创建节点

HTMLElement createElement(tag) 创建一个节点

Node cloneNode(deep) 克隆一个节点，deep为true时顺带复制其子节点，false只复制当前节点。

 

添加节点

appendChild(Node new)  将子节点的添加到最后

insertBefore(Node new,Node ref) 插入子节点到ref节点之前

replaceChild(Node new ,Node old) 替换子节点

 

例子

var option=document.createElement("option");

select.insertBefore(option,select.options[1]);

 

7.HTMLSelectElement元素

 

add(HTMLOptionElement option,HTMLOptionElement beforeOption) 在beforeOption之前添加option，如果第二个参数为null或者为空，则将option添加在最后。相当于addChild(Node node)方法的效果。

 

new Option(text,value,defaultSelected,selected) 定义一个Option对象，相当于createElement(“option”)。

 

例子

var op = new Option("texthh","valuehh",false,true);
select.options[0]=op

 

1. 动态修改表格内容

HTMLTableElement属性

HTMLTableRowElement insertRow(index) 插入row，返回row对象。

createCaption() 创建caption

createTFoot() 创建tfoot

createTHead() 创建thead

 

HTMLTableCellElement insertCell(index)  在索引index处插入cell。

 

1. 删除HTML元素

removeChild(Node oldNode)  删除子元素，适用所有html元素

 

remove(long index) 删除select元素中的option元素。普通元素调用，不论index都会整个删除该元素。

deleteRow(long index) 按index删除row

deleteCell(long index) 按index删除cell

 

例子

var table =document.getElementById("table")

table.rows[0].deleteCell(table.rows[0].cells[0])

 

10.window对象的常用属性

alert() confirm()prompt() close() focus() blur() moveBy() moveTo() open() print() resizeBy() resizeTo() scrollBy() scrollTo()

closed defaultStatus status frames document history location name navigator parent screen self top

document 窗口装载的html文档

window.screen 客户机屏幕特征 weight height colorDepth

window.location 网站地址信息  hostname pathname href protocol port

 

11.定时器

setTimeout()

setInterval()

clearTimeout()

clearInterval(handler)

 

window.onload中定义的变量也是局部变量
onclick事件返回值为undefined,不会阻止控件的行为,false显式阻止。
onclick的调用函数必须要设置成全局变量
windows.setInterval()作为参数的函数要设置为全局变量。

 

例子

setTimeout和clearTimeout的组合

closeTim = function (){

    clearTimeout(t1)
}
test1 =function() {
    console.log("test1" + ++i)
    t1=setTimeout("test1();",500)
}

 

setInterval 和clearInterval的组合

closeInter = function (){

    clearTimeout(t2)
}

t2=setInterval("test2();",500)

test2 =function() {
    console.log("test2" + ++i)
}

 

1. Notification通知

Notification的实例代表桌面通知

let fkNotify;
function notifyMe() {
   // 检查当前浏览器是否支持通知API
   if (!("Notification" in window))
   {
      alert("当前浏览器不支持桌面通知！");
   }
   // 如果通知已经得到了用户授权
   else if (Notification.permission === "granted")
   {
      // 创建通知
      fkNotify = new Notification("您好，来自yeeku的通知！"
         , {icon:"fklogo.gif"});

   }
   // 如果通知API没有被用户明确拒绝
   else if (Notification.permission === "default")
   {
      // 请求获得通知权限
      Notification.requestPermission(function (permission) {
         // 如果用户授权接受通知API
         if (permission === "granted")
         {
            fkNotify = new Notification("您好，来自yeeku的通知！"
               , {icon:"fklogo.gif"});
         }

      });
   }
   if(fkNotify)
   {
      fkNotify.addEventListener("show" , function(){
         alert("通知被显示出来");
      }, false);
      fkNotify.addEventListener("close" , function(){
         alert("通知被关闭");
      }, false);
   }
   // 如果用户明确拒绝了通知API，程序将不再使用通知API
}
function closeNotify()
{
   fkNotify.close();
}

 

13.navigator浏览器信息

navigator属性对应Navigator对象，浏览该页面所使用的浏览器的信息

appName：浏览器内核名称

appVersion：浏览器当前版本

platform：浏览器所在操作系统

地理定位

geolocation：navigator的geolocation属性返回一个Geolocation对象

geolocation.getCurrentPosition(onSuccess,onError,options)获取地理位置

目前mac系统无法获取地理位置

电池信息

navigator.getBattery():返回一个电池服务的Promise

例子

navigator.getBattery().then(function (battery) {
    battery.addEventListener("chargingchange",function (){
         console.log("电池是否正在充电：" + battery.charging);
console.log("充电时间：" + battery.chargingTime);
console.log("不充电时间：" + battery.dischargingTime);
console.log("充电程度：" + battery.level);

    });
})

 

history历史信息

history对象是一个History对象

与ajax配合使用，暂时不研究

14.document

HTMLDocument类的一个实例

close():结束一个open方法打开的document对象

open():打开一个document对象

write():document对象中输出一条字符串，输出后不换行

writeln():输出后换行

属性

alinkColor linkColor vlinkColor bgColor fgColor 超链接颜色

all 返回所有子元素

cookie：读写HTTPcookie

location

URL:类似于location的href属性

例子

<script type="text/javascript">
   // 计数器
   var n = 0;
   var win = null;
   // 用于显示弹出窗口显示提示信息的函数
   var show = function(msg)
   {
      // 判断弹出窗口是否为空
      if ((win == null) || (win.closed))
      {
         // 打开一个新的弹出窗口
         win = window.open("","console"
            ,"width=340,height=220,resizable");
         // 将弹出窗口的文档打开成一个text/html文档
         win.document.open("text/html");
      }
      // 让弹出窗口得到焦点
      win.focus();
      // 在弹出窗口装载的文档中输出信息
      win.document.writeln(msg);
   }
</script>
<!-- 激发事件的按钮 -->
<input type="button" value="单击"
   onclick="show('您单击了按钮:' + ++n + '次。<br/>');">

 

读写Cookie

cookie中几个常用属性：

max-age指定Cookie存活最长有效期。

domain:指定Cookie属于哪个域。

secure指定该Cookie的安全属性。

 

例子

setCookie=function(cname,cvalue,exdays){
    var d=new Date()
    d.setTime(d.getTime()+exdays*24*3600*1000);
    var expires = "expires="+d.toUTCString();
    document.cookie=cname+"="+cvalue+";"+expires;
}

getCookie=function(cname){
    var name=cname+"=";
    var ca=document.cookie.split(";");
    for(var i=0;i<ca.length;i++){
        var c=ca[i].trim();
        if(c.indexOf(name)==0){
            return c.substring(name.length,c.length);
        }
    }
    return ""

}
updateCookie=function(cname,cvalue){
    document.cookie=cname+"="+cvalue;
}
deleteCookie=function(cname){
    document.cookie = cname+"=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
}

cookieOp =function () {
    var user=getCookie("username")
    if(user!=""){
        alert("欢迎"+user+"再次访问")
        deleteCookie("username")
    }else{
        user=prompt("请输入你的名字","")
        if(user!=""&&user!=null){
            setCookie("username",user,30)
        }
    }
}

1. performance浏览器分析属性

返回一个Performance对象

timing属性：浏览器时间的属性包括：

navigationStart:浏览器卸载前一个文档，如果失败，返回开始加载当前文档的时间

loadEventStart:返回当前文档onload事件被触发的时间

loadEventEnd:返回当前文档onload事件响应完成的时间

navigation属性：

type：0正常进入页面，超链接，URL，提交表单；1重新加载进入页面，刷新；2通过后退或者前进；225不属于以上情况。

redirectCount：重定向次数

 

例子

var now=new Date().getTime()
var page_load_time=now-performance.timing.navigationStart;
console.log(page_load_time)