JavaScript之HTML DOM

来源：互联网发布：双十一大学生网购数据编辑：程序博客网时间：2024/04/29 20:57

1. 理解HTML DOM

1.1. HTML的文档结构

<html>

<head>

</head>

<body>

<ahref="">我的链接</a>

</body>

</html>

1.2. DOM模型

l DOM= Document ObjectModel，文档对象模型， DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：独立于平台和语言的接口. W3C DOM 标准被分为 3 个不同的部分：

n 核心 DOM - 针对任何结构化文档的标准模型

n XML DOM - 针对 XML 文档的标准模型

n HTML DOM - 针对 HTML 文档的标准模型

1.3. HTML节点

l HTML文档中的每个成分都是一个节点。

n 整个文档是一个文档节点(Document)

n 每个 HTML 标签是一个元素节点(Element)

n 每一个 HTML 属性是一个属性节点(Attribute)

n 包含在 HTML 元素中的文本是文本节点(Text)

2. DOM的CRUD

2.1. HTML节点的查询

对象类型

属性/方法

说明

文档

getElementById(id)

根据标签的id得到对应的标签对象

文档

getElementsByTagName(tag)

根据标签名得到对应的所有子标签对象的集合(数组)

节点

nodeName 标签节点

得到节点名

节点

nodeValue Text/Attr

得到节点的值

节点

nodeType

节点类型值

元素节点

childNodes

得到所有子节点的集合(数组)

元素/文本节点

parentNode

得到父节点对象(标签)

元素节点

firstChild

得到第一个子节点(标签/文本)

元素节点

lastChild

得到最后一个子节点(标签/文本)

元素节点

getAttribute(attrName)

根据属性名得到属性值

2.2. HTML节点的增删改

对象类型

属性/方法

说明

文档节点

createElement(tagName)

创建一个新的元素节点对象

文档节点

createTextNode(text)

创建一个文本节点对象

document

元素节点

appendChild(node)

将指定的节点添加为子节点

元素节点

insertBefore(new,target)

在指定子节点的前面插入新节点

element

元素节点

replaceChild(new, old)

用新节点替换原有的旧子节点

元素节点

removeChild(childNode)

删除指定的子节点

元素节点

setAttribute(name, value)

为标签添加一个属性

元素节点

removeAttribute(name)

删除指定的属性

元素节点

innerHTML

向标签中添加一个标签

<styletype="text/css">

ul {

list-style-type: none;

}

li {

border-style: solid;

border-width: 1px;

padding: 5px;

margin: 5px;

background-color: #99ff99;

float: left;

}

.out {

width: 400px;

border-style: solid;

border-width: 1px;

margin: 10px;

padding: 10px;

float: left;

}

</style>

</head>

<body>

<divclass="out">

<p>你喜欢哪个城市?</p>

<ulid="city">

<liid="bj">北京</li>

<liid="dj">东京</li>

</ul>

<br>

<divid="inner"></div>

</div>

</body>

<scripttype="text/javascript">

1. 得到id为bj标签的文本

2. 得到可选城市的数量

3. 向id为inner的标签中插入文本

</script>

3. DOM的事件监听

3.1. 添加事件监听

l 页面的很多交互操作都是通过在一些页面视图上添加事件监听的方式来实现的

l 给标签添加事件属性

<button onclick="showMsg()">Click Me</button>

l 得到标签对象并给其添加事件属性, 属性值为一个函数

var btnEle = document.getElementById("btn");

btnEle.onclick = function(){

alert("Thank you, baby!!!!!");

};

3.2. 常用事件

属性

值

描述

onclick

回调函数

当鼠标被单击时执行脚本

ondblclick

回调函数

当鼠标被双击时执行脚本

onmousedown

回调函数

当鼠标按钮被按下时执行脚本

onmousemove

回调函数

当鼠标指针移动时执行脚本

onmouseout

回调函数

当鼠标指针移出某元素时执行脚本

onmouseover

回调函数

当鼠标指针悬停于某元素之上时执行脚本

onmouseup

回调函数

当鼠标按钮被松开时执行脚本

onload

回调函数

当文档被载入时执行脚本

onchange

回调函数

当元素改变时执行脚本

onsubmit

回调函数

当表单被提交时执行脚本

onreset

回调函数

当表单被重置时执行脚本

onselect

回调函数

当元素被选取时执行脚本

onblur

回调函数

当元素失去焦点时执行脚本

onfocus

回调函数

当元素获得焦点时执行脚本

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">ul {list-style-type: none;}li {border-style: solid;border-width: 1px;padding: 5px;margin: 5px;background-color: #99ff99;float: left;}.out {width: 400px;border-style: solid;border-width: 1px;margin: 10px;padding: 10px;float: left;}</style></head><body><div class="out"><p>你喜欢哪个城市?</p><ul id="city"><li id="bj">北京</li><li>上海</li><li id="dj">东京</li><li>首尔</li></ul><br><div id="inner"></div></div></body><script type="text/javascript">/*1. 得到id为bj标签的文本document.getElementById(id) //根据id得到标签对象element.firstChild //得到第一个子标签node.nodeValue //得到节点的值*///document: 代表整个HTML文档的对象var liEle = document.getElementById("bj"); //<li id="bj">北京</li>var textEle = liEle.firstChild;//北京//alert(textEle);var value = textEle.nodeValue;//alert(value);/*2. 得到可选城市的数量var elements = document.getElementsByTagName(tagName)//根据标签名得到所有匹配的标签的数组*///得到所有li标签对象的数组var liEles = document.getElementsByTagName("li");var count = liEles.length;//alert(count);/*3. 向id为inner的标签中插入文本*///1. 得到<div id="inner"></div>对象var innerEle = document.getElementById("inner");innerEle.innerHTML = "hello.com.....";/* //2. 创建一个文本节点, 内容是atguigu.comvar textNode = document.createTextNode("hello.com");//3. 将文本节节点添加为div的子节点innerEle.appendChild(textNode); */</script></html>

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>DOM的事件监听</title><script type="text/javascript">function showMsg() {alert("ok....");}//当文档加载完成后function被自动 调用window.onload = function(){//回调函数//得到标签对象并给其添加事件属性, 属性值为一个函数var btn2 =  document.getElementById("btn2");//alert(btn2);btn2.onclick = function(){alert("ok.....");};//注意: 浏览器解析html文件是从上至下去解析的};</script></head><body><button onclick="showMsg();">click...</button><br><button id="btn2">click me....</button><br></body><script type="text/javascript">/* var btn2 =  document.getElementById("btn2");//alert(btn2);btn2.onclick = function(){alert("ok.....");}; */</script></html>

1 0