# learn-shell

**Repository Path**: liujianfeng1214/learn-shell

## Basic Information

- **Project Name**: learn-shell
- **Description**: No description available
- **Primary Language**: Shell
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-04-28
- **Last Updated**: 2021-11-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

*--------------- 获取dom节点 -----------------*/
  // 通过id名获取dom
  document.getElementById('id');

  // 通过name属性名获取dom数组
  document.getElementsByName('name');

  // 通过class属性获取dom数组
  document.getElementsByClassName('class');

  // 通过HTML标签名获取dom数组
  document.getElementsByTagName('tag'); 

  // 通过选择器获取dom 
  document.querySelector('tag#id.class');

  // 通过选择器获取dom数组
  document.querySelectorAll('tag#id.class');

  // 通过选择器获取第一个满足条件的祖先dom
  dom.closest('body');

  // 获取直接祖先dom
  dom.parentElement;

  // 获取直接祖先节点
  dom.parentNode;

  // 获取直接子dom数组
  dom.children;

  // 获取直接子节点数组
  dom.childNodes;

  // 获取第一个直接子dom
  dom.firstElementChild;

  // 获取第一个直接子节点
  dom.firstChild;

  // 获取最后一个直接子dom
  dom.lastElementChild;

  // 获取最后一个直接子节点
  dom.lastChild;

  // 获取前一个兄弟dom
  dom.previousElementSibling;

  // 获取前一个兄弟节点
  dom.previousSibling;

  // 获取后一个兄弟dom
  dom.nextElementSibling;

  // 获取后一个兄弟节点
  dom.nextSibling;

  /*--------------- 获取dom属性 -----------------*/

  // 获取dom相对有定位祖先元素的顶部距离像素差
  dom.offsetTop;

  // 获取dom相对有定位祖先元素的左边界距离像素差
  dom.offsetLeft;

  // 获取dom实际宽（无法获取display:none元素的宽）
  dom.offsetWidth;

  // 获取dom实际高（无法获取display:none元素的高）
  dom.offsetHeight;

  // 元素是否隐藏
  dom.hidden;

  // 获取dom标签名(大写)
  dom.tagName;

  // 获取dom的文本内容
  dom.textContent;

  // 获取dom的直接子dom数
  dom.childElementCount;

  // 获取dom标签属性
  dom.getAttribute('id');

  // 获取dom属性map
  dom.attributes;

  // 获取dom样式（STYLE_NAME指height、border这类样式属性）
  dom.style.STYLE_NAME;

  // 获取dom类名字符串集合
  dom.className;

  // 获取dom类名数组
  dom.classList

  // 获取dom真实样式（兼容ie）
  var style = window.getComputedStyle
    ? window.getComputedStyle(dom, null)
    : dom.currentStyle;

  // 获取dom文本内容字符串
  dom.innerText;

  // 获取dom内部所有html字符串
  dom.innerHTML;

  // 获取包含dom本身在内的文本内容字符串
  dom.outerText;

  // 获取包含dom本身在内的html内容字符串
  dom.outerHTML;

  // 获取替换元素（input，select，textarea等等）的内容
  dom.value;

  /*------------------- dom操作 ----------------------*/
  // 设置dom属性
  dom.setAttribute("id", "10086");

  // 判断dom是否存在某属性
  dom.hasAttribute('id');