JS—DOM元素

  • 节点树种节点之间的关系,父子、兄弟
  • 节点种类:元素节点、文本节点、属性节点。
  • getElementById():获取特定 ID 元素的节点
    1. window.onload = function () { //预加载 html 后执行
  • getElementsByTagName(): 获取相同元素的节点列表
    1. 返回数组,使用[0]来获取
  • getElementsByName() :获取相同名称的节点列表
    1. 不是所有标签都有name属性
    2. 某些低版本浏览器会有兼容性问题
  • getElementsByClassName()

返回数组,使用[0]来获取

  • getAttribute() 获取特定元素节点属性的值
    1. 获取自定义属性时, oDiv.xxx ,  IE支持,其他浏览器不支持,因此要采用这个方法来访问
  • setAttribute() 设置特定元素节点属性的值
    1. IE低版本浏览器不支持这个方法
  • removeAttribute() 移除特定元素节点属性 
    1. 某些低版本浏览器不支持
  • 访问元素节点的属性
    1. tagName 获取元素节点的标签名
    2. innerHTML 获取元素节点里的内容
    3. outerHTML/innerText,非 W3C DOM 规范
    4. id 元素节点的 id 名称
    5. title 元素节点的 title 属性值(鼠标悬停时的提示)
    6. style  CSS内联样式属性值
  • node 节点属性
    1. 节点可以分为元素节点、属性节点和文本节点,而这些节点又有三个非常有用的属性 ,分别为:nodeName、nodeType 和 nodeValue。
    2. 节点属性nodeName、 nodeType、 nodeValue元素1 属性 2 文本 3
    3. 节点的属性列表:
    4. childNodes 获取当前元素节点的所有子节点
    5. firstChild 获取当前元素节点的第一个子节点
    6. lastChild 获取当前元素节点的最后一个子节点
    7. ownerDocument 获取该节点的文档根节点,相当与 document
    8. parentNode 获取当前节点的父节点
    9. previousSibling 获取当前节点的前一个同级节点
    10. nextSibling 获取当前节点的后一个同级节点
    11. attributes 获取当前元素节点的所有属性节点集合
  • childNodes 属性
    1. 返回元素节点和文本节点两种
    2. 使用nodeName来获取元素的标签名称
    3. 使用nodeValue来获取文本内容
    4. 使用nodeType来判断到底是哪个节点(元素1 属性 2 文本 3)
  • innerHTML 和 nodeValue
    1. box.childNodes[0].nodeValue = '<strong>abc</strong>';
    2. box.innerHTML = '<strong>abc</strong>';
    3. 使用nodeValue,标签会被转义,然后在页面上原样输出
  • attributes 属性
    1. document.getElementById('box').attributes //NamedNodeMap
    2. document.getElementById('box').attributes.length;//返回属性节点个数
    3. document.getElementById('box').attributes[0]; //返回最后一个属性节点
    4. document.getElementById('box').attributes[0].nodeType; //2,属性
    5. document.getElementById('box').attributes[0].nodeValue; //属性值
    6. document.getElementById('box').attributes['id']; //返回属性为 id 的节点
    7. document.getElementById('box').attributes.getNamedItem('id'); //
  • 忽略空白文本节点
    1. body.childNodes.length
    2. 在低版本IE中,会自动忽略掉空白的文本节点,其他浏览器不会忽略
    3. 可以编写一个手工过滤空白节点的方法
    4. 或者编写一个删除空白节点的方法
    5. 匹配空白节点可以使用正则:/^s+$/.test(box.nodeValue)
  • 节点操作
    1. DOM 不单单可以查找节点,也可以创建节点、复制节点、插入节点、删除节点和替换节点
    2. write()
    3. createElement()
    4. createTextNode()
    5. appendChild()
    6. insertBefore()
    7. removeChild()
  • offsetParent(参照物父元素)
    1. 当某个元素的父元素或以上元素都未进行CSS定位时,则返回body元素,也就是说元素的偏移量(offsetTop、offsetLeft)等属性是以body为参照物的
    2. 当某个元素的父元素进行了CSS定位时(absolute或者relative),则返回父元素,也就是说元素的偏移量是以父元素为参照物的
    3. 当某个元素及其父元素都未进行CSS定位时,则返回距离最近的使用了CSS定位的元素。

 

©️2020 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页