版dom编程艺术笔记基础

1、网易微专业之前端开发工程DOM 编程艺术基础网易微专业之前端开发工程DOM 编程艺术基础篇（一一、文档DOMObject（文档对象模型）”，它是由W3C记住，DOMDOMDOMDOMDOMDOMDOM-1可以通过DOM来操作页面中各种图左边的HTML 文档用DOM在 DOM 中，每一个元素看成一个节点，而每一个节点就是一个“对象在DOM 中，遍历HTML图左边的HTML 文档用DOM在 DOM 中，每一个元素看成一个节点，而每一个节点就是一个“对象在DOM 中，遍历HTMLlastChild、previousSiblingnextSibling-21上图中、div。2.文本节点:向用户展示的内

2、容，如.中 3的属性在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM1上图中、div。2.文本节点:向用户展示的内容，如.中 3的属性在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：nodeName : 节点的名称nodeValue ：节点的值nodeType ：节点的类型一、nodeName 属性: -31. 元素节点的 nodeName 与2. 属性节点的 nodeName 是属性的名称文本节点的 文档节点的 是 是 #二、nodeValue 属性：元素节点的 nodeValue 是 undefined 或 文本节点的 nodeValue

3、是文本自身1. 元素节点的 nodeName 与2. 属性节点的 nodeName 是属性的名称文本节点的 文档节点的 是 是 #二、nodeValue 属性：元素节点的 nodeValue 是 undefined 或 文本节点的 nodeValue 是文本自身属性节点的 nodeValue 是属性的值三、nodeType 属性: 12389元素遍Javascript children 其中，nodeObject 为节点对象（元素节点），返回值为所有子节点的集合（数组）id=demo 注意：在IE 中，children 是希望获取元素节点以通过 nodeType 属性来进行筛选nodeType

4、=1-4如何实现浏览器兼容版的二、节点操获取节-5如何二、节点操获取节-5如何实现浏览器兼容版的 var = element.childNodes;for (var i=0;i ist.length;i+)if isti.nodeType=1)return return 示例span 示例span -6-7-7ameIE6创建节ameIE6创建节-8-9-9创建文本节点 createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。createElement&innerHTML创建文本节点 createTextNode() 方法创建新的文本节点，返回新创建的 Text

5、节点。createElement&innerHTML以下代码是createElement & innerHTML -10-11-12-12应用-ement-修改节应用-ement-修改节-13textContent 是 W3C 定义的标准，而 innerText FF innerTexttextContent 是 W3C 定义的标准，而 innerText FF innerText 解决方innerHTMLVS在JavaScriptinnerHTML 和innerText2innerHTMLinnerTextIE、chrome而不被Firefox-14束标记。设置该属性可以用于为指定的HTML

6、 删除节-15删除节-15容。即使指定的是HTML应用replaceChild=：remove三、属HTMLattribute DOM应用replaceChild=：remove三、属HTMLattribute DOMpropertyproperty属性读sor:属器属性写-16属性类属的属性，是转换过的实用对象器特点通用性 属性类属的属性，是转换过的实用对象器特点通用性 -读扩展性 tribute 进行属性操-17写类-写类-18仅字符串 tribute 进行属性仅字符串 tribute 进行属性操作特-19HTML5可以前缀设需要的自定义属性放。DOM 对象中有个 dataset 属性对象

7、，可以在该对象中存一些与该 DOM 如上写法是在生成 dom对象时对 dataset的一个初始化的动作，dataset中会存在一个 属性、/mobile 属性。这里需要注意 data缀，在生成 DOM对象时所有已 data-开头的属性会将其去掉前缀 data-后存在 dataset需要注意的是 dataset 案例。HTML lidata-id=123456data-account-lidata-id=123457data-account-HTML5可以前缀设需要的自定义属性放。DOM 对象中有个 dataset 属性对象，可以在该对象中存一些与该 DOM 如上写法是在生成 dom对象时对 d

8、ataset的一个初始化的动作，dataset中会存在一个 属性、/mobile 属性。这里需要注意 data缀，在生成 DOM对象时所有已 data-开头的属性会将其去掉前缀 data-后存在 dataset需要注意的是 dataset 案例。HTML lidata-id=123456data-account-lidata-id=123457data-account-divid=cardcaption：td邮箱：td：tdCSS -20JSfunctionreturn var lis = for(vari=0,li;li=lisi;li.onmouseenter=event=event|va

9、r user = event.|event.srcElement; var data = user.dataset;$(accountName).innerText=$(name).innerText=).innerText=;$(mobile).innerText=$(card).style.display=li.onmouseleave=$(card).style.display=ie 上兼容类似的功能。参JSfunctionreturn var lis = for(vari=0,li;li=lisi;li.onmouseenter=event=event|var user = event

10、.|event.srcElement; var data = user.dataset;$(accountName).innerText=$(name).innerText=).innerText=;$(mobile).innerText=$(card).style.display=li.onmouseleave=$(card).style.display=ie 上兼容类似的功能。参四、样式操-21（待补充licursor:default;line-height:th,td,captionpadding:10px;border:1pxsolid#ddd;font-size:thcolor:ca

11、ptionfont-size:20px;font-weight:bold;border-bottom:absolute;top:10px;left:内嵌样式表更新样内嵌样式表更新样-22不Script scriptUtil.addEventListener($(create0),不Script mouseover(A)-mouseenter(A)-mousemove(A)-MouseEvent 顺序 -mousemove-mouseover(A)-mouseenter(A)-mousemove(A)-mouseout(A)- 点击元-mousedown-mousemove-mouseup-例子-HTML CSSstyleJS -31border:1pxsoliddivWheelEvent-滚轮事WheelEvent 对象属WheelEvent-滚轮事WheelEvent 对象属FocusEvent-焦点事-32FocusEvent InputEvent- 输入