JavaScript 中的DOM1

DOM 文档对象模型

文档对象模型：定义 为了能够让程序(js)去操作页面中的元素

节点层次

节点之间的关系构成了节点层次，html 页面的可以画出一个以html标签为根节点的树形结构
DOM会把文档看作是一棵树，同时定义了很多方法来操作这棵数中的每一个元素（节点）

    Document    hello world!!!

每个节点都有一个nodeType属性，用于表明节点的类型。DOM节点类型有12种。。。。

其中：

graph LR1-->元素节点2-->文本节点3-->属性节点

Documenthello world!!!    var oP = document.getElementById('p1');    alert(oP.nodeType); // 1

节点关系

childNodes 子节点列表集合（只读属性 有兼容性问题 ）

1. 111111. 222221. 33331. 44444var oUl = document.getElementById('ul1');console.log(oUl.childNodes);

从截图中可以看出 这段代码中ul的子节点有9个，这说明使用childNodes获取的节点包括了文本节点和元素节点

childNodes 在低版本的ie 浏览器下获取的节点只包括元素节点，这就导致了兼容性问题

如何解决兼容性？？

根据子节点的nodeType属性值判断

for (var i=0; i

children 子节点列表集合（只读属性 推荐使用 ）

children 获取的子节点只包含元素节点

for (var i = 0; i

firstChild （firstElementChild） lastChild (lastElementChild) 第一个子节点 最后一个子节点

firstChild 、lastChild 和childNodes同样的存在兼容性问题，在低版本ie浏览器中只能获取到元素节点

firstElementChild 、 lastElementChild 获取第一个元素子节点，最后一个元素子节点 推荐使用

var oUl = document.getElementById('ul1');

// oUl.firstChild.style.background = 'red';//标准浏览器 报错
// oUl.lastChild.style.background = 'red';//标准浏览器 报错

oUl.firstElementChild.style.background = 'red';
oUl.lastElementChild.style.background = 'red';

nextSibling nextElementSibling 下一个兄弟节点 previousSibling previousElementSibling 上一个兄弟节点

nextSibling previousSibling 存在兼容性问题

nextElementSibling previousElementSibling 推荐使用

var oUl = document.getElementById('ul1');var firstEle = oUl.firstElementChild;var lastEle = oUl.lastElementChild;firstEle.nextElementSibling.style.background = 'red';lastEle.previousElementSibling.style.background = 'green';

parentNode 当前节点的父级节点

实例： 点击 删除 父级节点的 li

    1. 11111删除    1. 22222删除    1. 33333删除    1. 44444删除    var aA = document.getElementsByTagName('a');    for (var i=0; i

关键字：JavaScript, 节点, 兼容性, 子节点

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！