原生js操作dom常用方法

dom

<script>
  //创建一个元素
  document.createElement("a");

  //创建文本节点
  document.createTextNode("text");

  //附加到父元素的最后
  parentNode.appendChild(childNode);

  //在指定节点前插入新节点
  parentNode.insertBefore(newNode, refNode);

  //删除子节点
  parentNode.removeChild(child);

  //替换子节点
  parentNode.replaceChild(newNode, oldNode);

  //查找
  document.getElementById("aa"); //通过 ID 获取单个元素
  document.getElementsByTagName("tag"); //通过标签名获取元素集合
  document.getElementsByClassName("class"); //通过类名获取元素集合
  document.querySelector("cssSelector"); //查找整个文档里面第一个
  document.querySelectorAll("cssSelector"); //获取所有匹配元素的 NodeList
  parentNode.querySelector("cssSelector"); //查找父元素里面第一个

  //复制节点
  domEle.cloneNode(); //不复制内容，浅拷贝
  domEle.cloneNode(true); //复制内容，深拷贝

  // 属性操作
  element.getAttribute("name"); // 获取属性值;
  element.setAttribute("name", "value"); //设置属性值;
  element.removeAttribute("name"); //删除属性

  // ‌内容操作‌
  element.innerHTML; //读写 HTML 内容
  element.textContent; //读写文本内容（忽略 HTML 标签）

  // ‌事件绑定与解绑‌
  element.addEventListener("event", handler, options); //添加事件监听
  element.removeEventListener("event", handler); //移除事件监听
  
  // ‌事件对象控制‌
  event.preventDefault(); //阻止默认行为（如链接跳转）
  event.stopPropagation(); //阻止事件冒泡

  // 样式操作‌，直接修改行内样式
  element.style.property = "value";
  //动态修改类名
  element.classList.add();
  element.classList.remove();
  element.classList.toggle();

  // ‌布局信息获取‌
  element.getBoundingClientRect(); //获取元素尺寸及视口位置
  window.getComputedStyle(element); //获取元素实际生效的样式

  //滚动元素到可视区域
  element.scrollIntoView();
</script>

Bom

<script>
  //浏览器窗口（浏览器视口）的尺寸
  var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  console.log(w, h); //1536 150

  //screen.width 属性返回以像素计的访问者屏幕宽度。screen.height 属性返回以像素计的访问者屏幕的高度。
  console.log(screen.width, screen.height); //1536 864
  //screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去诸如窗口工具条之类的界面特征。screen.availHeight 属性返回访问者屏幕的高度
  console.log(screen.availWidth, screen.availHeight); //1536 824
  // screen.colorDepth 属性返回用于显示一种颜色的比特数。所有现代计算机都使用 24 位或 32 位硬件的色彩分辨率：24 bits =16,777,216 种不同的 "True Colors"  32 bits = 4,294,967,296 中不同的 "Deep Colors"
  console.log(screen.colorDepth); // 24
  // screen.pixelDepth 属性返回屏幕的像素深度。
  console.log(screen.pixelDepth); // 24

  // window.location.href 返回当前页面的 href (URL)
  // window.location.hostname 返回 web 主机的域名
  // window.location.pathname 返回当前页面的路径或文件名
  // window.location.protocol 返回使用的 web 协议（http: 或 https:）
  // window.location.assign 加载新文档
  console.log(window.location.href);
  console.log(window.location.hostname); //localhost
  console.log(window.location.pathname);
  console.log(window.location.protocol); //http:
  console.log(window.location.port); //3000
  // window.location.assign("https://www.w3school.com.cn");

  // 加载历史列表中前一个 URL
  history.back();
  // 加载历史列表中下一个 URL
  history.forward();

  //如果 cookie 已启用，cookieEnabled 属性返回 true，否则返回 false：
  console.log(navigator.cookieEnabled); //true
  //appName 属性返回浏览器的应用程序名称：
  console.log(navigator.appName); //Netscape
  // appCodeName 属性返回浏览器的应用程序代码名称
  console.log(navigator.appCodeName); //Mozilla
  // product 属性返回浏览器引擎的产品名称：
  console.log(navigator.product); //Gecko
  // appVersion 属性返回有关浏览器的版本信息
  console.log(navigator.appVersion); //5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36
  // userAgent 属性返回由浏览器发送到服务器的用户代理报头
  console.log(navigator.userAgent); //Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36
  // platform 属性返回浏览器平台（操作系统）
  console.log(navigator.platform); //Win32
  // language 属性返回浏览器语言
  console.log(navigator.language); //zh-CN
  // 假如浏览器在线,onLine 属性返回 true：
  console.log(navigator.onLine); //true
  // 如果 Java 已启用,javaEnabled() 方法返回 true
  console.log(navigator.javaEnabled()); //false

  console.log(window.devicePixelRatio); //1.25
</script>

清除表单数据

//清除表单
function clearForm(formId) {
    const form = document.getElementById(formId);
    const elements = form.elements;

    for (let i = 0, len = elements.length; i < len; ++i) {
        const element = elements[i];
        if (element.hasAttribute('data-clear') && element.getAttribute('data-clear') == '0') continue;

        switch (element.type) {
            case 'password':
            case 'text':
            case 'textarea':
            case 'file':
                element.value = '';
                break;
            case 'radio':
            case 'checkbox':
                element.checked = false;
                break;
            case 'select-one':
            case 'select-multiple':
                element.selectedIndex = 0;
                break;
            default:
                continue;
        }
    }
}