工业UI开发技术-课件 2-3-10 DOM编程.pptxVIP

DOM编程深圳市信息职业技术学院

查询元素01目录0203获取元素创建元素04删除元素05属性与文本，定时器

本节目标 通过对JavaScript的基本语法的介绍，掌握JavaScript的语法。通过实训案例的讲解掌握流程控制，类与对象，DOM编程等内容。最后通过任务实施完成JavaScript的全面掌握与灵活运用。通过本节学习可以：掌握JavaScript的基本语法掌握JavaScript的流程控制掌握JavaScript类与对象的概念掌握JavaScript的DOM编程掌握ES6标准

认识DOMDOM即DocumentObjectModel，翻译过来就是文档对象模型DOM的主要作用是可以通过javascript动态修改相关的元素，想要去修改元素，我们就需要选择到对应的元素

DOM树HTMLDOM树 DOM会将整个文档抽象为DOM树，所有在DOM树上的元素都可以被选择。

DOM树JavaScript可以完成这些操作 JavaScript能够改变页面中的所有HTML元素 JavaScript能够改变页面中的所有HTML属性 JavaScript能够改变页面中的所有CSS样式 JavaScript能够对页面中的所有事件做出反应为了做到这件事情，您必须首先找到该元素（即：建立元素的DOM对象）。 有四种方法来做这件事： 1.通过id找到HTML元素 2.通过标签名找到HTML元素 3.通过name属性（只针对有name属性的表单元素）找到HTML元素 4.通过类名找到HTML元素

01查询元素

查询元素有三种方法可以查询到元素节点：通过ID，通过标签名字，通过class，这些查询方式都需要通过JavaScript的函数来获取元素。

02获取元素

获取元素1.通过id查找HTML元素 在DOM中查找HTML元素的最简单的方法，是通过使用元素的id。 varx=document.getElementById(intro);如果找到该元素，则该方法将以对象（在x中）的形式返回该元素。如果未找到该元素，则x将包含null。

获取元素2.通过标签名查找HTML元素 本例查找id=“main”的元素，然后查找“main”中的所有p元素： varx=document.getElementById(“main”); vary=x.getElementsByTagName(“p”);3.通过name属性查找HTML元素 例：varhobby=document.getElementsByName(“hobby”); //查找name=“hobby”的复选框 注：通过标签名和name属性得到的都是数组4.通过类名查找HTML元素在IE5,6,7,8中无效。 document.getElementsByClassName();

获取元素补充：document.querySelector()querySelector()方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用querySelectorAll()方法替代。浏览器支持：IE8.0chrome:4.0FF:3.5例： document.querySelector(p); document.querySelector(.example); document.querySelector(p.example); document.querySelector(a[target]); document.querySelector(h2,h3)

03创建元素

创建元素方法描述createElement(tagName)创建标记名tagName的Element节点。Element节点可以包含文本子节点和属性子节点例如：node_h1=document.createElement(“h1”)createTextNode(text)创建包含文本text的文本节点，返回得到的节点如：node_text=document.createTextNode(“hello”)appendChild(node)向当前节点添加子节点，子节点被添加在子节点列表的尾部。例如：node_h1.appendChild(node_text)insertBefore(new,current)在current节点前插入new节点。parentNode.insertBefore(new,current)

04删除元素

删除子节点对象父节点对象.removeChild(子节点对象)节点对象.remove()//移除当前元素

05属性与文本

获取与修