1.DOM节点
DOM节点主要分为三种：元素节点， 属性节点和文本节点
2 nodeType属性 获取节点类型
- 元素节点 DIV，SPAN，H1... 大写标签的名称
- 属性节点 id，class，name，style... 小写属性的名称
- 文本节点 #text
- 注释节点 #comment
2. 获取元素节点的方法
id可以不用docoument获取
2.1 document.getElementById( )
直接获取到元素节点
2.2 document.getElementsByClassName( )
通过 [index] 获取到每个元素节点
.3 document.getElementsByTagName( )
通过 [index] 获取到每个元素节点
2.4 document.getElementsByName( )
通过 [index] 获取到每个元素节点
2.5 document.querySelector( ) ---> 直接获取到元素节点
querySelector只能获取到第一个元素节点
2.6 document.querySelectorAll()
通过 [index] 获取到每个元素节点
querySelectorAll 有 forEach() 方法
【注意】querySelector 和 querySelectorAll
1、通过类名获取时要.
2、通过id名获取时要#
3、通过属性获取时要[]
3. 属性
attributes 返回某个元素节点所有属性节点(返回一个数组).
3.1 属性节点操作的三个函数
我们通过三个函数可以操作元素的属性:
-
getAttribute():通过属性名获取对应的属性值
文档元素.属性名也可以获取对应的属性的值，但不同的是getAttribute()统一返回字符,而文档元素.属性名会返回属性实际的值类型
-
setAttribute():设置一个key-value形式的属性键值对 -
removeAttribute():移除指定的属性 -
getAttribute():方法将获取元素中某个属性的值。它和直接使用点语法(,属性)获取属性值的方法有一定区别 -
setAttribute():方法可以给元素添加属性;如果属性经存在，则会覆盖原来的属性;需要传入两个参数:属性名和属性值. -
removeAttributeQ方法可以移除元素的属性。
【注意】getAttribute，setAttribute，removeAttribute不要去操作动态属性。如(checked，selected，disabled)ed结尾的，只需.checked,.selected.disabled判断真假就能判断动态属性的状态
4. 元素类相关
4.1 className 设置、获取、清除
4.2 classList ---> 新属性
- classList.add( ) 添加
- classList.remove( ) 删除
- classList.contains( ) 是否存在
- classList.toggle( ) 切换
- classList.forEach( ) 遍历
5. 元素节点间关系的相关属性
儿子节点和父子节点
- childNodes: 子节点集合 包括文本节点和元素节点,会把换行当作文本节点
- children 微软的 但是ie 6、7、8会把注释当前元素节点
- parentNode : 父节点
获取第一个儿子
- firstElementChild：适用google和火狐，在ie中是undefined;
- firstChild：适用ie 6 7 8，在google会认错(会认成文本节点),用于获取第一个子节点相当于childNodes(0).
兼容写法:// xx.firstElementChild || xx.firstChild
获取最后一个儿子
- lastChild:用于获取当前元素节点的最后一个子节点 相当于childNodes[box.childNodes.length-1],适用ie 6 7 8，在google会认错(会认成文本节点);
- lastElementChild：适用google和火狐，在ie中是undefined.
兼容写法:// xx.lastElementChild || xx.lastChild
同级兄弟间关系的相关属性
- previousSibling || previousElementSibling:属性返回该节点的前一个同级节点，
兼容写法:xx.previousElementSibling||xx.previousSibling
- nextSibling || nextElementSibling: 属性返回该节点的后一个同级节点。
兼容写法:xx.nextElementSibling||xx.nextSibling
6、DOM操作
DOM节点操作
DOM节点操作指的是:创建节点、复制节点、插入节点、删除节点和替换节点等。
DOM操作所涉及的方法有:
js里头提供了 insertBefore,没有提供insertAfter
- createElement();创建一个元素节点
- appendChild();添加一个新子节点到子节点的末尾
- createTextNode();创建一个文本节点
- createComment();创建注释
- insertBefore();将新节点插入到某节点前面，如果第2个参数是null,等价于appendChild,会将新的元素,插在父节点的最后位置
- replaceChild():将新节点替换旧节点("新的",被替换)
- removeChild():移除节点,子元素
- remove():自杀
- cloneNode();复制节点, 深浅克隆,默认是浅克隆(false),只会克隆自身,不会克隆子元素,深克隆(true)会克隆自身,还会克隆子元素
