js文本对象模型[DOM]【续】(Node节点类型)

一、Document类型    document实例
1、常用的一些属性
documentElement　　 始终指向HTML页面中的<html>元素。
body 　　直接指向<body>元素
title　　 获取文档的标题
images　　 获取所有的img对象    【返回类数组对象】
forms　　 获取所有的form对象    【返回类数组对象】
links　　 获取文档中所有带href属性的<area>和<a>元素
referrer 　　取得链接到当前页面的那个页面的URL    【即来源页面的URL】
URL 　　取得完整的文档URL
domain　　 取得域名，并且可以进行设置，在跨域访问中经常会用到。【返回文档服务器的域名】

2、查找HTML中的元素
getElementById('id')    通过元素id查找
使用下面三种方式获取元素【返回的为类数组对象，需要使用数组下标选择单个相应的元素】
document.getElementsByTagName('标签名')    通过标签名查找
document.getElementsByClassName('类名')    通过类名查找
document.getElementsByName('name属性值')        通过元素属性name查找
document.querySelectorAll('css选择器')        通过css选择器来查找

3、添加和删除元素
document.createElement(element)     创建元素
document.removeChild(element)     删除元素
document.appendChild(element)     添加元素
document.replaceChild(element)     替换元素
document.write(text)     写入输出流，在浏览器上显示文本(text)内容

二、Element类型    元素节点类型【下面使用的element表示我们所选取的元素节点】
1、获取属性值
element.属性名    【返回的是js对象(style)或相应的js函数(事件函数)】
element.getAttribute("属性名")【返回的是css中包含的文本(style)或相应函数名字符串(事件函数名)】
eg:

    //指定div的style属性  初始style = 'color:coral;';
    console.log(div.getAttribute('style'));        //字符串：color: coral
    console.log(div.style);        //js对象：CSS2Properties { color → "coral" }
    //指定div的事件点击函数onclick()
    console.log(div.onclick);    //js函数：function onclick()
    console.log(div.getAttribute('onclick'));    //相应事件函数名：test()

2、设置属性值
element.属性名 = "属性值";
element.setAttribute("属性名","属性值");

3、删除属性
element.removeAttribute("属性名");

4、设置css样式：【设置style中属性值时（只能获取或设置元素内联的style中的属性）,带有-连接的属性名其不能识别一般使用相应的驼峰命名来获取】
element.style.color = "coral";    //设置元素的字体颜色为珊瑚色
element.style.backgroundColor = 'red'    //设置元素的背景颜色为红色 background-color使用backgroundColor代替

5、attributes属性    【返回的为元素节点的所有属性节点组成的类数组对象】
getNamedItem(name) 　　返回nodeName属性等于name的属性节点
removeNamedItem(name)　　 从列表中删除nodeName属性等于name的属性节点
setNamedItem(node) 　　向列表中添加一个属性节点
item(pos) 　　返回位于数字pos位置处的属性节点，类似于使用attributes[pos]
    
6、获取相应的元素节点【忽视其他节点，只考虑元素节点，对于有孩子的元素节点使用】
element.firstElementChild　　第一个孩子元素节点
element.lastElementChild　　最后一个孩子元素节点
element.nextElementSibling　　下一个兄弟元素节点
element.previousElementSibling　　上一个兄弟元素节点
element.childElementCount　　子元素的数量，返回值和children.length值相等

7、元素内容
a、innerHTML　　返回元素内容
eg:

    div.innerText = '<span>span</span>';    //无法解析相应的文本内容
    console.log(div.innerText);    //获取了去掉回车换行的文本内容    【只输出文本内容】 <span>span</span>

b、innerText　　元素内部的文本，去除回车和换行
eg:

    div.innerHTML = '<span>span</span>';    //可以解析内容里面的HTML标签代码
    console.log(div.innerHTML);    //获取内部内容    【字符串输出】    span

c、textContent　　元素内部的文本，不去除空格和回车
eg:

    console.log(div.textContent); //获取带有回车换行的文本内容

添加元素内容两种方式：【innerHTML添加元素内容时无法识别换行】
a、使用字符串拼接
eg:

    div.innerHTML = '<div>'+
                    '<span>hello world</span>'+
                '</div>';

b、使用一对反引号【`】包裹
eg:

    div.innerHTML = `<div>
                        <span>hello world</span>
                     </div>
                    `;

三、Text类型    文本节点    【下面使用的text表示我们所选取的元素节点】
1、文本类型的相关属性及方法
a、属性
text.length　　//文本长度
b、方法
text.appendData(要追加的文本内容) 　　//追加文本
text.deleteData(开始删除的索引,要删除的数量)　　 //删除文本
text.insertData(开始插入的索引,要插入的文本) 　　//插入文本
text.replaceData(开始替换的索引,替换的数量,要插入的文本)　　 //替换文本
text.splitText(分割文本的索引) 　　//将当前文本节点分成两个文本节点
text.document.createTextNode(要插入节点中的文本)　　 //创建文本节点
text.substringData(开始截取的索引,子串的长度)　　 //截取文本的指定子串

四、Comment类型        注释节点