javaweb入门day2 dom

最新推荐文章于 2024-03-17 20:24:30 发布

胡芳文博客

最新推荐文章于 2024-03-17 20:24:30 发布

阅读量127

点赞数

分类专栏：技术教程文章标签：基础详细

技术同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

教程

15 篇文章 0 订阅

订阅专栏

day04总结

l DOM的基础

n Document对象 // 文件

n Element对象 //元素

n Node对象 //节点

l innerHTML

l 事件处理

l 表单验证

上次课内容回顾：

JS中ECMAScript用法：

JS定义变量：使用var 使用typeof变量类型

JS语句:

if语句 switch语句 for while do while for in

JS中数组

var arr = [];

var arr = new Array();

JS中的函数

三种形式:

function 函数名(参数列表){函数体}

var 函数名 = new Function(“参数列表”,”函数体”);

var 函数名 = function(参数列表){函数体}

特殊函数:

回调函数:作为参数传递的函数.

匿名函数:没有名称的函数.

匿名回调函数:作为参数传递的函数而且函数没有名称.

私有函数:写在函数内部的函数.

返回函数的函数:

自调函数: ()()

第一个小括号是函数的定义第二个小括号是调用.

函数中是否有重载? 没有重载.

利用arguments完成模拟重载的效果.

变量的作用域:分为全局域和函数域.

JS中的内置对象:

Array:数组对象. length sort(); reverse();

String:字符串对象. length charAt() indexOf() split() substr();

Date:日期对象. getTime();

Boolean、Number、正则

JS中自定义对象:

定义对象：

var obj = new Object();

var obj = {}

function obj(){

}

prototype:是函数对象的一个属性.(内置对象中都有该属性)

利用prototype属性扩展Array的方法.

利用prototype扩展自定义对象的属性或方法.

JS中的继承.

function A(){

this.aName = “a”;

}

function B(){

this.bName = “b”;

}

B.prototype = new A();

function A(){ }

A.prototype = {

aName:”a”

}

function B(){

this.bName = “b”;

}

B.prototype = A.prototype

JS中BOM对象

Window History Location Screen 浏览器对象

DOM对象:Document Object Model

DOM的介绍

DOM:将文档解析成内存中的树状结构.通过树状结构对文档进行添加节点删除节点修改节点查找节点

DOM 是 W3C（万维网联盟）的标准。

DOM 定义了访问 HTML 和 XML 文档的标准：

"W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"

DOM的分级：

DOM分为3级 DOM 1/2/3级

DOM中的Document对象.

Document：代表整个文档.

l 使用document查找标签

documentElement ---- 获得文档的跟节点.

getElementById(); ---- 通过ID获得元素

getElementsByTagName(); ---- 通过标签名获得元素.返回一个数组

getElementsByName(); ---- 通过name属性获得元素.

案例：

// 获得id为username1的标签的value的值.

var input = document.getElementById("u、sername1");

alert(input.value);

// 获得所有的input的标签的value的值.

var inputs = document.getElementsByTagName("input");

for(var i=0;i<inputs.length;i++){

alert(inputs[i].value);

}

// 获得所有名称是username的标签的value的值.

var inputs = document.getElementsByName("username");

for(var i=0;i<inputs.length;i++){

alert(inputs[i].getAttribute("value"));

}

l Document创建标签.

createElement(); -----创建一个元素标签

createTextNode(); -----创建一个文本节点

node对象.appendChild(node);

案例:

<BODY>

</ul>

</BODY>

// 需求:创建一个<li>深圳</li> 将其放在ul中

// 1.创建li标签 <li></li>

var liElement = document.createElement("li");

// 2.创建一个文本节点深圳

var textElement = document.createTextNode("深圳");

// 3.将文本内容添加到li中 <li>深圳</li>

liElement.appendChild(textElement);

// 4.将li添加到ul中.(查找ul.)

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

city.appendChild(liElement);

</SCRIPT>

Element对象:元素(标签)

l 元素对象操作属性

getAttribute(“属性的名”); // 获得属性的值

setAttribute(“属性名”,”属性值”); // 添加和修改

removeAttribute(“属性名”); // 移除属性

案例：操作元素的属性

// 操作属性 (对属性进行增加修改删除)

// 查找元素.

var input = document.getElementsByTagName("input")[0];

//alert(input.getAttribute("value"));

// 修改name属性的值

// input.setAttribute("name","uname");

// alert(input.getAttribute("name"));

// 添加一个属性id

//alert(input.getAttribute("id"));

//input.setAttribute("id","username");

//alert(input.getAttribute("id"));

alert(input.name);

input.removeAttribute("name");

alert(input.getAttribute("name"));

l 在标签下查找标签

childNodes：获得所有的子节点.属性不是所有的浏览器都兼容.

在标签下查找标签只有getElementsByTagName();是有效的.

案例:

// 查找第一个ul下的所有的li标签.

// 1.先查找第一个ul标签.

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

// 2.再找ul下的li标签.

//var childs = city1.childNodes;

//alert(childs.length);

var lis = city1.getElementsByTagName("li");

alert(lis.length);

Node对象:节点对象.

l Node中的常用的属性

节点包括元素节点属性节点文本节点.

nodeName

nodeType

nodeValue

元素节点

nodeName：标签名 nodeType: 1 nodeValue:没有 null

属性节点

nodeName: 属性名 nodeType: 2 nodeValue:属性的值

文本节点

nodeName: #text nodeType: 3 nodeValue:文本内容

案例:

// 分别获得元素节点的节点名称节点类型节点的值.

// 1.元素节点

var input = document.getElementById("username");

//alert(input.nodeName); // output INPUT

//alert(input.nodeType); // output 1

//alert(input.nodeValue); // output null

// 2.属性节点

var attr = input.getAttributeNode("name"); // 获得属性节点.

//alert(attr.nodeName); // output name

//alert(attr.nodeType); // output 2

//alert(attr.nodeValue); // output username

// 3.文本节点

var p = document.getElementsByTagName("p")[0];

var t = p.firstChild;

alert(t.nodeName); // output #text

alert(t.nodeType); // output 3

alert(t.nodeValue); // output 文本

l 节点对象的父节点子节点及同辈节点

parentNode

childNodes

firstChild

lastChild

nextSibling

previousSibling

l 检测节点中是否有子节点和属性.

hasChildNodes()

hasAttributes()

l 节点的插入

appendChild();

insertBefore(newNode,oldNode);

l 删除和替换节点.

removeChild()

replaceChild(newNode,oldNode)

l 复制节点

cloneNode(boolean); boolean:true 克隆的时候带着子节点一起克隆.默认是false。

innerHTML:获得标签的html的内容及设置标签的html内容.

innerHTML的案例:

var table = "<table width='400' border='1'><tr><td>1</td><td>2</td></tr><tr><td>1</td><td>2</td></tr></table>";

function createTable(){

document.getElementById("divv").innerHTML = table;

}

使用innerHTML生成动态的表格.

案例：

复选框全选/全不选/反选.

下拉列表左右选择.

省市联动（数组）

省市联动 (XML) ---

JS中的事件.

onclick:单击

ondblclick:双击

onchange:列表框改变事件

onmouseover:鼠标放在上面 onmouseout:鼠标离开 onmousemove:鼠标移动.

onload:页面加载时间 onunload:页面的卸载事件.

onblur:失去焦点 onfocus:获得焦点.

onkeyup:键盘事件 onkeydown:键盘事件

校验表单.