js.DOM-CSDN博客

本文链接：https://blog.csdn.net/2301_82060934/article/details/142144529

DOM

1. 样式相关操作

1.1 ele.style.attr

是一个可读可写的属性
只能够取到行内样式
使用js添加样式

1.2 当需要调整的样式比较多的时候，应当考虑操作类名

className 控制一个元素的所有类名 class的所有值

oDiv.className = "change";//将类名替换为change

classList 控制一个元素的单个类名如果一个元素的class属性有其他的类名的话，其他类名不会受到影响

oDiv.classList.add("change");//给元素添加一个change类名
oDiv.classList.remove("change");//删除元素中一个change类名

1.3 style只能获取或者设置行内样式

如果要设置或获取其他样式（包括行内）设置的样式属性值，应当使用

getComputedStyle(  );//window方法，如果有单位的话，单位也会保留//只读
console.log(getComputedStyle(oDiv).width);
console.log(getComputedStyle(oDiv)["height"]);     
oDiv.style.width = parseInt(getComputedStyle(oDiv).width) + 200 + "px";//在原来宽度的基础上+200

2. 属性节点

 //先有元素
      let oDiv = document.getElementById("box");
      //1. ele.attr 只能操作默认属性 无法操作自定义属性
      console.log(oDiv.id);
      oDiv.id = "box1";
      //class 特殊
      console.log(oDiv.className);

      //以下针对的是默认和自定义的属性
      //了解的 attributes
      console.log(oDiv.attributes); //获取所有的属性
      //取某个属性的值
      console.log(oDiv.getAttribute("id"));

      //增加或者修改某个属性
      oDiv.setAttribute("index", 1); //自定义的
      console.log(oDiv.index); //undefined
      console.log(oDiv.getAttribute("index")); //1

      //删除某个属性
      oDiv.removeAttribute("index");

3. dataset

//自定义属性一般以data-开头，自定义属性一般用来保存一些js里能用到的数据
let oImg = document.querySelector("img");
console.log(oImg.dataset.id);//取到的是以data-为前缀的自定义属性值，前缀不要写

4. 元素节点内的内容及表单元素的值

<body>
    <input type="text" />
    <button>表单</button>
    <input type="button" value="按钮" />
    <div>
      <p>p1</p>
      <p>p2</p>
    </div>
    <span></span>
    <script>
      let children = document.body.children;
      console.log(children);

      //value 表单元素  除 button

      //children[0].value = "aaaa";
      //children[2].value = "world";

      //innerText 和 innerHTML  非表单元素 button

      //children[1].innerText = "hello";

      //children[3].innerText = "div";

      // children[3].innerHTML = "<h1>span</h1>"; //标签会解析
      // children[3].innerText = "<h1>span</h1>"; //原样显示

      console.log(children[3].innerHTML); //取到完整的内容，包括标签
      console.log(children[3].innerText); //只取文本
    </script>
  </body>

5. 获取一些尺寸和距离

let inner = document.querySelector(".inner");
//clientWidth clientHeight  取到的是width + padding
console.log(inner.clientWidth, inner.clientHeight); //120

//offsetWidth  offsetHeight 取到的是 width + padding + border
console.log(inner.offsetWidth, inner.offsetHeight); //140

//offsetLeft  offsetTop  取到当前元素距离有定位属性的父级的左边距和上边距
console.log(inner.offsetLeft, inner.offsetTop);

6. DOM元素节点的增删改

6.1 增

//新建一个p标签
let oP = document.creatElement("p");
//新增一个p标签
oDiv.appendChild(oP);//增加到元素内部的尾部
//创建文本节点
let oTxt = document.createTextNode("hello");
oP.appendChild(oTxt);

6.2 删

//删除节点
let oH1 = document.querySelector("h1");
oDiv.removeChild(oH1);
oH1.remove();

6.3 改

//替换节点
//用新创建的p节点替换h1
let oP = document.createElement("p");
let oH1 = document.querySelector("h1");
oDiv.replaceChild(oP, oH1); //用oP替换oH1 
//用已存在的节点替换另一个已存在的节点
let oH1 = document.querySelector("h1");
let oP = document.querySelector("p");
oDiv.replaceChild(oP, oH1); //挪位置 
//想保留 ，怎么办呢？  克隆一份
let oH1 = document.querySelector("h1");
let oP = document.querySelector("p");
let cloneP = oP.cloneNode(true); //布尔值 true 内容也克隆
oDiv.replaceChild(cloneP, oH1);