dom节点属性操作方法

DOM

DOM是JS操作网页的接⼝，全称为“文档对象模型”（Document Object Model）。它的作⽤是将网页转为⼀个JS对象，从而可以用脚本进行各种操作（比如增删内容）。

浏览器会根据DOM模型，将结构化⽂档（比如HTML和XML）解析成⼀系列的节点，再由这些节点组成⼀个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口

DOM不属于JS，但是操作DOM是JS最常见的任务，而JS也是最常用于DOM操作的语言

任何 HTML 或 XML（可扩展性标记语言） 文档都可以用 DOM 表示为⼀个由节点构成的层级结构。节点分很多类型，每种类型对应着⽂档中不同的信息和（或）标记，也都有自己不同的特性、数据和方法，而且与其他类型有某种关系。这些关系构成了层级，让标记可以表示为⼀个以特定节点为根的树形结构。

document里可以使用的API

document是每个文档的根节点，根节点的唯⼀子节点是元素，我们称之为文档元素（documentElement）

一、节点

DOM的最小组成单位叫做节点（node）

1.1节点类型

1.1.1常用

1.document：最顶层的节点就是 document 节点，它代表了整个文档，文档里面最高的HTML标签，⼀般是 （文档节点）

2.Element：元素节点

3.Attribute：属性节点

4.Text文本节点

1.1.2其他

5.DocumentType：版本节点

6.Comment：注释

7.DocunmentFragment：文档片段

1.2节点关系

父节点关系（parentNode）：直接的那个上级节点

子节点关系（childNode）：直接的下级节点

同级节点关系（sibling）：拥有同一父节点的节点

二、dom中node的属性和方法

2.1属 性

nodeType：返回节点类型

var a1 = document.getElementById('a1');
console.log(a1.nodeType);//返回节点类型

nodeName：返回节点名称

console.log(a1.nodeName);//返回节点名称

nodeValue：返回节点的值

onsole.log(a1.nodeValue); //返回节点的值

childNodes：返回节点的nodelist集合（子节点）

console.log(a1.childNodes);//返回节点的nodelist集合(子节点)

childNodes[]：可以通过下标去获取元素，如果想使用数组方法，记得要先转换成数组

console.log(a1.childNodes[0])

parentNode：返回父节点

console.log(a1.parentNode)

previousSibling：返回上一个兄弟节点（空白文本节点会被识别到）

console.log(a1.previousSibling)

nextSibling：返回下一个兄弟节点

console.log(a1.nextSibling)

firstChild：获取元素中第一个子元素

console.log(a1.firstChild)

lastChild：获取元素中的最后一个子元素

console.log(a1.lastChild)

ownerDocument：返回整个文档节点document

console.log(a1.ownerDocument)

hasChildNodes：检查是否是非空节点

console.log(a1.hasChildNodes())

2.2操作方法

1.appendChild：appendChild⽅法接受⼀个节点对象作为参数，将其作为最后⼀个⼦节点，插⼊当前节点。该⽅法的返回值就是插⼊⽂档的⼦节点。

var a5=document.getElementById('a5')
//创建一个p元素，写入文本，放入a5DIV
var p =document.createElement('p')

var text=document.createTextNode('今天天气很好，小明哭了')
p.appendChild(text);//文本放入p元素
console.log(p)
a1.appendChild(p)//在父元素末尾追加，结束标记之前

2.insertBefore：用于将某个节点插入父节点内部的指定位置

insertBefore方法接受两个参数，第⼀个参数是所要插入的节点newNode，第⼆个参数是父节点parentNode内部的⼀个子节点referenceNode。newNode将插在referenceNode这个子节点的前面。返回值是插⼊的新节点newNode

var sp2=document.getElementById('sp2')
var sp1=document.createElement("span")
var sp3=sp2.parentNode
console.log(sp3.insertBefore(sp1,sp2))

3.removeChild：接受⼀个子节点作为参数，用于从当前节点移除该子节点。返回值是移除的子节点。

var s1=document.getElementById('s1')
sp2.removeChild(s1)

4.replaceChild：将⼀个新的节点，替换当前节点的某⼀个子节点。

sp2.replaceChild(sp1,s1)

5.normalize：将空白节点格式化，将所有空白格变为一个

6.cloneNode：浅拷贝，只拷贝外层，克隆 ，可以指定值为true进行深拷贝（内容拷贝）

var sp4=s1.cloneNode()//浅拷贝
console.log(sp4)
var sp4=s1.cloneNode(true)//深拷贝

三、document的属性和方法

3.1属性

1.document.documentElement

console.log(document.documentElement)

2.document.body

console.log(document.body)

3.document.doctype

console.log(document.doctype)

4.document.title

console.log(document.title)

5.document.url

console.log(document.url)

6.document.domain

console.log(document.domain)

7.document.referrer

console.log(document.referrer)

8.document.images：

console.log(document.images)

9.document.forms：取得所有表单元素

console.log(document.forms)

10.document.links：获取所有a标签（只获取有href属性的）

console.log(document.links)

3.2操作方法

1.getElementById()//通过id获取元素

2.getElementsByClassName()//获取类名获取元素

3.getElementsByName()//通过名称获取元素

4.getElementsByTagName()//通过标签名获取元素

四、element的属性和方法

4.1属性

console.log(a1.id);
console.log(a1.title);
a1.className="blue";//element的属性可以获取也可以直接进行设置
console.log(a1.src);
console.log(a1.alt);
a1.style.color = 'red';//设置元素的样式

4.2属性操作方法

1.获取元素属性并设置

console.log(a1.getAttribute('id'));//获取某个元素的某个属性，参数为属性名
a1.setAttribute('title','小明日记');//设置某个元素的属性

2.获取子元素

console.log(a1.children);//子元素集合
console.log(a1.firstElementChild);//第一个子元素
console.log(a1.lastElementChild);//最后一个子元素
console.log(a1.nextElementSibling);//下一个兄弟元素
console.log(a1.previousElementSibling);//上一个兄弟元素
console.log(a1.childElementCount);//子元素个数

3.标签之间的内容

console.log(a1.innerHTML);//返回标签中的HTML内容，当使用它去设置一个元素的内容时，我们需要去考虑填写的字符串是否为正确的HTML代码的问题！


console.log(a1.innerText);//返回标签中的文本内容，获取每个标签中的文本，单独一行
console.log(a1.textContent);//返回标签中的文本内容,会考虑元素文本的格式，不去除空格和回车

五、文本节点属性和操作方法

1.文本长度：length

var text = document.createTextNode('xiaoming');
console.log(text.length)//8

2.追加文本：appendData

var text = document.createTextNode('xiaoming');
text.appendData('text')
console.log(text)//xiaomingtext

3.删除文本：deleteData

text.deleteData(1,1)
console.log(text)//xaoming

4.插入文本：insertData

text.insertData(1,'1234')
console.log(text)//x1234iaoming

5.替换文本：replaceData

text.replaceData(1,3,'12')
console.log(text)//x12ming

6.从beginIndex位置将当前文本节点分成两个文本节点：splitText

text.splitText(5)
console.log(text)//xiaom

7.创建文本节点：document.createTextNode

var text = document.createTextNode('xiaoming');

8.从beginIndex开始提取count个子字符串：

console.log(text.substringData(2,2))//ao




var text = document.createTextNode('xiaoming');
text.appendData('kule');
/*
length                  //文本长度
appendData(text)            //追加文本
deleteData(beginIndex,count)        //删除文本
insertData(beginIndex,text)     //插入文本
replaceData(beginIndex,count,text)      //替换文本
splitText(beginIndex)       //从beginIndex位置将当前文本节点分成两个文本节点
document.createTextNode(text)   //创建文本节点，参数为要插入节点中的文本
substringData(beginIndex,count)     //从beginIndex开始提取count个子字符串
*/