辉太郎看前端(js如何操作DOM)

最新推荐文章于 2023-03-07 21:10:46 发布

辉Gg呀！

最新推荐文章于 2023-03-07 21:10:46 发布

阅读量112

点赞数 1

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/m0_50512274/article/details/112828539

版权

笔记专栏收录该内容

57 篇文章 0 订阅

订阅专栏

前言

DOM树是结构，树是由DOM元素和属性节点组成的，DOM的本质是把html结构化成js可以识别的树模型；
有了树模型，就有了层级结构，层级结构是指元素和元素之间的关系父子，兄弟。

当页面被加载时，浏览器会创建页面的文档对象模型。
dom可以对html元素的样式、内容、属性来进行动态的改变和操作。

页面布局代码

<body>
  <ul>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
  </ul>
  <input type="text" value="">
</body>
</html>

获取`DOM`元素

在js中获取元素的方式有以下7种：

document.getElementById() 通过元素的id来获取元素。
document.getElementsByClassName() 通过元素的class类名来获取元素。
document.getElementsByTagName() 通过元素的标签名来获取元素。
document.getElementsByName() 用于获取表单控件，通过name名称来获取。
document.querySelector() 返回文档中匹配指定的CSS选择器的第一元素。
document.querySelectorAll() 返回文档中匹配的CSS选择器的所有元素节点列表。
document.body 可以直接获取到body。

<script>
  let ul= document.getElementsByTagName("ul") //获取到ul
  console.log(ul)
  let li= document.getElementsByTagName("li")//获取到所有的li
  console.log(li)
  let li2=document.querySelector('li') //返回第一个li
  console.log(li2)
  let li3=document.querySelectorAll('li') //返会一个NodeList里边是所有的li 
  console.log(li3)
</script>

操作内容

操作内容有以下几种方式：

innerHTML输出到页面，解析标签。
innerText 输出到页面不解析标签。
value 用于表单控件的

 let li= document.getElementsByTagName("li")//获取到所有的li
  console.log(li)
  
  li[0].innerHTML="<a>哈哈，很爱你哦!</a>"
  console.log(li[0])
  
  li[1].innerText="该休息了"
  console.log(li[1])
  
  let inp=document.querySelector('input') //获取input
  inp.value="369"
  console.log(inp)

操作样式

通过获取到的元素变量名.style.样式名=" "来操作或元素变量名.style="样式名:值;"操作。

 ul[0].style.backgroundColor="red"
   
 ul[0].style="background-color:red;"

操作元素属性

设置元素属性可以通过setAttribute来操作。语法：元素变量.setAttribute("属性名","属性值")。
获取元素的属性可以通过getAttribute来操作。语法：元素变量.getAttribute("属性名")。

inp.setAttribute("value","属性值") //设置属性值

 let dd= inp.getAttribute("type")//获取属性
  console.log(dd)

操作节点属性

nodeName 节点名称

元素节点返回标签名。
属性节点返回属性名称。

nodeValue 节点值

设置或返回指定节点的节点值。

nodeType 节点类型

元素节点返回1。
属性节点返回2。
文本节点返回3。
注释节点返回8。
文档节点返回9。

 let name = inp.nodeName   //节点名称
  let tp = inp.nodeType    //节点类型
  let val = li[0].nodeValue  //节点值
  
  console.log(name)
  console.log(tp)
  console.log(val)

结果

nodeType =nodeName = nodeValue
元素节点 1 = 标签名 == 》null
文本节点 3 = #text == 》 文本
注释节点 8 = #comment ==》 注释的文字
文档节点 9 = #document ==》 null
属性节点 2 = 属性名 ==》 属性值

增删追加插入克隆

创建

创建元素节点：createElement('标签名')
创建文本节点：createTextNode('文本内容')
创建一个DOM片段: createDocumentFragment()

<body>
  <button>添加</button>
  <table>
    <tr>
      <td>名称</td>
      <td>操作</td>
    </tr>
    <tbody></tbody>
  </table>
</body>

<script>
  let tbody = document.querySelector('tbody')//获取到tbody
  let btn = document.querySelector('button')  //获取到按钮
  btn.onclick = function () {
    let tr = document.createElement('tr')//创建tr
    tr.innerHTML = `
        <td>123</td>
        <td><button>删除</button></td>
      </tr>
  `
    tbody.appendChild(tr)
  }
</script>