

首页  思维导图  详情



Dom知识结构

2021-04-12 19:01:26   8  举报





AI智能生成

Dom知识结构

前端

模版推荐

作者其他创作

大纲/内容

节点操作

子节点

childNodes

元素.childNodes--------元素的所有子节点，包含文本节点，元素节点

元素.childNodes[0]--------第一个节点，包含文本，元素节点

chiidren

元素节点的集合，所有浏览器下都是元素节点，有一点需要注意的是：

标准下包含非法嵌套的元素节点

非标准下不包含非法嵌套的元素节点

第一个子节点

firstChild

firstElementChild

兼容写法

var oFirst=元素.firstElementChild||元素.firstChild;

举例：给oUl的第一个元素加上红色背景

注意点：需要判断第一个元素是否存在

最后一个子节点

lastChild

lastElementChild

兼容写法

var oLast=元素.lastElementChild||元素.lastChild

举例：还给oUl的最后一个元素加上共色背景

注意点：需要判断最后一个元素是否存在

兄弟节点

上一个兄弟节点

previousSibling

previousElementSibling

兼容写法

var oPrev=元素.previousElementSibling||元素.previousSibling

举例：给上一个元素添加红色背景

注意点：需要判断上一个元素是否存在

元素.previousSibling含文本节点，所有oPrev要判断节点类型

下一个兄弟节点

nextSibling

nextElementSibling

兼容写法

var oNext=元素.nextElementSibling||元素.nextSibling

父节点

普通父节点

parentNode

定位父节点

offsetParent

其他

常用节点类型三个

元素节点

元素.NodeType返回值是1

属性节点

元素.NodeType返回值是2

文本节点

元素.NodeType返回值是3

nodeType

元素.nodeType 返回数字，代表节点类型

nodeValue

元素.nodeValue 节点值

一般针对文本节点，针对元素节点返回的都是null，举例看备注

nodeName

元素.nodeName 节点名称

attributes

元素.attributes 元素的属性列表集合

元素.attributes[0] 单个属性

元素.attributes[0].name------代表元素第0个属性的名称

元素.attributes[0].value------代表元素第0个属性的值

定位属性

offsetLeft、offsetTop

ie7及以下

如果元素自身无定位，那么元素.offsetLeft/offsetTop是到body的距离

如果元素自身有定位，那么元素.offsetLeft/offsetTop就是到定位父级的距离，如果没定位父级，就是到html的距离

其他

到定位父级的距离

offsetParent

元素的定位父级节点

注意：如果上面两个都没有找到定位父级，则

以上offsetLeft、offsetTop是到html

以上offsetParent是到body

样式相关

样式宽高

元素.style.width

注意：只能获取行间样式的宽高

注意：含单位

可视宽高

元素.clientWidth

可视宽=样式宽+padding

注意：不含单位

占位宽高

元素.offsetWidth

占位宽=样式宽+padding+border=可视宽+border

注意：不含单位

元素的操作

创建元素

var oLi=document.creatElement(&apos;li&apos;)

添加元素

从前面添加

父级.appendChild(要添加的元素)

从后面添加

父级.insertBefore(要添加的元素，被插入的元素)

兼容版

删除元素

父级.removeChild(要删除的元素);

剪切并替换元素

父级.replaceChild(新节点，被替换的节点)

克隆节点(元素)

要克隆的元素.cloneNode(false)

举例：oUl.cloneNode(false),就只克隆&lt;ul&gt;&lt;/ul&gt;

要克隆的元素.cloneNode(true)

举例：oUl.cloneNode(true);克隆的是&lt;ul&gt;&lt;li&gt;&lt;/li&gt;...&lt;/ul&gt;

元素属性操作

获取属性

获取指定元素的指定属性

元素.getAttribute(属性名称);

举例：oText.getAttribute(&apos;value&apos;)

设置属性

给制定元素的属性设置值

元素.setAttribute(属性名称，属性值)

举例：oText.setAttribute(&apos;value&apos;,&apos;hello&apos;)

移除属性

移除制定元素的制定属性

元素.removeAttribute(属性名称)

举例：oText.removeAttribute(&apos;value&apos;)

class相关

移除class

添加class

表单与表格

表格的五脏六腑

表格头（只有一个）：tHead

举例：oTab.tHead.style.background=&apos;red&apos;;

表格正文（可以有多个）：tBodies

举例：oTab.tBodies[0].rows[0].cells[0].innerHTML=&apos;1&apos;

表格尾部（只有一个）：tFoot

举例：oTab.tFoot.style.background=&apos;red&apos;;

表格行列

行：rows

举例：oTab.tBodies[0].rows.style.backgroud=&apos;red&apos;;

举例：oTab.tBodies[0].rows[0].style.backgroud=&apos;red&apos;;

列：cells

举例：oTab.tBodies[0].cells.style.backgroud=&apos;red&apos;;

举例：oTab.tBodies[0].rows[0].style.backgroud=&apos;red&apos;;

举例：oTab.tBodies[0].rows[0].cells[0].style.backgroud=&apos;red&apos;;

表单的五脏六腑

表单的操作

操作一个表单只要操作其name就可以了

表单的事件

onchange事件

当值发生改变的时候触发

举例：见备注

onsubmit事件

点击提交直接跳转到提交页

注意点

注意1：当input为radio单选的时候，name都为同一个，比如说name=‘sex’，这时候oForm.sex是不对的，要用for等遍历所有的sex[I]

select

注意；详见备注

 Collect

Get Started

结构章节知识汇总

 Collect

Get Started

Dom知识结构

 Collect

Get Started

第十二章 DOM2和DOM3

 Collect

Get Started

自身知识结构





0 条评论

下一页