网页设计与制作（活页式） 课件 情景9-5DOM

网页设计与制作DOM对象授课教师：乔振华HTMLCSSJavaScriptJavaScript目录CONTENTS12学习目标知识讲解3小结学习目标01学习目标学习目标01理解DOM对象学习目标03会DOM操作学习目标02掌握常用的DOM属性和方法02知识点讲解

01什么是DOM对象？

03DOM中有哪些方法和属性思考知识点讲解

02DOM对能够做什么？

04DOM操作是什么1、什么是DOM文档对象模型（DocumentObjectModel，简称DOM），是一种与平台和语言无关的模型，用来表示HTML或XML文档。文档对象模型中定义了文档的逻辑结构，以及程序访问和操作文档的方式。当网页加载时，浏览器就会自动创建当前页面的文档对象模型（DOM）。在DOM中，文档的所有部分（例如元素、属性、文本等）都会被组织成一个逻辑树结构，树中每一个分支的终点称为一个节点，每个节点都是一个对象，如下图所示：借助DOM，我们可以访问、修改、删除或添加HTML文档中的任何内容。1、什么是DOM表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。表单域：相当于一个容器，用来容纳所有的表单控件和提示信息。2、document对象document对象在DOM中，document是节点树中的顶层节点，代表的是整个HTML文档，它是操作文档其他内容的入口。document对象访问或处理文档需要调用它的方法或属性。注意：document对象是window对象的一部分，所以可以通过window.document来访问document对象。document对象常用属性如下表document对象常用属性属性描述anchors返回文档中的所有书签锚点，通过数组下标引用每一个锚点。如：document.anchors[0]返回第一个锚点。body代表body元素forms返回文档中的所有表单，通过数组下标引用每一个表单。如：document.forms[0]返回第一个表单。images返回文档中的所有图片，通过数组下标引用每一张图片。如：document.images[0]返回第一张图片。lastModified用于获取文档最后修改的日期和时间。document对象常用方法如下表document对象常用方法方法描述createAttribute(节点名)创建一个属性节点。createElement(节点名)创建一个元素节点。createTextNode(节点内容)创建一个文本节点。getElementsByClassName(CSS类名)返回文档中所有指定类名的元素集合，集合类型为NodeList。getElementById(id属性值)返回拥有指定id的第一个对象的引用。3、查找节点DOM树是由许多HTML标签元素构成的，这些标签元素就是树上的节点，要对节点操作，首先要获取节点，获取节点通常有四种方式：通过id找到html标签：document.getElementById(“id”);01通过标签名找到html标签：document.getElementsByTagName(“p”);02通过类名找到html标签：document.getElementsByClassName(“class”);03通过name找到html标签：document.getELementsByName(“name”)。04通过id找到html标签注意：根据id值只能获取唯一的标签。通过标签名找到html标签通过类名找到html标签4、使用DOM创建、插入、修改和删除节点（1）创建节点：创建元素节点调用:document.createElement(”节点名”);

创建文本节点调用:document.createTextNode(”节点名”);

创建属性节点调用:document.createAttribute(”节点名”);使用HTMLDOM创建、插入、修改和删除元素需要分别调用Document对象和元素对象的相应方法来实现。4、使用DOM创建、插入、修改和删除节点（2）插入节点：在元素子节点列表的后面附加子节点:

element.appendChild(子节点);

在元素某个子节点前面添加子节点:

element.insertBefore(节点1,节点2);（3）修改和删除节点：节点的修改:element.replaceChild(新节点，旧节点);

节点的删除:element.removeChild(子节点);知识点讲解例：给div增加一个id=j，文本内容为javascript的节点<divid="list"><p>HTML</p><p>CSS</p></div><script>varlist=document.getElementById('list');//根据id获取节点varnewP=document.createElement('p');//创建一个P标签newP.innerText=‘javascript’;

list.appendChild(newP);

//附加节点</script>03小结小结本节内容讲解了JavaScript中