web前端学习笔记24-文本节点textNode与文档节点document

一、textNode文本节点

在HTML中一个页面中的文字都是由浏览器中的文本节点创建而成的

1.1 成员属性

关键字	释义
length	获取一个文本节点的字符个数
data	表示文本节点的文本内容字符串

1.2 成员方法

关键字	释义	格式
splitText	切割文本节点	文本节点.splitText(切割位置);
appendData	在文本节点的最后插入字符串	文本节点.appendData('插入的字符串');
inserData	在文本节点的指定位置插入字符串	文本节点.inserData(位置,'要插入的字符串');
replaceData	文本节点中替换指定的字符串	文本节点.replaceData(位置,长度,'替换字符串');
substringData	在文本节点中截取指定长度的字符串	文本节点.substringData(指定位置,截取长度);
deleteData	在文本节点中删除指定的字符串	文本节点.deleteData(指定位置,指定长度);

【注】splitText 切割文本节点的意义：为了添加其他节点
【注】substringData截取字符串时

1. 截取长度为正数时，截取指定长度的字符串
2. 截取长度为负数时，截取指定位置之后的所有字符串
3. 截取长度为0时，不会截取任何内容

<div id="rain">在北方最干旱的季节，能读懂一滴雨的，</div>
	<script>
		// textNode文本节点
		var rain=document.getElementById('rain');
		console.log(rain);
		var txt=rain.firstChild;
		console.log(txt,txt.nodeType);
		
		// 成员属性————————————————————————
		// length
		console.log(txt.length);
		// data
		console.log(txt.data,typeof txt.data);
		
		// 成员方法——————————————————————
		// 1. splitText 切割文本节点
		console.log(rain.childNodes);
		txt.splitText(4);
		console.log(rain.childNodes);
		// 切割文本节点的意义：为了添加其他节点
		rain.insertBefore(document.createElement('hr'),rain.lastChild);
		// 2. appendData 在文本节点的最后插入字符串
		var txt2=rain.lastChild;
		txt2.appendData('是立在打着卷儿的庄稼旁的长者。');
		// 3. inserData 在文本节点的指定位置插入字符串
		txt2.insertData(5,'里');
		// 4. replaceData 文本节点中替换指定的字符串
		txt2.replaceData(8,5,'看懂一阵风');
		// 5. substringData 在文本节点中截取指定长度的字符串
		console.log(txt2.substringData(10,3));
		// 6. deleteData 在文本节点中删除指定的字符串
		txt2.deleteData(16,7);
		// 修改文本的其他方式：（不使用文本节点）
		// 1. 修改div中的文字内容 innerHTML （文档节点）
		rain.innerHTML='那双一直翘望着云朵走向的眼睛';  //直接覆盖原来的
		// 2. 直接使用节点属性
		var txt3=rain.firstChild;
		console.log(txt3);
		txt3.nodeValue='从不把最美的景物视为唯一';
	</script>
</body>

【注】所有文本节点操作方法都可以使用字符串操作代替

1. 文本节点提供的操作文本内容的方法比较短（文本节点 . 文本节点方法();）
2. 文本节点使用字符串操作相对麻烦（文本节点 . nodeValue . 字符串方法();）
3. 文本节点的修改大部分直接映射到节点当中，而字符串的修改必须重新赋值为节点的nodeValue，才能映射到节点中

二、文档节点

在任何文档中，文档节点都是不能创建的，是浏览器代为创建的节点类型。文档节点不需要创建也不需要获取，固定名称document。document代表页面中的所有内容。

// 文档节点
console.log(document);

2.1 成员属性

关键字	释义	注意
body	提供在文档对象中直接访问body元素节点的快捷属性	document.body
head	提供在文档对象中直接访问head元素节点的快捷属性	document.head
title	提供在文档中直接获取或者设置title值的快捷方式	该属性获取或设置title标签的内容而非title节点
cookie	使用js获取当前浏览器中存储的cookie中的信息字符串 cookie一般由服务器添加，js中可以读取也可以设置	访问cookie必须使用相同的网址
domain	获取当前文档的域名地址，本地返回localhost	-
URL	获取当前文档的完整地址信息	-
lastModified	获取当前文档的最后一次修改时间	-
documentElement	表示当前页面的HTML元素节点	低版本IE：document.childNode[1]
doctype	获取当前页面的dtd声明节点	低版本IE中不支持声明节点，将声明节点当做注释节点

// 成员属性
// 1. body 直接访问body元素节点
console.log(document.body,document.body.nodeName);
// 2. head 直接访问head元素节点
console.log(document.head,document.head.nodeName);
// 3. title 直接获取或者设置title值
console.log(document.title);
/*——————————————————————————————————————————
// 标题闪烁小特效
setInterval(function(){
	if(document.title=='★☆★☆★☆★☆★☆'){
		document.title='☆★☆★☆★☆★☆★';
	}else{
		document.title='★☆★☆★☆★☆★☆';
	}
},300);
——————————————————————————————————————————————*/

// 4.cookie 使用js获取当前浏览器中存储的cookie中的信息字符串
console.log(document.cookie);
// 5. domain 获取当前文档的域名地址，本地返回localhost
console.log(document.domain);
// 6. URL 获取当前文档的完整地址信息
console.log(document.URL);
// 7.lastModified 获取当前文档的最后一次修改时间
console