Dom知识结构
2021-04-12 19:01:26 7 举报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
父节点
普通父节点
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的距离
到定位父级的距离
元素的定位父级节点
注意：如果上面两个都没有找到定位父级，则
以上offsetLeft、offsetTop是到html
以上offsetParent是到body
样式相关
样式宽高
元素.style.width
注意：只能获取行间样式的宽高
注意：含单位
可视宽高
元素.clientWidth
可视宽=样式宽+padding
注意：不含单位
占位宽高
元素.offsetWidth
占位宽=样式宽+padding+border=可视宽+border
元素的操作
创建元素
var oLi=document.creatElement('li')
添加元素
从前面添加
父级.appendChild(要添加的元素)
从后面添加
父级.insertBefore(要添加的元素，被插入的元素)
兼容版
删除元素
父级.removeChild(要删除的元素);
剪切并替换元素
父级.replaceChild(新节点，被替换的节点)
克隆节点(元素)
要克隆的元素.cloneNode(false)
要克隆的元素.cloneNode(true)
举例：oUl.cloneNode(true);克隆的是<ul><li></li>...</ul>
元素属性操作
获取属性
获取指定元素的指定属性
元素.getAttribute(属性名称);
举例：oText.getAttribute('value')
设置属性
给制定元素的属性设置值
元素.setAttribute(属性名称，属性值)
移除属性
移除制定元素的制定属性
元素.removeAttribute(属性名称)
举例：oText.removeAttribute('value')
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事件
点击提交直接跳转到提交页
注意点
注意1：当input为radio单选的时候，name都为同一个，比如说name=‘sex’，这时候oForm.sex是不对的，要用for等遍历所有的sex[I]
select
注意；详见备注
0 条评论
回复 删除
下一页
