[JS-DOM BOM学习笔记]DOM那些儿事儿2

这次接着1的故事学习

操作元素

H5自定义属性

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

自定义属性获取是通过getAttribute(‘属性’)获取。

但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

H5给我们新增了自定义属性

1.设置H5自定义属性

H5规定自定义属性data-开头作为属性名并且赋值

<div data-index="1"></div>

2.获取H5自定义属性

• 兼容性获取 element.getAttribute('data-index')
• H5新增element.dataset.index或者element.dataset[‘index’]console.log(div.dataset.index);(dataset是一个集合，里面存放了所有以data开头的自定义属性)
• 自定义属性里面有多个-链接的单词，我们获取的时候采取驼峰命名法

	<div data-index="1" getTime="20" data-list-name="andy"></div>
	console.log(div.dataset.listName);
  	console.log(div.dataset['listName']);

节点操作

为什么学节点操作

1.利用DOM提供的方法获取元素

• document.getElementById()
• document.getElementByTagName()
• document.querySelector等
• 逻辑性不强，繁琐

2.利用节点层级关系获取元素

• 利用父子兄节点关系获取元素
• 逻辑性强，但是兼容性稍差

节点概述

网页中的所有内容都是节点(标签，属性，文本，注释等)，在DOM中，节点使用node来表示。HTML DOM树种的所有结点均可通过JavaScript进行访问，所有HTML元素(节点)均可被修改，也可以创建或删除。

一般地，节点至少用股哦nodeType，nodeName，nodeValue这三个基本属性

• 元素节点 nodeType为1
• 属性节点 nodeType为2
• 文本节点 nodeType为3(文本节点包含文字，空格，换行等)

节点层级

利用DOM树可以把节点划分为不同的层级关系，常见是父子兄层级关系

父级节点

node.parentNode

• 注意，这里得到的是离元素最近的父级节点(亲爸爸)
• 如果没有就返回null

    <div class="box">
        <span class="erweima"></span>
    </div>
    <script>
        var erweima=document.querySelector('.erweima')
        // var box=document.querySelector('.box')
        console.log(erweima.parentNode);
    </script>

子节点

1.parentNode.childNodes

返回包含指定节点的子节点的集合，改集合为及时更新的集合

这个子节点包含元素节点 文本节点

如果只想要获得里面的元素节点，则需要专门处理

var ul=document.querySelector('ul')
for(var i=0;i<ul.childNodes.length;i++){
	if(ul.childNodes[i].nodeType==1){
		console.log(ul.childNodes[i])
	}
}

所以一般不提倡使用childNodes

2.parentNode.children

这是一个只读属性，返回所有的子元素节点。它只返回子元素节点、它只返回子元素节点，其余节点不返回(这个是重点)

虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用

• 3.parentNode.firstChild 返回第一个子节点，找不到则返回null(会包含文本节点)
• 4.parentNode.lastChild(会包含文本节点)
• 5.parentNode.firstElementChild 返回第一个子元素节点，找不到则返回null
• 6.parentNode.lastElementChild 返回最后一个子元素节点，找不到则返回null
  5，6方法有兼容性问题，IE9以上才支持

兄弟节点

• node.nextSibling
  返回当前元素的下一个兄弟节点，找不到则返回null，同样，包含所有的节点
• node.previousSibling
  返回当前元素上一个兄弟节点，找不到则返回null，同样，也包含所有的节点
• node.nextElementSibling
  返回当前元素下一个兄弟元素节点，找不到则返回null
• node.previousElementSibling
  返回当前元素上一个兄弟元素节点，找不到则返回null