JavaScript关于DOM初了解的个人笔记

DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系

一、查找元素节点

首先我们要了解什么是document:通过下图我们能够了解到，document代表整个文档，就算html标签都是它的子元素

以下标签有实时性（先找到元素，后面再动态添加时，结果中依旧可以找到）
1.document.getElementById() :
元素id 在Ie8以下的浏览器，不区分id大小写，而且也返回匹配name属性的元素
2.document.getElementsByTagName() :
标签名
3.document.getElementsByName();:
IE不支持需注意，只有部分标签name可生效（表单，表单元素，img，iframe）
4.document.getElementsByClassName() :
类名 -> ie8和ie8以下的ie版本中没有，可以多个class一起

var getId = document.getElementById('box');//id只有一个
var getClass = document.getElementsByClassName('content')[0];
//class可以重复多个，所以返回的是数组，需要取索引0
var getTN = document.getElementsByTagName('div');
//标签可以重复多个，所以返回的是数组，如果不写索引返回数组存储找到的目标

以下标签非实时性（先找到元素，后面再动态添加时，结果中不会包含新增的元素）
1.document.querySelector() ：
css选择器，仅仅返回匹配指定选择器的第一个元素，在ie7和ie7以下的版本中没有
2.document.querySelectorAll() ：
css选择器，返回所有找到的元素，在ie7和ie7以下的版本中没有

var cont1 = document.querySelector('.content');//id则#demo；直接找标签名怎输入标签名
var cont2 = document.querySelectorAll('.content');

注：HTMLDocument.prototype定义了一些常用的属性，body,head,分别指代HTML文档中的标签；documentElement属性，指代文档的根元素，在HTML文档中，他总是指代元素

二、遍历节点树

这里的节点包括元素节点、属性节点、文本节点、注释节点…
1.查看父节点：parentNode (最顶端的parentNode为#document);

var p = document.getElementsByTagName('p')[0];//只有一个父亲
console.log(p.parentNode);

找到p的父节点div.box，

2.查看子节点们：ChildNodes

var div = document.getElementsByTagName('div')[0];//父亲可以有多个儿子
console.log(div.childNodes);
//注意，div和a之间的回车也算文本节点，只是你没输入；a和p之间同理...

最后找到七个子节点

3.第一个子节点：firstChild

var div = document.getElementsByTagName('div')[0];
console.log(div.firstChild);
//和前面子节点同理，div和p之间有文本节点，所以第一个肯定是文本节点

找到文本节点

4.最后一个子节点：lastChild

var div = document.getElementsByTagName('div')[0];
console.log(div.lastChild);//同理，不多解释

找到文本节点

5.后一个兄弟节点 / 前一个兄弟节点：nextSibling / previousSibling

var p = document.getElementsByTagName('p')[0];
console.log(p.nextSibling);
console.log(p.previousSibling);//这里不要被前后元素便签迷惑，中间还有文本节点

6.节点的类型，获取节点类型方法：nodeType（这里先知晓，后期封装兼容性方法会用到）

var div = document.getElementsByTagName('div')[0];
console.log(div.nodeType);

元素节点——1
属性节点——2
文本节点——3
注释节点——8
document——9
…

三、元素节点树的遍历

这里才是操作元素节点
1.返回当前元素的父元素节点：parentElement (IE不兼容)

var p = document.getElementsByTagName('p')[0];
console.log(p.parentElement);

找到元素父节点div.box

2.只返回当前元素的元素子节点：children

var div = document.getElementsByTagName('div')[0];
console.log(div.children);

这里就只有元素节点了

3.当前元素节点的子元素节点个数：node.childElementCount / node.children.length(IE不兼容)

var div = document.getElementsByTagName('div')[0];
console.log(div.childElementCount);
console.log(div.children.length);

4.返回的是第一个元素节点：firstElementChild (IE不兼容)

var div = document.getElementsByTagName('div')[0];
console.log(div.firstElementChild);

5.返回的是最后一个元素节点：lastElementChild (IE不兼容)
同上，就不再演示了
6.返回后一个/前一个兄弟元素节点：nextElementSibling / previousElementSibling（IE不兼容)
同上，就不再演示了

四、节点的四个属性

1.nodeName：元素的标签名，以大写形式表示,只读

var div = document.getElementsByTagName('div')[0];
console.log(div.nodeName);

2.nodeValue：Text节点或Comment（注释）节点的文本内容,可读写

var div = document.getElementsByTagName('div')[0];
console.log(div.firstChild.nodeValue);//可读
div.firstChild.nodeValue = 456;//可写
console.log(div.firstChild.nodeValue);

这里也可以看出nodeValue没有实时性，后面更改时，前面的不会做出改变

3.nodeType：该节点的类型，只读
前面已经演示
4.attributes：Element 节点的属性集合

var div = document.getElementsByTagName('div')[0];
console.log(div.attributes);

这里是元素节点的属性集合

五、习题练习

1.遍历元素节点树，要求不能用children属性
2.封装函数，返回元素e的第n层祖先元素
3.封装函数，返回元素e的第n个兄弟节点，n为正，返回后面的兄弟节点，n为负，返回前面的，n为0，返回自己。
答案下期揭晓

博主开始运营自己的公众号啦，感兴趣的可以关注“飞羽逐星”微信公众号哦，拿起手机就能阅读感兴趣的博客啦！