选取文档元素和文档结构遍历

• 选取文档元素
• 文档结构遍历
• 属性
• 元素的内容
• innerText和textContent区别

选取文档元素四种方法

1.通过id选取元素
例：document.getElementById()
2.通过属性name选取元素
例：document.getElementsByName
3.通过标签名选取元素
例：document.getElementsByTagName()
4.通过css类选取元素
例：document.getElementsByClassName()
5.通过css选择器选取元素
例：document.querySelector()
document.querySelectorAll()

注意：一般选取后代元素用第五种方法,中间用空格表示

文档结构和遍历

1.1 作为节点树的文档
Document对象、它的Element对象和文档中表示文本的Text对象都是Node对象。Node定义了以下重要的属性：
parentNode：该节点的父节点
childNodes：该节点的子节点，返回一个类数组对象
firstChild、lastChild：该节点的第一个和最后一个节点
nextSibling、previoursSibling：该节点的前一个兄弟节点和后一个兄弟节点
nodeType：该节点的类型。1代表Element节点，3代表Text节点，8代表Comment节点，9代表Document节点，11代表DocumentFragment节点nodeValue：Text节点或者Comment节点的文本内容
nodeName：元素的标签名，以大写形式表示

属性

html文档中的所有元素都可以添加属性，那么也可以获取属性的值
例：

var image = document.getElementById('myImage')
image.src = 'http://add.png'
image.id = 'myImage'

上面是给元素添加属性，对元素属性操作有以下四种方法

1. setAttribute：给元素添加属性。例：

var image = document.getElementById('myImage')
image.setAttribute('class', 'thumbnail')

2. getAtrribute：获取元素的属性值，例：

image.getAttribute('class')

3. removeAttribute：删除元素的属性值，例：

image.removeAttribute('class')

4. hasAttribute：检测元素是否存在某个属性，例：

image.hasAttribute('class')

元素的内容

1.innerHTML：设置或获取位于对象起始和结束标签内的 HTML
2.outHTML：设置或获取对象及其内容的 HTML 形式
3.innerText：设置或获取位于对象起始和结束标签内的文本
4.outText：设置(包括标签)或获取(不包括标签)对象的文本
上面4种方法的区别和联系如下：

    
    


    
这是div中的文字这是span中的文字
 
    

我们先来看下console控制台显示的运行结果：

innerHTML:这是div中的文字这是span中的文字
outerHTML:
这是div中的文字这是span中的文字
innerText:这是div中的文字这是span中的文字
outerText:这是div中的文字这是span中的文字

可以得出结论：
① innerHTML 获取对象起始和结束标签内的 HTML，即这里的对象是div标签，亦即这个标签里面所有的内容包含span标签也获取出来，即 “这是div中的文字这是span中的文字”（注意HTMl这个字的意思，也就是结构）
② outerHTML 是在①innerHTML基础上获取它的outer对象标签内容，也就是“

这是div中的文字这是span中的文字

” 这些里面有什么内容及标签结构都获取出来。 （注意HTMl这个字的意思，也就是结构）
② innerText和outerText在获取时是相同效果 都是获取

标签里的文本内容，去除掉了

,标签，只显示div,span标签里的文本内容，即 “这是div中的文字这是span中的文字”（注意Text这个字的意思，也就是文本）
我先来看一张结构图，方便记忆下：

image.png

innerText和textContent区别

想要获取或修改文本的节点就需要这两种属性，这两种属性非常相似，可以互换使用，不过也有点区别，例：

      testaaa
     
test1
     
 
    
第一个输出：
"testaaatest1hi"
第二个输出：
testaaa
hi

通过上面我们可以看出textContent可以把指定元素的文本全部输出，不管是不是显示在页面上，也不管是不是在style或者script当中，都会将指定元素的所有后代text节点简单的串联在一起，而innerText只会将显示在页面中的text节点显示出来，并且不会显示style或者script标签中的内容，还有就是输出的文本的格式会跟指定元素的格式一致，比如根据行内还是行外来决定是否换行。
参考地址：https://blog.csdn.net/html5_/article/details/23619103