能源公司网站模板,广州网站排名优化公司,旅游网站源码下载,wordpress 目录菜单DOM 操作 HTML DOM Document Object Model#xff0c;文档对象模型#xff0c;用js操作文档对象 [外链图片转存失败(img-Dygj4uK9-1562680086020)(image/domtree.gif)] 节点#xff1a;构成网页最基本的部分#xff0c;网页的每一部分都是一个节点 文档节点#xff1a;…DOM 操作 HTML DOM Document Object Model文档对象模型用js操作文档对象 [外链图片转存失败(img-Dygj4uK9-1562680086020)(image/domtree.gif)] 节点构成网页最基本的部分网页的每一部分都是一个节点 文档节点元素节点属性节点文本节点 事件用户与浏览器的交互行为 操作事件的两种办法在属性中添加js代码高耦合不推荐绑定事件响应函数 文档的加载: 自顶向下读一行加载一行所以dom应该写在body最后面或者用onload声明整个页面加载完后再执行 scriptwindow.onload function(){// jsCode} /script获取元素节点 getElementById()getElementsByName()返回类数组对象getElementsByTagName()返回类数组对象innerHTML文本节点innerText文本节点没标签 通过具体元素调用 childNodes:所有子节点firstChild第一个子节点lastChild最后一个子节点children所有子元素parentNode:获取当前节点的父节点previousSibling:前一个兄弟节点nextSibling:后一个兄弟节点 **注意:**标签间的空白也会被当成节点,可以使用一下几个获取子元素但不兼容IE8及以下浏览器 firstElementChild:lastElementChild:previousElementSibling:前一个兄弟元素nextElementSibling:后一个兄弟元素 操作元素节点 createElement(): 创建元素节点对象传入标签名的字符串createTextNode():创建文本节点对象传入文本appendChild():向父节点添加一个子节点insertBefore():在父节点的指定子节点前插一个新节点 fatherNode.insertBefore(childNode,newNode);replaceChild():用新节点替换子节点 fatherNode.replaceChild(newNode,oldNode);removeChild()删除当前节点的指定子节点 完整版 属性 / 方法描述element.accessKey设置或返回元素的快捷键。element.appendChild()向元素添加新的子节点作为最后一个子节点。element.attributes返回元素属性的 NamedNodeMap。element.childNodes返回元素子节点的 NodeList。element.className设置或返回元素的 class 属性。element.clientHeight返回元素的可见高度。element.clientWidth返回元素的可见宽度。element.cloneNode()克隆元素。element.compareDocumentPosition()比较两个元素的文档位置。element.contentEditable设置或返回元素的文本方向。element.dir设置或返回元素的内容是否可编辑。element.firstChild返回元素的首个子。element.getAttribute()返回元素节点的指定属性值。element.getAttributeNode()返回指定的属性节点。element.getElementsByTagName()返回拥有指定标签名的所有子元素的集合。element.getFeature()返回实现了指定特性的 API 的某个对象。element.getUserData()返回关联元素上键的对象。element.hasAttribute()如果元素拥有指定属性则返回true否则返回 false。element.hasAttributes()如果元素拥有属性则返回 true否则返回 false。element.hasChildNodes()如果元素拥有子节点则返回 true否则 false。element.id设置或返回元素的 id。element.innerHTML设置或返回元素的内容。element.insertBefore()在指定的已有的子节点之前插入新节点。element.isContentEditable设置或返回元素的内容。element.isDefaultNamespace()如果指定的 namespaceURI 是默认的则返回 true否则返回 false。element.isEqualNode()检查两个元素是否相等。element.isSameNode()检查两个元素是否是相同的节点。element.isSupported()如果元素支持指定特性则返回 true。element.lang设置或返回元素的语言代码。element.lastChild返回元素的最后一个子元素。element.namespaceURI返回元素的 namespace URI。element.nextSibling返回位于相同节点树层级的下一个节点。element.nodeName返回元素的名称。element.nodeType返回元素的节点类型。element.nodeValue设置或返回元素值。element.normalize()合并元素中相邻的文本节点并移除空的文本节点。element.offsetHeight返回元素的高度。element.offsetWidth返回元素的宽度。element.offsetLeft返回元素的水平偏移位置。element.offsetParent返回元素的偏移容器。element.offsetTop返回元素的垂直偏移位置。element.ownerDocument返回元素的根元素文档对象。element.parentNode返回元素的父节点。element.previousSibling返回位于相同节点树层级的前一个元素。element.removeAttribute()从元素中移除指定属性。element.removeAttributeNode()移除指定的属性节点并返回被移除的节点。element.removeChild()从元素中移除子节点。element.replaceChild()替换元素中的子节点。element.scrollHeight返回元素的整体高度。element.scrollLeft返回元素左边缘与视图之间的距离。element.scrollTop返回元素上边缘与视图之间的距离。element.scrollWidth返回元素的整体宽度。element.setAttribute()把指定属性设置或更改为指定值。element.setAttributeNode()设置或更改指定属性节点。element.setIdAttribute()element.setIdAttributeNode()element.setUserData()把对象关联到元素上的键。element.style设置或返回元素的 style 属性。element.tabIndex设置或返回元素的 tab 键控制次序。element.tagName返回元素的标签名。element.textContent设置或返回节点及其后代的文本内容。element.title设置或返回元素的 title 属性。element.toString()把元素转换为字符串。nodelist.item()返回 NodeList 中位于指定下标的节点。nodelist.length返回 NodeList 中的节点数。