Web前端之DOM介绍

　　什么是DOM

　　DOM，Document object model文档对象模型。HTML DOM 定义了访问和操作 HTML 文档的标准方法。

　　DOM 将 HTML 文档表达为树结构，html文件中每个标签都是一个节点node

　　对象是一种独立的数据集合，有对应的属性和方法。

　　而js中对象分类三种：

　　用户定义对象

　　内建对象： Array Date Math

　　宿主对象： 由浏览器提供的

　　DOM中的节点分类

　　元素节点 element node

　　文本节点 text node

　　属性节点 attribute node

　　获取元素节点对象

　　getElementById() 获取单个对象

　　milk

　　fruit

　　meat

　　var eleNode=document.getElementById('foodList');

　　console.log(eleNode); //获取ul中所有内容

　　console.log(typeof eleNode); //object

　　getElementsByTagName() 获取出来的是一个节点对象集合，有点像数组但是不是数组

　　var alist=document.getElementsByTagName('li');

　　console.log(alist); //HTMLCollection(3) [li.item, li.item, li]

　　getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。

　　var aitem=document.getElementsByClassName('item');

　　console.log(aitem); //HTMLCollection(2) [li.item, li.item]

　　getAttribute()获取属性值 。 有一个必须的参数，这个节点对象的名字。

　　我们这啥都有

　　var oP=document.getElementsByTagName('p')[0];

　　var title=oP.getAttribute('title');

　　var className=oP.getAttribute('class');

　　console.log(title);//打印出title的内容:选出你要吃的东西

　　console.log(className);//p里面没有class：null

　　setAttribute()设置属性值。

　　oP.setAttribute('id','box');//在p标签加上一个id=box

　　节点属性

　　nodeName节点名称

　　nodeName属性：

　　nodeName属性:节点的名称,是只读

　　1、 元素节点的nodeName与标签名相同

　　2、 属性节点的nodeName与属性的名称相同

　　3、文本节点的nodeName永远是#text

　　4、 文档节点的nodeName永远是#document

　　5、 注释节点的nodeName永远是#comment

　　nodeValue节点的值

　　nodeValue属性:节点的值

　　1.元素节点的nodeValue是undefined 或null

　　2.文本节点的nodeValue是文本自身

　　3.属性节点的nodeValue是属性的值

　　nodeType节点类型

　　nodeType属性:节点的类型,是只读的。

　　以下常用的几种节点类型:

　　元素类型 节点类型

　　元素 1

　　属性 2

　　文本 3

　　注释 8

　　文档 9

　　示例：

　　ppt

　　yaner

　　lulu

　　lalla

　　这是一个文本

　　//1.元素节点

　　var aDiv=document.getElementById('box');

　　console.log(aDiv.nodeName+'*'+aDiv.nodeValue+'*'+aDiv.nodeType);//DIV*null*1

　　//2.获取属性节点

　　var gAttr=aDiv.attributes[0];

　　console.log(gAttr.nodeName+'*'+gAttr.nodeValue+'*'+gAttr.nodeType);//id*box*2

　　//3.获取文本节点

　　var gText=aDiv.childNodes[0];

　　console.log(gText.nodeName+'*'+gText.nodeValue+'*'+gText.nodeType);//#text*这是一个文本*3

　　//4.获取注释节点

　　var gComment=aDiv.childNodes[1];

　　console.log(gComment.nodeName+'*'+gComment.nodeValue+'*'+gComment.nodeType);//#comment* 这是注释 *8

　　//5.验证文档节点类型

　　console.log(document.nodeType);//9

　　节点对象常用属性

　　获取子节点childNodes

　　获取第一个子节点firstChild

　　获取最后一个子节点lastChild

　　获取父节点parentNode

　　获取上一个兄弟节点nextSibling

　　获取下一个兄弟节点previousSibling

　　示例：无锡人流医院哪家好 http://www.wxbhnkyy120.com/

　　//如果换行会被读取为#text

　　console.log(aFather.childNodes);//获取子节点

　　console.log(aFather.childNodes[0]);//获取第一个子节点

　　console.log(aFather.firstChild);//获取第一个子节点

　　console.log(aFather.childNodes[aFather.childNodes.length-1]);获取最后一个子节点

　　console.log(aFather.lastChild);//获取最后一个子节点

　　console.log(aFather.parentNode);//获取父节点整个body

　　console.log(aFather.parentNode.parentNode);//获取父亲的父亲节点

　　console.log(aFather.nextSibling);//获取下一个兄弟

　　console.log(aFather.previousSibling);//获取上一个兄弟

　　动态地操作节点

　　1.创建节点createElement()

　　2.插入节点appendChild()

　　在参考节点前面插入insertBefore ( newNode, node)

　　3.删除节点removeChild()

　　4.替换节点replaceChild()

　　5.创建文本节点createTextNode()

　　innerHTML可以在newNode节点中添加文本、标签等等

　　示例：

　　i ppt

转载于:https://www.cnblogs.com/gnz49/p/11384245.html