Dom知识结构
2021-06-18 16:48:04 0 举报
AI智能生成
Dom知识结构
作者其他创作
大纲/内容
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
举例:给下一个元素添加红色背景
注意:需要判断上一个元素是否存在
元素.nextSibling含文本节点,所有oNext要判断节点类型
父节点
普通父节点
parentNode
注意:元素节点,无兼容问题
定位父节点
offsetParent
注意:如果没有定位父级,默认定位父级为body,ie7以下为html
其他
常用节点类型三个
元素节点
元素.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的距离
到定位父级的距离
元素的定位父级节点
注意:如果上面两个都没有找到定位父级,则
以上offsetLeft、offsetTop是到html
以上offsetParent是到body
样式相关
样式宽高
元素.style.width
注意:只能获取行间样式的宽高
注意:含单位
可视宽高
元素.clientWidth
可视宽=样式宽+padding
注意:不含单位
占位宽高
元素.offsetWidth
占位宽=样式宽+padding+border=可视宽+border
元素的操作
创建元素
var oLi=document.creatElement('li')
添加元素
从前面添加
父级.appendChild(要添加的元素)
从后面添加
父级.insertBefore(要添加的元素,被插入的元素)
注意1:这里有两个参数的
注意2:在IE下,第二个参数的节点不存在会报错,在其他浏览器下,第二个参数的节点不存在,则会以appendChild的形式添加
兼容版
删除元素
父级.removeChild(要删除的元素);
剪切并替换元素
父级.replaceChild(新节点,被替换的节点)
克隆节点(元素)
要克隆的元素.cloneNode(false)
注意:这个表示只克隆元素本身,不克隆元素里面的内容
要克隆的元素.cloneNode(true)
注意:这个表示不仅克隆元素本身,还克隆元素内部的内容,克隆的范围类似outerHTML
举例:oUl.cloneNode(true);克隆的是<ul><li></li>...</ul>
元素属性操作
获取属性
获取指定元素的指定属性
元素.getAttribute(属性名称);
举例:oText.getAttribute('value')
设置属性
给制定元素的属性设置值
元素.setAttribute(属性名称,属性值)
移除属性
移除制定元素的制定属性
元素.removeAttribute(属性名称)
举例:oText.removeAttribute('value')
注意点:如果有自定义属性 _name_='w3c'
注意点1:用.和[]无法再标准下操作自定义属性,但是用getAttribute可以操作元素的自定义属性
注意点2:oImg.src和oImg[src]只可写,不可读,但是oImg.Attribute('src')可读,即可以作为判断条件(ie7以上可读)
class相关
移除class
添加class
表单与表格
表格的五脏六腑
表格头(只有一个):tHead
举例:oTab.tHead.style.background='red';
表格正文(可以有多个):tBodies
举例:oTab.tBodies[0].rows[0].cells[0].innerHTML='1'
表格尾部(只有一个):tFoot
举例:oTab.tFoot.style.background='red';
表格行列
行:rows
举例:oTab.tBodies[0].rows.style.backgroud='red';
举例:oTab.tBodies[0].rows[0].style.backgroud='red';
列:cells
举例:oTab.tBodies[0].cells.style.backgroud='red';
举例:oTab.tBodies[0].rows[0].cells[0].style.backgroud='red';
表单的五脏六腑
表单的操作
操作一个表单只要操作其name就可以了
举例:见备注
表单的事件
onchange事件
当值发生改变的时候触发
注意:是焦点离开的时候才会触发
onsubmit事件
点击提交直接跳转到提交页
阻止提交
在onsubmit时间中庸return false阻止默认提交,详见备注
注意点
注意1:当input为radio单选的时候,name都为同一个,比如说name=‘sex’,这时候oForm.sex是不对的,要用for等遍历所有的sex[I]
select
注意;详见备注
0 条评论
回复 删除
下一页