动态网页D-html

BOM(Browser Object Model)浏览器对象模型

window对象(window – 代表浏览器中打开的一个窗口)

1、alert()方法 – 定义一个消息对话框

window.alert(“windows”);

2、confirm()方法 – 定义一个确认对话框

var res = window.confirm(“是否确定?”);

3、onload事件 – 在整个HTML文档加载完之后立即触发执行

window.onload = function(){

alert(“文档加载完”);

//获取div元素

var oDiv = document.getElementById(“div1”);

//将div元素的内容替换为"Hello java"

oDiv.innerHTML = “Hello java”;

}

4、设置定时器，清除定时器

setInterval，循环定时器, 可以指定在多少毫秒之后, 循环执行指定的程序；

setTimeout，一次性定时器, 可以指定在多少毫秒之后, 执行指定的程序；

clearInterval，清除定时器

clearTimeout，清除一次性定时器

例如：

var i = 0;

var timer1 = window.setInterval(function(){

i++;

document.getElementById(“div1”).innerHTML = new Date().toLocaleString();

if(i>=5){

//清除定时器

clearInterval(timer1);

}

}, 1000);

DOM(Document Object Model )文档对象模型

获取元素：

document.getElementById() – 通过元素的ID属性值获取指定的元素

document.getElementsByName方法 – 通过元素的name属性值获取指定name的所有元素组成的集合数组

document.getElementsByTagName方法 – 通过元素的名称获取指定名称的所有元素组成的集合数组

获取元素的value值，使用获取到的元素.value即可

(1)innerText – 获取或设置元素的文本内容(部分浏览器不兼容)

(2)innerHTML – 获取或设置元素的html内容

增删改元素

添加节点

(1)document.createElement(tagName) – 创建一个指定名称的元素

(2)parent.appendChild(child) – 为父元素添加一个子元素

(3)document.body – 获取body元素

删除节点

(1)parent.removeChild(child) – 通过父元素删除指定的子元素

(2)child.parentNode – 通过子元素获取父元素

更新节点

(1)parent.replaceChild(new, child) – 通过父元素将已有的子元素替换为新的子元素

克隆节点、插入节点到指定元素的前面

(1)obj.cloneNode([boolean]) – 克隆元素, 如果没有参数或者参数为false, 将只克隆元素本身, 不包含元素的子元素们. 如果参数为true, 将克隆元素并且包括元素的子元素们.

(2)parent.insertBefore( new, child ) – 插入元素, 通过父元素将新元素插入在指定子元素的前面.

文档就绪函数：

$(function(){ });

完整写法：

$(document).ready(function(){

JS代码…

});

与js等价：

window.onload = function(){}

js对象oInp ;

$( oInp )，转换为jQuery对象；

jQuery对象Inp；

Inp[0]和Inp.get(0)都是js对象，把jQuery对象转换为js对象