DOM的基本操作，节点的基本属性

前言

作为小白一直在学习web的路上慢慢摸索，之前也不知道怎么写一篇博客，但是，这不，第一篇博客就这么很突然地在一个午后决定开始写了。最近在学习dom的相关知识，大概总结一下。

什么是DOM？

DOM是w3c标准，全称Document Object Model，翻译为文档对象模型。DOM定义了表示和修改文档所需的方法。DOM对象，即为宿主对象，由浏览器厂商定义，用来操作HTML和XML功能的一类对象的集合。也有人称DOM是对HTML以及XML的标准编程接口。

DOM的基本操作

对于对象、数组，我们的基本操作都为增删改查插，对于DOM来说，也是相同。

增加

DOM的最基本的增有三种：

1.document.createElement();
//这个方法是创建一个元素节点，即标签，但是生成的标签在js里面，不会在页面生成，我们平时用的较多，建议重点掌握。
2.document.createTextNode();//创建文本节点
3，document.createComment();//创建注释节点
//DOM的增操作一般和插入操作一起

删除

DOM的删除有两种：谋杀和自杀。

1.parent.removeChild(要被删除的标签);
//相当于父杀子的谋杀，但实际上可以等同于剪切，被删除的值会被保留
ep:
var div = document.getElementsbyTagName('div')[0];//取出div标签
var span = document.getElementsbyTagName('span')[0];
var strong = document.createElement('strong');//创建strong标签
var i = document.creatElement('i');
div.insertBefore(strong,span);//把strong插入到span前面
div.insertBefore(i,strong);
div.removeChild(i);  //删除i
//运行结果为--> <i> <i>
2.child.remove();
//可以理解为一个人不想存在，然后抹杀了自己的存在，即自杀，删除了就不在存在
strong.remove();//strong的自我删除

修改

在DOM里面，修改即替换

方法如下：

parentNode.replaceChild(new，origin);
//用新的去替换旧的，原先旧的会被剪切出来

插入

DOM的插入操作对于我们来说会使用的十分频繁，一定要好好掌握！共有两种方法：

1.appendChild(标签名);
//剪切操作，通过这个方法我们可以把一个创建好的标签插入到另外一个标签，可以理解为.push
ep：
var div = document.getElementsbyTagName('div')[0];//取出div标签
var span = document.getElementsbyTagName('span')[0];
var strong = document.createElement('strong');//创建strong标签
var i = document.creatElement('i');
div.appendChild(span);//把span放到div里面2.insertBefore(a,b);
//这个方法的意思为在父级元素里面插入一个值，即在b之前插入a，insert a,before b。
div.insertBefore(strong,span);//在span前面插入strong
结果应该为：
<div>
<strong> <strong>
<span> <span>
<div>

查询

DOM的查询应该是我们重点掌握的对象，方法如下：

1.document.getElementById();
//通过id标签去选出元素，注意：选出的是单个元素
2.document.getelementsByTagName();
//通过标签名来选出一组元素
例如：
var div = document.getElementsByTagName('div')[0];
//我们这时选出的是第一个div标签
3.document.getElementsByClassName();
//通过类名来选出，但是IE8及以下不兼容
4.document.getElementsName();
//只对部分标签生效（表单，表单元素，img，iframe），IE浏览器不支持
5.document.querySelector();//css选择器，只能选出来一个，IE7及以下没有这个方法
6.document.querySelectorAll();//同样是css选择器，可以选出来一组，IE7及以下没有这个方法。
//注意，最后两种方法还有一个缺点：被选出来的元素不是实时的。

dom节点的基本概念

根据w3c的dom标准，文档中所有的内容都是节点，节点是dom的最小组成单元。浏览器会根据dom模型将文档解析成一系列节点。因为所有节点最终都继承自Node节点类，所以dom节点也可以称之为Node节点。

dom节点类型

DOM节点的类型有：

元素节点                                   1
属性节点                                    2
文本节点                                    3
注释节点                                    8
Document                                9
DocumentFragment                        11   //文档碎片

dom的基本属性

常见的有四种，我们今天就来大概介绍一下这四个属性值

DOM节点的基本属性：

1.nodeName           //标签名，大写表示，只读
2.nodeValue           //只有文本、注释节点有，可读写
3.nodeType                //节点类型，只读,它返回的就是相对的数值
4.attributes              //Element节点集合的属性
//通过这个属性我们可以改变相应属性的属性值，不能改变属性名，但是我们一般不用这种方法，我们一般用 getAttribute 和 setAttribute 去取

在这里，我们也来介绍一种方法，来看这个节点有无子节点。

hasChildNodes(); //返回值是true or false。

Element节点的一些属性和方法

Element节点的两个属性：

1.innerHTML();//改变HTML里面的内容
如果我们要改变一个div标签的值，代码如下：
div.innerHTML = "";
//在""里放入你要修改的内容
2.innerTEXT();//可以直接取出标签的文本内容，也可以赋值
//该属性火狐不兼容，但是可以使用textConent(老版IE不可用）

Element节点的两个方法：

1.getAttribute();//设置一个行间属性，前面是属性名，后面是属性值如果我们要给div设置一个行间属性，就可以使用这种方法： div.getAttribute(‘class’,‘demo’);
2.setAttribute();//取这个行间属性的值

在开发中我们可以使用getAttribute()方法来取data-log的值.
//如果我们要取出a的data-log
<div>
<a href = "#" data-log = "0">点我吧 <a>
<div>
js:
var div = document.getElementsByTagName('div')[0];
var a = document.getElementsByTagName('a')[0];
a.onclink = function() {
console.log(this.getAttribute('data-log'));
}

DOM的非方法操作

通过一些非方法的操作，我们也能对节点进行查询

遍历节点数

1.parentNode；
//父节点，只有一个。遍历节点数，最顶端的parentNode是#document
ep:strong.parentNode;2.childNodes;//子节点们
ep:div.childNodes;3.firstChild;//第一个子节点
ep:div.firstChild;4.lastChild;//最后一个子节点
ep:div.lastChild;5.nextSibling;//下一个兄弟节点
ep:span.nextSibling;6.previousSibling;//上一个兄弟节点
ep:span.previousSibling;

基于元素节点树的遍历

1.parentElement;//返回当前元素的父元素节点ep:div.parentElement;
2.children;//元素子节点
3.firstElementChild;//第一个元素节点
4.lastElementChild;//最后一个元素节点
5.nextElementSibling;//返回后一个兄弟元素节点
6.previousElementsibling；//返回前一个兄弟元素节点//这6个除了children，其他的IE9及以下都不兼容

（感谢我的好友Mark对我学习的极大鼓励和支持）

DOM的基本操作，节点的基本属性相关推荐

认识DOM的三大节点：元素节点，文本节点，属性节点以及nodeName,nodeType,nodeValue的区别
既然我们把网页文档看做树形结构,那么就有对应的节点.诚然DOM中有三大节点,分别是元素节点,文本节点,属性节点元素节点:构成了DOM的基础.文档结构中,<html>是根元素,代表整个文档 ...
html dom节点取父节点,JavaScript DOM父子兄节点操作必看详解
首先我们知道网页中的所有内容都是节点(标签.属性.文本.注释等) ,之前我们已经说过了一些元素的获取方法比如element.getElementById(),element.querySelecto ...
JavaScript HTML DOM 元素（节点）
JavaScript HTML DOM 元素(节点) 添加和删除节点(HTML 元素) <div id="div1"> <p id="p1"& ...
深圳软件测试培训：DOM中元素节点、属性节点、文本节点的理解
深圳软件测试培训:DOM中元素节点.属性节点.文本节点的理解节点信息每个节点都拥有包含着关于节点某些信息的属性.这些属性是: nodeType(节点类型) nodeName(节点名称) nodeV ...
JavaScript中DOM的层次节点(一)
DOM是针对HTML和XML文档的一个API,描绘了一个层次化的节点树,允许开发人员添加.修改.删除节点的一部分. DOM将HTML和XML文档描绘成一个有多个节点构成的结构,节点分为12种不同的节点 ...
05.DOM 查询练习-节点练习
尾部附上整体代码! 1, //1.查找#bj节点document.getElementById('btn01').onclick = function () {var biObj = document ...
JavsScript中DOM的基本操作
节点及其类型元素节点属性节点: 元素的属性, 可以直接通过属性的方式来操作. 文本节点: 是元素节点的子节点, 其内容为文本. 在 html 文档的什么位置编写 js 代码直接在 html 页面 ...
5月25日-js操作DOM遍历子节点
一.遍历节点遍历子节点children();//获取节点的所有直接子类遍历同辈节点next();prev();siblings();//所有同辈元素*find();从后代元素中查找匹配的filter ...
jquery的Dom操作查找节点
1.查找元素节点使用之前的jquery的各种选择器按照语法:"$(选择器)"来定位到文档中的元素,我们定位后得到的是一个jquery对象.我们可以使用juery提供的方法来操作我 ...