03javascript网页编程07-1002webapi3素材01dom对象模型简称DOM是W3C组织推荐的处理可扩展标记语言

目 DOM目DOM1.DOM1.DOM什么是 ObjectModel，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTMLW3CDOMDOMDOM 表元素：页面中的所有都是元素，DOM中使用element表DOM目 DOM目DOM2.2.ID根据名获HTML52.2.ID使用 ementById()方法可以获取带有ID的元素对象 使用根据名获使用 HTML5 //querySelector和querySelectorAll里面的选择器需要加符号,比如 获取特殊元素11doucumnet.body返回body.Element返回html目 DOM目DOM3.1概JavaScript使我们有能力创建动态页面，而 是可以被JavaScript侦测到的行为。简单理解：触发---响应机制。网页中的每个元素都可以产生某些可以触发JavaScript的 3.2三要1.源（谁2.类型（什么（做啥①获取源（按钮②（绑 ），使用③编写处理程序，写一个函数弹出alert警示varvarbtn btn.onclickfunction(3.3执行的步获取（绑定3.33.4分析三要关闭三要目 DOM目DOM4.4.JavaScriptDOMDOM容、属性等。注意以下都是属性从起始位置到终止位置的内容,但它去除 ，同时空格和换行也会去 4.4.src、4.4.案例：分时显示不 根据不同时间，页面显示不同，同时显示不同的问候语。如果上午时间打开页面，显示上午好，显示上午的。如果下午时间打开页面，显示下午好，显示下午的。如果晚上时间打开页面，显示晚上好，显示晚上的。4.4.②利用多分支语句来设置不同的③需要一个，并且根据时间修 ④需要一个div4.4.DOM4.4. 4.4.①思路：点击眼睛按钮， ②一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换 ③算法：利用一个flag变量，来判断flag的值，如果是1，flag0，果是0就切换 4.4.JS1.1.2.element.className注意JS里面的样式采取驼峰命名法比如fontSize、JS修改style样式操作，产生的是行内样式，CSS4.4.当鼠标点 4.4.①思路：利用样式的显示和隐藏完成， y:none隐藏元素 y:block显示元②点击按钮，就让这 即4.4.varvarbtn varbox //2. btn.onclick=function(){ y='none';4.4.for4.4.①首先精灵图排列有规律②思路：利用for循环修改精 的背景位置background-④让循环里面的i索引号*44就是每 4.4.varvarlisfor(vari=0;i<lis.length;i++)让索引号乘以44就是每个li的背景y坐标index就是我们的y坐标varindex=i*44;lis[i].style.backgroundPosition='0-'+index+}4.4.4.4.①首先表单需要2个 ，获得焦点onfocus失去焦点JS1.1.2.element.className4.4.案例：框格式提示错误信4.4.①首先判断的是表单失去焦点③如果输入不是6到16④因为里面变化样式较多，我们采取classNamesrc、href、title、altsrc、href、title、alttype、value、disabled4.操作元素总结操作元素是DOM内4.4.4.4.给当前元素设置样式（留 4.4.

4.4.①这个案例练习的是给一组元素②给4个小利用循 ③当我们点击了这 ④算法：把当 的src路径取过来，给body做为背景即1.varimgs2.for(vari=0;i<imgs.length;i++)imgs[i].onclick=function().body.style.backgroundImage='url('+this.src+}}4.4.4.4.①用到新的鼠标鼠标经过onmouseover鼠标离开②思路：鼠标经过tr行，当前的行变背景颜色，鼠标离开去掉当前的背景颜③注意：第一行（thead里面的行）tbody4.4.①全选和取消全选做法：让下面所有复选框的checked属性（选中状态）②下面复选框需要全部选中，上面全选才能选中做法：给下面所有复选框绑定点击 要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的，上面全选就不选中。 element.getAttribute(‘属性’);主要获得自定义的属性（标准）我们程序员自定义的属性4.6element.属性=‘值 element.setAttribute(‘属性’);主要设置自定义的属性（标准4.4.4.64.4.案例：tab（重点案例4.4.①Tab栏切换有2②上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） ⑤思路：给上面的tab_list里面的所有小li添加自定义属性，属性值从0开始编号⑥当我们点击tab_list里面的某个小li，让tab_con里面对应序号的内容显示，其余隐藏（4.7H5’)比如<divdata-index=“1”></div>或者使用JS设置element.setAttribute(‘data-index’,2)4.4.4.7H5兼容性获取element.getAttribute(‘data-H5element.dataset.index或者element.dataset[‘index’]ie11目 DOM目DOM5.5.利用DOM提供的方法获取元 2.利用节点层级关系获取元 .querySelector等

5.5. 、属性、文本、注释等），在DOM中，节点使用node来表示HTMLDOM树中的所有节点均可通过JavaScript进 ，所有HTML元素（节点）均可被修改，也可5.5.元素节点nodeType为属性节点nodeType为文本节点nodeType为3（文本节点包含文字、空格、换行等）5.5.利用5.5.利用5.3varvarul.for(vari=0;i<ul.childNodes.length;i++){if(ul.childNodes[i].nodeType==1){ul.childNodes[i}}5.5.5.32.（这个是我们重点掌握的）5.5.5.32.3.3.4.4.5.32.5.5. ementChild返回第一个子元素节点，找不到则返回null6.6. 注意：这两个方法有兼容性问题，IE9以上才支持。5.5.5.3实际开发中，firstChild和lastChild包含其他节点，操作不方便，而 -5.5.5.5.①导航栏里面的li都要有鼠标经过效果，所以需要循 ②原理：当鼠标经过li里面的第二个孩子ul显示，当鼠标离开，则ul隐varvarnavvarlisnav.children得到4个小for(vari=0;i<lis.length;i++){lis[i].onmouseover=function(){ y='block';}lis[i].onmouseout=function(){ y='none';}}5.5.5.31.1.2.2.33.3. 4.4.注意：这两个方法有兼容性问题，IE9以上才支持。3functiongetNex ementSibling(element)functiongetNex ementSibling(element){varel=element;while(el=el.nextSibling){if(el.nodeType===1){return}}return}5.5..createElement(方法创建由tagName指定的HTML元素。因为这些元素原先不存在，1.1.)after2.2.node.insertBefore(child指定元素node.insertBefore(方法将一个节点添加到父节点的指定子节点前面。类似于CSS里面的5.5.5.5.①思路：点击按钮之后，就动态创建一个li，添加到ul里面②创建lili.innerHTMLappendChild5.5.node.removeChild(DOM5.5.5.5.①当我们把文本域里面的值赋值给li②需要把所有的获取过来，当我们点击当前 ③跳转需要添加javascript:void(0);或者5.5.5.6节点(克隆节点) 如果括号参数为true，则是深度拷贝， 5.5.①因为里面的学生数据都是动态的，我们需要js动态生成。这里我们模拟数据，自己定义好数据。数据我们采取对象形式 ②所有的数据都是放到tbody③因为行很多，我们需要循环创建多个行（对应多少人④每个行里面又有很多单元格（对应里面的数据），我们还继续使用循环创建多个单元格，5.8innerHTML是将内容写入某个DOM()总结：不同浏览器下，innerHTML效率要比 ement6DOM6DOM文档对象模型 ObjectModel，简称DOM），是W3C组织推荐的处理可扩展标记语W3CDOMDOM对于HTML，dom使得html形成一棵dom为文档对象模型6DOM6DOM 6DOM6DOM 增6DOM6DOM 删 改修改元素