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