day 15 javascript

						day15知识点

一、DOM
1.介绍
1.1：DOM文档对象模型，对象：document
- DOM（W3C机构）不属于BOM（浏览器厂商）
- window丢向身上有提供document对象
- DOM，主要控制（html文件），所有的页面操作都需要通过DOM
- DOM结构：html的结构：树形结构，包含结构，家族结构（父子级，兄弟级）
- DOM树形结构，的每个组成部分，都叫节点（元素，属性，注释，文本） 注：所有节点，都是对象
- js做交互，行为，页面（DOM），哪个元素，选择器，属性，内容，样式，元素等等

2.选择器
 2.1：元素节点选择器（只有元素节点）
      直接选择器
	- id选择器：document.getElementByID（‘ID名’）
	- class选择器：document.getELementByClassName（‘class名’）
	- tag选择器：document.ELenmentsByTagName（‘tag名’）  ：标签选择器
	- name选择器：document.getElementsByName（‘name名’）
      ES5新增选择器
	- querySelector选择器：document.querySelector（‘css选择器’）
	- querySelectorAll选择器：document.querySelectorAll(‘css选择器’)
	总结：
	    - 返回单个元素： id，querySelector
	    - 返回数组：class，tag，name，querySelectorAll	

 2.2关系选择器：现有基准元素
      父子关系
	- 父选子：先拿父
	- 先拿父元素    ：var a = document.querySelector（‘.list’）
	- 第一个子元素  ：console.log(a.firstElementChild)
	- 最后一个子    ：console.log(a.lastElementChild)	
	- 所有子元素    ：console.log(a.Children)
	- 其中一个子    ：console.log（a.children[索引]）
      
      子选父：先拿子
	- 拿子元素      ：var b = a.document.getELementByTeg('em')[0]；
	- 一个直接拿到父：console.log(a.parentNode)
	- 两个及以上    ：console.log(a.parentNode.parentNode)  父元素的父元素依次类推

      兄弟关系
	- 选择当前      ：var a = document.querySelector（‘.list’）
	- 上一个兄弟    ：console.log(a.previousElementSibling)
	- 下一个兄弟    ：console.log(a.nextElementSibling)

3.节点选择器（元素，属性，注释，文本）
     3.1：元素，注释，文本，参与了父子或兄弟关系
	- 利用关系选择器
	- 父元素节点     ：.childNodes
	- 当前元素       ：.previousElementSibling
	- 当前元素       ：.nextElementSibling
	- 节点的过滤属性 ：见如下 # 4
      属性，没有参与这种家族关系，更像是元素身上的衣服
	- 单独选择器
	- 当前元素       ：.attrbutes
	- 节点的过滤属性 ：见如下 # 4

	注：节点选择器和节点的过滤属性，一般自用来做择或过滤，不用来做修改等操作，有单独的操作方法

4.节点的过滤属性
	          nodeType   nodeName   nodeValue
	- 元素        1     大写标签名     null
	- 文本        3       #text      文本内容
	- 注释        8      #document   注释内容
	- 属性        2       属性名      属性值
	- 根document  9      document      null    
	
5.操作增删改查
	属性操作
	   - 可见属性
		- 内置：只要是系统提供的，在标签身上直接写的，还具有功能，就是内置的可见属性
		    - 对象操作: 1点语法，2中括号语法
		    - 也可以使用：getAttridute、setAttribute、removeAttribute
		    - 特殊的属性：class ：要用className操作， style：样式，值是个对象

		- 非内置：在标签身上直接写的，但是不具有默认功能，就是自定义可见属性
		    - 元素 .getAttribute（‘要获取的属性名’）
		    - 元素 .setAttribute（‘要获取的属性名’，‘属性值’）
		    - 元素 .removeAttribute（‘要删除的属性名’）
	   - 不可见属性
		- 内置：不用卸载标签身上，系统提供，具有功能
		    - 对象操作：1点语法，2中括号语法
		-非内置：放飞自我，看不见的自定义属性，其实就是将元素，作为一个对象数据，进行操作
		    - 元素是个对象，对象可以用来存储数据，多存储一些
		    - 对象操作
		    - 注：别和内置的重复了