获取元素

获取任意标签

  2. window.idxx或者直接idxxx
  4. document.getElementByld('idxxx')
  5. // 获取的是一个伪数组 所以后面有一个下标
  6. document.getElementByTagName('div)[0] // 更具标签获取
  7. document.getElementByClassName('red')[0] // 根据类名获取
  8. // 获取ID 就加 #    类就 .
  9. document.querySelector('#idxxx')
  10. // 获取所有的
  11. document.querySelectorAll('.red')[0]

获取特定标签

  1. // 获取html元素
  2. document.documentElement
  3. // 获取head元素
  4. document.head
  5. // 获取body元素
  6. document.body
  7. // 获取窗口(窗口不是元素)
  8. window
  9. // 获取所有元素
  10. document.all  // IE发明的
  11. // 这个document.all是个奇葩，第6个falsy值
  1. if(document.all){console.log('IE浏览器')}else{console.log('其他浏览器')}
  3. // 其他浏览器 在判断里面 document.all 是个假

节点的增删改查

增

  1. // 创建标签节点
  2. document.createElement('div')
  3. document.createElement('li')
  4. document.createElement('style')
  5. // 创建文本节点
  6. document.createTextNode('你好')
  7. // 标签里面插入文本
  8. div1.appendChild(text1)
  9. div1.innerText ='你好'
  10. // 插入到页面中
  11. document.body.appendChild(div1)
  12. // 或者在页面找到已存在的元素添加.appendChild(div1)

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

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

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

删

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

  1. div1.parentNode.removeChild(div1)

方法二 IE不支持

  1. div1.remove();

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

  1. div1.remove();
  2. div1 = null;

改

  1. // 改ID
  2. div1.id = 'xxx';
  3. // 改class
  4. div1.className = 'red';
  5. // 在已有的基础上再加一个 bule 类
  6. div1.className +=' blue' // 字符里面有个空格
  7. div1.classList.add('green');
  8. // 改style
  9. div1.style = 'color:blue'; // 这样会覆盖原来的所有样式
  10. div1.style.color = 'blue';
  11. div1.style.backgroundColor='green';
  12. // 改文本 
  13. div1.innerText ='hi';
  14. div1.innerContent ='ho'
  15. // 改HTML内容
  16. div1.innerHTML ='<span>你好</span>';
  17. // 改标签  先清空在改标签
  18. div1.innerHTML = '';
  19. div1.appendChild(div2);

读

  1. div1.id;
  2. div1.className;
  3. div1.style;
  4. // 获取原本的链接
  5. div1.getAttribute('href')

查

  1. // 查自己
  2. node
  3. // 查爸爸
  4. node.parentNode或者node.parentElement
  5. // 查爷爷
  6. node.parentNode.parentNode
  7. // 查子代
  8. node.childNodes或者node.children
  9. // 当子代变化时，两者也会实时变化
  10. // 查兄弟姐妹
  11. node.parentNode.childNodes // 还要排除自己
  12. node.parentNode.children   // 还要排除自己
  13. let c = node.parentNode.children;
  14. let arr =[];
  15.         for (let i = 0; i < a.length; i++) {
  16.             if (c[i] !== div1) {
  17.                 arr.push(c[i]);
  18.             }
  19.         }
  21. // 查看老大
  22. node.firstChild
  23. // 查看老幺
  24. node.lastChild
  25. // 查看上一个哥哥/姐姐
  26. node.previousSibling // 会获取到文本节点
  27. node.previousElementsSibling
  28. // 查看下一个弟弟/妹妹
  29. node.nextSibling

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

  1.         travel = (node,fn) => {
  2.                 fn(node)
  3.                 if (node.children) {
  4.                     for (let i = 0; i < node.children.length; i++) {
  5.                         travel(node.children[i],fn)
  6.                     }
  7.                 }
  8.             }
  9.         ravel(div1, (node) => console.log(node))