w3schoolHTMLDOM中文教程资源-CSDN文库

共589个文件

htm：567个

gif：17个

jpg：2个

w3school

HTML

DOM

中文教程

3星 · 超过75%的资源需积分: 10 119 浏览量 2008-12-04 02:15:27 上传评论 1 收藏 1.99MB RAR 举报

HTML DOM（Document Object Model）是HTML和XML文档的编程接口，它将网页结构化为一个树形模型，允许程序员和脚本语言通过JavaScript或其他支持DOM的编程语言来访问和操作页面中的各个元素。这个w3school HTML DOM中文教程提供了一个全面的学习资源，帮助初学者理解和掌握如何动态地改变HTML文档的内容、结构和样式。 1. **DOM基本概念** - DOM是一个标准，定义了如何表示和访问HTML或XML文档的结构。 - 它将文档视为节点树，其中每个元素、文本、属性等都是一个独立的节点。 - DOM提供了对这些节点进行操作的方法和属性，如获取、添加、删除和修改。 2. **DOM树结构** - HTML文档中的每个元素都是DOM树上的一个节点，根节点是`<html>`元素，其他的节点如`<head>`、`<body>`、`<p>`等都是其子节点。 - 节点之间有父节点、子节点和兄弟节点的关系。 3. **访问和操作DOM** - 使用`getElementById()`：根据ID查找特定元素。 - 使用`getElementsByTagName()`：根据标签名查找所有元素。 - 使用`getElementsByClassName()`：根据类名查找元素。 - `querySelector()`和`querySelectorAll()`：更灵活的选择器方法，可以使用CSS选择器。 4. **节点操作** - 创建新节点：`document.createElement()`。 - 插入节点：`appendChild()`, `insertBefore()`。 - 删除节点：`removeChild()`。 - 替换节点：`replaceChild()`。 5. **属性操作** - 获取属性值：`getAttribute()`。 - 设置属性值：`setAttribute()`。 - 删除属性：`removeAttribute()`。 6. **事件处理** - 绑定事件：`addEventListener()`。 - 移除事件：`removeEventListener()`。 - 事件冒泡与事件捕获的概念。 - 事件对象（Event Object）和常用事件属性如`target`、`currentTarget`、`eventPhase`等。 7. **样式操作** - 修改内联样式：`element.style.property`。 - 使用CSS类：`classList.add()`, `classList.remove()`, `classList.toggle()`。 - 访问CSS规则：`getComputedStyle()`。 8. **遍历DOM** - `childNodes`集合：获取节点的所有子节点。 - `firstChild`和`lastChild`属性：获取第一个和最后一个子节点。 - `previousSibling`和`nextSibling`属性：获取当前节点的前一个和后一个兄弟节点。 9. **HTML5新增的DOM操作** - `textContent`：获取或设置元素及其所有后代的文本内容。 - `innerHTML`：获取或设置元素的HTML内容。 - `querySelectorAll()`：使用CSS选择器获取元素集合。 10. **DOM性能优化** - 避免在DOM操作中频繁读写，可以先进行本地操作，最后一次性更新。 - 使用`createDocumentFragment()`创建临时片段，减少DOM重绘和回流。 - 使用事件委托降低事件绑定的数量。通过这个w3school HTML DOM中文教程，你可以系统学习到如何用JavaScript与HTML交互，实现动态网页效果。教程中应该包含了丰富的实例和练习，帮助你更好地理解和应用DOM知识。记得动手实践，理论结合实际，才能真正掌握这些技能。

展开

资源推荐

资源详情

资源评论

收起资源包目录

w3school HTML DOM 中文教程（589个子文件）

prop_win_closed.asp 11B

c3.css 16KB

site_head_index.gif 6KB

site_nav.gif 6KB

site_head.gif 4KB

ct_htmltree.gif 3KB

site_search.gif 1KB

site_example.gif 1KB

site_quiz.gif 1KB

site_reference.gif 1KB

site_prenext.gif 636B

site_selected.gif 442B

site_course.gif 416B

site_books.gif 395B

site_afterschool.gif 395B

site_ad.gif 386B

site_tools.gif 371B

site_wrapper.gif 265B

site_holder.gif 240B

dom_obj_style.asp.htm 49KB

dom_obj_event.asp.htm 32KB

dom_obj_window.asp.htm 29KB

htmldom_reference.asp.htm 24KB

dom_obj_table.asp.htm 24KB

dom_obj_document.asp.htm 23KB

dom_obj_text.asp.htm 23KB

dom_obj_password.asp.htm 23KB

dom_obj_select.asp.htm 22KB

dom_obj_textarea.asp.htm 22KB

dom_obj_anchor.asp.htm 22KB

dom_obj_radio.asp.htm 22KB

dom_obj_image.asp.htm 22KB

met_win_open.asp.htm 22KB

dom_obj_submit.asp.htm 22KB

dom_obj_checkbox.asp.htm 22KB

dom_obj_form.asp.htm 21KB

dom_obj_location.asp.htm 21KB

dom_obj_reset.asp.htm 21KB

dom_obj_area.asp.htm 21KB

dom_obj_button.asp.htm 21KB

dom_obj_tabledata.asp.htm 21KB

dom_obj_object.asp.htm 21KB

dom_obj_fileupload.asp.htm 21KB

dom_obj_iframe.asp.htm 21KB

dom_obj_navigator.asp.htm 21KB

coll_table_rows.asp.htm 21KB

dom_obj_frame.asp.htm 21KB

dom_nodes_access.asp.htm 20KB

dom_obj_screen.asp.htm 20KB

dom_obj_option.asp.htm 20KB

dom_obj_link.asp.htm 20KB

event_onmouseout.asp.htm 20KB

event_onmouseover.asp.htm 20KB

dom_obj_pushbutton.asp.htm 20KB

dom_obj_hidden.asp.htm 20KB

event_onmousedown.asp.htm 20KB

event_onmouseup.asp.htm 20KB

prop_style_liststyletype.asp.htm 19KB

met_win_settimeout.asp.htm 19KB

dom_obj_tablerow.asp.htm 19KB

prop_text_value.asp.htm 19KB

prop_style_display.asp.htm 19KB

event_onkeypress.asp.htm 19KB

event_onkeydown.asp.htm 19KB

prop_anchor_rev.asp.htm 19KB

prop_link_rev.asp.htm 19KB

prop_anchor_rel.asp.htm 19KB

prop_style_cursor.asp.htm 19KB

prop_link_rel.asp.htm 19KB

event_onclick.asp.htm 19KB

event_onfocus.asp.htm 19KB

event_onblur.asp.htm 19KB

event_ondblclick.asp.htm 19KB

coll_select_options.asp.htm 19KB

dom_intro.asp.htm 19KB

prop_style_content.asp.htm 19KB

met_doc_getelementsbytagname.asp.htm 19KB

event_onkeyup.asp.htm 19KB

met_tablerow_insertcell.asp.htm 19KB

met_doc_open.asp.htm 19KB

dom_summary.asp.htm 19KB

event_onmousemove.asp.htm 19KB

prop_nav_appversion.asp.htm 19KB

prop_link_media.asp.htm 19KB

prop_nav_useragent.asp.htm 19KB

prop_style_liststyle.asp.htm 19KB

prop_style_position.asp.htm 19KB

prop_style_background.asp.htm 19KB

prop_checkbox_checked.asp.htm 19KB

prop_select_selectedindex.asp.htm 19KB

prop_nav_appname.asp.htm 19KB

met_select_add.asp.htm 19KB

prop_option_disabled.asp.htm 19KB

prop_nav_appcodename.asp.htm 19KB

prop_style_borderstyle.asp.htm 19KB

prop_title.asp.htm 19KB

prop_nav_platform.asp.htm 19KB

prop_nav_online.asp.htm 19KB

prop_style_borderrightstyle.asp.htm 18KB

prop_style_bordertopstyle.asp.htm 18KB

共 589 条

      
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />

<meta name="robots" content="all" />
<meta name="description" content="HTML DOM Style 对象的定义、对其属性的简要描述，并提供了指向具体属性的链接。" />

<meta name="author" content="w3school.com.cn" />
<meta name="Copyright" content="Copyright W3school.com.cn All Rights Reserved." />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta http-equiv="imagetoolbar" content="false" />

<link rel="stylesheet" type="text/css" href="c3.css" tppabs="http://www.w3school.com.cn/c3.css" />

<title>HTML DOM Style 对象</title>
</head>

<body class="browserscripting">
<div id="wrapper">

<div id="header">
<a href="javascript:if(confirm('http://www.w3school.com.cn/index.html  \n\n该文件无法用 Teleport Ultra 下载, 因为 它是一个域或路径外部被设置为它的启始地址的地址。  \n\n你想在服务器上打开它?'))window.location='http://www.w3school.com.cn/index.html'" tppabs="http://www.w3school.com.cn/index.html" title="w3school 在线教程" style="float:left;">w3school 在线教程</a>
<div id="ad_head">
<script type="text/javascript"><!--
google_ad_client = "pub-3381531532877742";
/* 728x90, 创建于 08-12-1 */
google_ad_slot = "7423315034";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="show_ads.js" tppabs="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>

<div id="navfirst">
<ul id="menu">
<li id="h"><a href="javascript:if(confirm('http://www.w3school.com.cn/h.asp  \n\n该文件无法用 Teleport Ultra 下载, 因为 它是一个域或路径外部被设置为它的启始地址的地址。  \n\n你想在服务器上打开它?'))window.location='http://www.w3school.com.cn/h.asp'" tppabs="http://www.w3school.com.cn/h.asp" title="HTML 系列教程">HTML教程</a></li>
<li id="x"><a href="javascript:if(confirm('http://www.w3school.com.cn/x.asp  \n\n该文件无法用 Teleport Ultra 下载, 因为 它是一个域或路径外部被设置为它的启始地址的地址。  \n\n你想在服务器上打开它?'))window.location='http://www.w3school.com.cn/x.asp'" tppabs="http://www.w3school.com.cn/x.asp" title="XML 系列教程">XML教程</a></li>
<li id="b"><a href="javascript:if(confirm('http://www.w3school.com.cn/b.asp  \n\n该文件无法用 Teleport Ultra 下载, 因为 它是一个域或路径外部被设置为它的启始地址的地址。  \n\n你想在服务器上打开它?'))window.location='http://www.w3school.com.cn/b.asp'" tppabs="http://www.w3school.com.cn/b.asp" title="浏览器脚本系列教程">浏览器脚本</a></li>
<li id="s"><a href="javascript:if(confirm('http://www.w3school.com.cn/s.asp  \n\n该文件无法用 Teleport Ultra 下载, 因为 它是一个域或路径外部被设置为它的启始地址的地址。  \n\n你想在服务器上打开它?'))window.location='http://www.w3school.com.cn/s.asp'" tppabs="http://www.w3school.com.cn/s.asp" title="服务器脚本系列教程">服务器脚本</a></li>
<li id="d"><a href="javascript:if(confirm('http://www.w3school.com.cn/d.asp  \n\n该文件无法用 Teleport Ultra 下载, 因为 它是一个域或路径外部被设置为它的启始地址的地址。  \n\n你想在服务器上打开它?'))window.location='http://www.w3school.com.cn/d.asp'" tppabs="http://www.w3school.com.cn/d.asp" title=".NET (dotnet) 教程">dot net教程</a></li>
<li id="m"><a href="javascript:if(confirm('http://www.w3school.com.cn/m.asp  \n\n该文件无法用 Teleport Ultra 下载, 因为 它是一个域或路径外部被设置为它的启始地址的地址。  \n\n你想在服务器上打开它?'))window.location='http://www.w3school.com.cn/m.asp'" tppabs="http://www.w3school.com.cn/m.asp" title="多媒体系列教程">多媒体教程</a></li>
<li id="w"><a href="javascript:if(confirm('http://www.w3school.com.cn/w.asp  \n\n该文件无法用 Teleport Ultra 下载, 因为 它是一个域或路径外部被设置为它的启始地址的地址。  \n\n你想在服务器上打开它?'))window.location='http://www.w3school.com.cn/w.asp'" tppabs="http://www.w3school.com.cn/w.asp" title="网站构建手册">建站手册</a></li>
</ul>
</div><div id="navsecond">

<div id="course">
<h2>HTML DOM</h2>
<ul>
<li><a href="index.asp.htm" tppabs="http://www.w3school.com.cn/htmldom/index.asp" title="DOM教程首页">DOM 首页</a></li>
<li><a href="dom_intro.asp.htm" tppabs="http://www.w3school.com.cn/htmldom/dom_intro.asp" title="DOM简介">DOM 简介</a></li>
<li><a href="dom_nodes.asp.htm" tppabs="http://www.w3school.com.cn/htmldom/dom_nodes.asp" title="HTML DOM 节点">DOM 节点</a></li>
<li><a href="dom_nodetree.asp.htm" tppabs="http://www.w3school.com.cn/htmldom/dom_nodetree.asp" title="HTML DOM 节点树">DOM 节点树</a></li>
<li><a href="dom_nodes_access.asp.htm" tppabs="http://www.w3school.com.cn/htmldom/dom_nodes_access.asp" title="HTML DOM 访问节点">DOM 节点访问</a></li>
<li><a href="dom_nodes_info.asp.htm" tppabs="http://www.w3school.com.cn/htmldom/dom_nodes_info.asp" title="HTML DOM 节点信息">DOM 节点信息</a></li>
<li><a href="dom_example.asp.htm" tppabs="http://www.w3school.com.cn/htmldom/dom_example.asp" title="一个 HTML DOM 实例">DOM How To</a></li>
<li><a href="htmldom_reference.asp.htm" tppabs="http://www.w3school.com.cn/htmldom/htmldom_reference.asp" title="">DOM 参考</a></li>
<li><a href="dom_summary.asp.htm" tppabs="http://www.w3school.com.cn/htmldom/dom_summary.asp" title="">DOM 总结</a></li>
</ul>

<h2>DOM 实例</h2>
<ul>
<li><a href="javascript:if(confirm('http://www.w3school.com.cn/example/hdom_examples.asp  \n\n该文件无法用 Teleport Ultra 下载, 因为 它是一个域或路径外部被设置为它的启始地址的地址。  \n\n你想在服务器上打开它?'))window.location='http://www.w3school.com.cn/example/hdom_examples.asp'" tppabs="http://www.w3school.com.cn/example/hdom_examples.asp" title="">DOM 实例</a></li>
</ul>

<h2>DOM 对象</h2>
<ul class="small">
<li><a href="dom_obj_window.asp.htm" tppabs="http://www.w3school.com.cn/htmldom/dom_obj_window.asp" title="HTML DOM Window 对象">DOM Window</a></li>
<li><a href="dom_obj_navigator.asp.htm" tppabs="http://www.w3school.com.cn/htmldom/dom_obj_navigator.asp" title="HTML DOM Navigator 对象">DOM Navigator</a></li>
<li><a href="dom_obj_screen.asp.htm" tppabs="http://www.w3school.com.cn/htmldom/dom_obj_screen.asp" title="HTML DOM Screen 对象">DOM Screen</a></li>
<li><a href="dom_obj_history.asp.htm" tppabs="http://www.w3school.com.cn/htmldom/dom_obj_history.asp" title="HTML DOM History 对象">DOM History</a></li>
<li><a href="dom_obj_location.asp.htm" tppabs="http://www.w3school.com.cn/htmldom/dom_obj_location.asp" title="HTML DOM Location 对象">DOM Location</a></li>
<li class="list_apart"><a href="dom_obj_document.asp.htm" tppabs="http://www.w3school.com.cn/htmldom/dom_obj_document.asp" title="HTML DOM Document 对象">DOM Document</a></li>
<li class="list_apart"><a href="dom_obj_anchor.asp.htm" tppabs="http://www.w3school.com.cn/htmldom/dom_obj_anchor.asp" title="HTML DOM Anchor 对象">DOM Anchor</a></li>
<li><a href="dom_obj_area.asp.htm" tppabs="http://www.w3school.com.cn/htmldom/dom_obj_area.asp" title="HTML DOM Area 对象">DOM Area</a></li>
<li><a href="dom_obj_base.asp.htm" tppabs="http://www.w3school.com.cn/htmldom/dom_obj_base.asp" title="HTML DOM Base 对象">DOM Base</a></li>
<li><a href="dom_obj_body.asp.htm" tppabs="http://www.w3school.com.cn/htmldom/dom_obj_body.asp" title="HTML DOM Body 对象">DOM Body</a></li>
<li><a href="dom_obj_pushbutton.asp.htm" tppabs="http://www.w3school.com.cn/htmldom/dom_obj_pushbutton.asp" title="HTML DOM Button 对象">DOM Button</a></li>
<li><a href="dom_obj_event.asp.htm" tppabs="http://www.w3school.com.cn/htmldom/dom_obj_event.asp" title="HTML DOM Event 对象">DOM Event</a></li>
<li><a href="dom_obj_form.asp.htm" tppabs="http://www.w3school.com.cn/htmldom/dom_obj_form.asp" title="HTML DOM Form 对象">DOM Form</a></li>
<li><a href="dom_obj_frame.asp.htm" tppabs="http://www.w3school.com.cn/htmldom/dom_obj_frame.asp" title="HTML DOM Frame 对象">DOM Frame</a></li>
<li><a href="dom_obj_frameset.asp.htm" tppabs="http://www.w