Dom操作,百读易莱胜
您的位置: 主页 > web前端培训文章 >

js中Dom操作知识点总结【访问量:119】

DOM获取二 
获取 标签节点 或 文本节点  (节点就是内容 文本  或 标签 )
childNodes表示节点的所有子节点(包含标签节点和文本节点),有length属性
childNodes .item(下标) 表示通过子元素的下标莱获取指定的子元素
parentNode表示节点的父节点
firstChild表示某一节点里面第一个节点   
lastChild表示某一节点里面最后一个子节点
nextSibling紧挨着当前节点的下一个节点
previousSibling紧挨着当前节点的上一个节点 
以上红色的 知识点 是用来兼容  低版本的IE浏览器
 
获取 标签节点
children表示元素的所有子元素,有length属性
parentElement表示元素的父元素   
firstElementChild表示某元素里的第一个子元素    注意:IE678不支持
lastElementChild表示某元素里的最后一个子元素  注意:IE678不支持
nextElementSibling紧挨着当前元素的下一个元素  注意:IE678不支持
previousElementSibling紧挨着当前元素的上一个元素 注意:IE678不支持
tagName 获取元素名称
 
 
获取节点 类型、名称、值
nodeType 属性可返回节点的类型 返回的是数字:
元素类型 节点类型
元素element(标签节点) 1
属性attr(属性节点) 2
文本text(文本节点) 3
文档document 9
nodeName 属性指定节点的节点名称。
nodeValue:显示节点的值  ,一般针对于文本 节点和属性节点
 
获取标签属性节点
获取属性的值attributes["id"].nodeValue
设置属性的值attributes["id"].nodeValue=”mt”
获取标签的属性节点个数attributes.length
 
 
设置标签内部的内容:
innerHTML 向当前标签中插入 标签或文本(会替换原本的内容)
innerText 向当前标签中插入文本(会替换原本的内容)
 
设置标签外部的内容:
outerHTML 把当前标签替换成你要插入的标签或文本
outerText 把当前标签替换成你要插入的文本
 
元素的添加或删除
createElement(“div”) 创建元素节点
appendChild(B) 可向节点的子节点列表的末尾添加新的子节点
insertBefore(B,A) 可在已有的子节点A前插入一个新的子节点B
removeChild() 从元素中移除子节点。
replaceChild(新的节点,原来的节点) 新节点替换原来某个子节点。
cloneNode(true|false) 克隆元素
 
 
元素属性的访问和设置
getAttribute(“属性名”) 返回指定属性名的属性值。
setAttribute(“属性名”,”属性值”) 设置指定的属性,并为其赋指定的值。
removeAttribute(“属性名”) 删除指定的属性。
has Attribute(“属性名”) 如果元素拥有指定属性,则返回true,否则返回 false
2018-03-11
匿名评论