节点和创建方法

节点:

了解节点首先要理解什么是DOM树状图,
例如:html的子元素有head和body组成;head又有tittle和meta组成,dody也有各种子元素构成。于是在结构上就形成了像树枝分叉一样的结构,一般我们就将这种结构称为DOM树状图
节点的类型一般分为12种,在这里就拿其中几种比较常见的类型讲解他们的属性操作
节点操作:

1.nodeName:节点名称。
元素    大写的标签类型
注释    #comment
文档    #document
文本    #text
属性    就是属性名称,例如id。
**注意**:空白折叠区域会被高级的浏览器认为是一个文本节点,IE在在这方面反而不会出现这种错误。
2.nodeType:节点类型
上面说了节点类型一共有12种,一般会用数字来表示其中常用的几种有:
元素  1
属性  2
文本  3
注释  8
文档  9
....
3.nodeValue:节点值
文本  字符串
元素  null
属性  属性值
注释  注释内容
文档  null

节点的关系:

注意:在操作节点关系前应该先将元素获取。
1.父子关系

1.获取所有子节点
元素.childNodes;
2.获取所有元素节点
元素.children;
3.第一个子节点
元素.fristChild;
4.第一个元素节点
元素.fristElementChild;
5.最后一个子节点
元素.lastChild;
6.最后一个元素节点
元素.lastElementChild;

2.子父关系

元素.parentNode;

3.兄弟关系

1.前一个兄弟
元素.perviousSibling;
2.前一个元素兄弟
元素.perviousElementSibling;
3.下一个兄弟
元素.nextSibling;
4.下一个元素兄弟
元素.nextElementSibling;

创建节点

1.创建元素的方法:

var div = document.createElement(" div ");

2.创建文本节点

var text = document.createTextNode;

3.创建注释节点

var comment = document.createComment;

创建的元素是没有在树上的,因此也叫孤儿节点。
下期更上树方法。

    原文作者:Silver Scrapes
    原文地址: https://blog.csdn.net/ZhangXiaoTianZC/article/details/101430698
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞