获取元素

获取任意标签

window.idxx或者直接idxxx

document.getElementByld('idxxx')
// 获取的是一个伪数组 所以后面有一个下标
document.getElementByTagName('div)[0] // 更具标签获取
document.getElementByClassName('red')[0] // 根据类名获取
// 获取ID 就加 #    类就 .
document.querySelector('#idxxx')
// 获取所有的
document.querySelectorAll('.red')[0]

获取特定标签

// 获取html元素
document.documentElement
// 获取head元素
document.head
// 获取body元素
document.body
// 获取窗口(窗口不是元素)
window
// 获取所有元素
document.all  // IE发明的
// 这个document.all是个奇葩，第6个falsy值

if(document.all){console.log('IE浏览器')}else{console.log('其他浏览器')}

// 其他浏览器 在判断里面 document.all 是个假

节点的增删改查

增

// 创建标签节点
document.createElement('div')
document.createElement('li')
document.createElement('style')
// 创建文本节点
document.createTextNode('你好')
// 标签里面插入文本
div1.appendChild(text1)
div1.innerText ='你好'
// 插入到页面中
document.body.appendChild(div1)
// 或者在页面找到已存在的元素添加.appendChild(div1)

appendChild 一个元素不能出现在两个地法

可以复制一份 cloneNode() 克隆节点

let div2 = div1.cloneNode(true)  // 深拷贝

删

先找到要删掉元素的父元素 然后用父元素 removeChild（） 删除子节点也就是要删除的节点

div1.parentNode.removeChild(div1)

方法二 IE不支持

div1.remove();

这里的删除只是移除在页面外 但是内存里面还是存在的 移除到内存外如下

div1.remove();
div1 = null;

改

// 改ID
div1.id = 'xxx';
// 改class
div1.className = 'red';
// 在已有的基础上再加一个 bule 类
div1.className +=' blue' // 字符里面有个空格
div1.classList.add('green');
// 改style
div1.style = 'color:blue'; // 这样会覆盖原来的所有样式
div1.style.color = 'blue';
div1.style.backgroundColor='green';
// 改文本 
div1.innerText ='hi';
div1.innerContent ='ho'
// 改HTML内容
div1.innerHTML ='<span>你好</span>';
// 改标签  先清空在改标签
div1.innerHTML = '';
div1.appendChild(div2);

读

div1.id;
div1.className;
div1.style;
// 获取原本的链接
div1.getAttribute('href')

查

// 查自己
node
// 查爸爸
node.parentNode或者node.parentElement
// 查爷爷
node.parentNode.parentNode
// 查子代
node.childNodes或者node.children
// 当子代变化时，两者也会实时变化
// 查兄弟姐妹
node.parentNode.childNodes // 还要排除自己
node.parentNode.children   // 还要排除自己
let c = node.parentNode.children;
let arr =[];
		for (let i = 0; i < a.length; i++) {
            if (c[i] !== div1) {
                arr.push(c[i]);
            }
        }

// 查看老大
node.firstChild
// 查看老幺
node.lastChild
// 查看上一个哥哥/姐姐
node.previousSibling // 会获取到文本节点
node.previousElementsSibling
// 查看下一个弟弟/妹妹
node.nextSibling  

遍历一个div里面的所有元素

        travel = (node,fn) => {
                fn(node)
                if (node.children) {
                    for (let i = 0; i < node.children.length; i++) {
                        travel(node.children[i],fn)
                    }
                }
            }
        ravel(div1, (node) => console.log(node))