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