元素和节点

获取对象属性

一.点语法

结构：元素.属性
举例：box.id 获取元素的id
赋值：box.style.backgroundColor = “red”;
注意点：
1.只能获取行内属性，不能获取行外属性
2.获取到的是带单位的字符串
3.属性可以获取，也可以修改
4.获取类名使用className，不能使用class，因为class是关键字
特点：
1.可以获取行内标准属性
2.可以获取点语法动态添加属性
3.无法获取行内总定义属性
4.无法获取行外属性

二.attribute属性

获取元素属性：元素.getAttribute(“属性名”)
设置元素属性：元素.setAttribute(“属性名”,“属性值”)
移出元素属性：元素.removeAttribute(“属性名”)
特点：
1.可以获取行内标准属性
2.可以获取行内自定义属性
3.无法获取行外元素
4.无法获取点语法动态添加属性

获取元素和节点

1.获取兄弟节点和元素

获取节点

// 上一个节点
console.log(li2.previousSibling);  // 文本节点
// 下一个节点
console.log(li2.nextSibling);  // 文本节点

获取元素

//上一个元素
console.log(li2.previousElementSibling);
// 下一个元素
console.log(li2.nextElementSibling);

注意：IE8不支持获取兄弟元素的操作, 执行得到的undefined, 而且 在IE8里面没有任何替代方案
IE8要获取兄弟元素 只能通过节点获取
兼容性封装

function getPreviousElement(ele) {
            // 能力检测
            if(ele.previousElementSibling)  {  // 谷歌火狐
                return ele.previousElementSibling;
            } else {  // IE8
                // 获取上一个节点  :  null  元素  文本  注释
                var node = ele.previousSibling;
              
              // 循环次数不确定
              // 1. node必须存在, 不是null,  2. node不是元素节点
              while(node != null && node.nodeType != 1) {
                 node =  node.previousSibling
              }
              // node == null  或者  node.nodeType == 1
              return node;
            }
        }

2.获取第一个子元素和子节点

获取第一个子元素和子节点
获取第一个子节点   : 父元素.firstChild
获取第一个子元素  :  父元素.firstElementChild

兼容性封装

function firstElement(ele){
			if(ele.firstElementChild){//谷歌和火狐
				return ele.firstElementChild;
			}
			else{//IE8以下
				var node = ele.firstChild;
				// 循环次数不确定
				// 1. node必须存在, 不是null,  2. node不是元素节点
				while(node != null && node.nodeType != 1){
					node =  node.nextSibling;
				}
				// node == null  或者  node.nodeType == 1
				return node;
			}
		}

3.获取最后一个子元素和子节点

获取最后一个子元素和子节点
获取最后一个子节点   : 父元素.lastChild
获取最后一个子元素  :  父元素.lastElementChild

4.获取父节点

获取父节点 : 子元素.parentNode

5.克隆节点

元素.cloneNode(参数)
参数 : 布尔类型 true false(默认)
注意：1. 克隆节点只会在内存中克隆一份, 不会添加到页面上 只能手动添加
2. 克隆会把id也克隆过去
3. 为了保持页面id的唯一性, 需要修改克隆元素的id

页面添加元素

1.document.write(不常用，原因是会覆盖原本的页面内容)

document.write("<h1>我是标题</h1>")

覆盖原理：默认情况下，页面加载会形成一个文档流，当页面内容所有内容加载完毕之后这个文档流（默认的文档流）就关闭了
点某个事件，调用document.write向页面添加内容的时候，就会形成一个新的文档流，就会覆盖原本的文档流，默认的情况，默认文档里没有关闭

2.innerHTML（也不常用，性能问题，在100以内差别不大）

document.body.innerHTML += "<h1>我是标题</h1>"

3.官方推荐：document.createElement(“标签名”)

特点：1.默认创建的空标签
2.创建值存在于内存中，需要手动添加到页面上

//1.创建一个空标签
var h2 = document.createElement("h2");
//2.设置标签属性
h2.innerText = "我是h2标签";
//3.添加到页面上
document.body.appendChild(h2)

4.innerHTML和document.createElement（性能对比）

	//使用innerHTML向页面添加100个标签（15ms）创建10000个：1.2s
	console.time();
	for(var i = 0;i < 1000;i++){
	//直接赋值会覆盖前面的内容，要使用+=
	documoent.body.innerHTML += "<p>我是第"+(i+1)+"个p标签</p>"
	}
	console.timeEnd()
	//使用document.createElement向页面添加100个标签（0.6ms）创建10000个：3ms
	console.time();
	for(var i = 0;i < 1000;i++){
	var p = document.createElement("p");
	p.innerText = "我是第"+(i+1)+"个p标签"
	documoent.body.appendChild(p)
	}
	console.timeEnd()