JS之DOM操作笔记

最新推荐文章于 2021-10-17 19:55:57 发布

飘…

最新推荐文章于 2021-10-17 19:55:57 发布

阅读量345

点赞数

分类专栏： Javascript 文章标签： JS

本文链接：https://blog.csdn.net/luo609630199/article/details/80064099

版权

本文主要介绍了JavaScript中的DOM操作，包括元素获取、创建、属性设置等，并着重讲解了DOM树的修改方法。此外，还提及了JS内置对象如Array、String、Date和Math的重要方法，以及使用示例，如数组操作、字符串处理、日期获取和数学计算。最后，给出了省市二级联动的案例作为实践应用。

摘要由CSDN通过智能技术生成

DOM的概述

document object modelhtml文档加载到浏览器的内存中后，我们认为形成了一颗DOM树，即html标签按照层级结构而形成了一颗“家谱树”，而任何一个html标签、标签属性和文本都是这个树上的节点元素。

我们可以通过js的DOM组件中的方法对内存中的DOM树上的结构和内容进行修改，即通过js动态的修改内存中的那一份html及css的代码。

JS的DOM操作（重点！）

一、标签元素的操作

1.获取元素对象
- 根据id获取元素 getElementByid("id值")
- 根据标签获取多个元素
- 根据类名获取多个元素
- 根据name属性获取多个元素
2.创建一个新元素：createElement()
3.对子节点进行操作
- hasChildNodes():判断是否有子节点
- removeChild(子节点):删除子节点
- replaceChild(新节点,旧节点):替换子节点
4.标签体的获取与设置
- innerHTML
- innerText

二、属性设置

1.获取属性的值：getAttribute(name)
2.设置属性的值：setAttribute(name,value)
3.删除某个属性：removeAttribute(name)

案例一:隔行换色的案例

  
  <script type="text/javascript">
              //1.当页面加载完毕的时候获取所有的tr
              window.onload = function(){
  
                  var trs = document.getElementsByTagName("tr")
                  //遍历每一个tr
                  //前面两行不设置颜色
                  for(i=2;i<trs.length;i++){
  
                      if(i % 2 == 0){
  
                          //奇数行
                          //设置该行的背景色为红色
                          trs[i].style.backgroundColor = "red"
                      }else{
  
                          //偶数行
                          //设置该行的背景色为绿色
                          trs[i].style.backgroundColor = "green"
                      }
                  }
                  
                  //当鼠标移动到某一行，给该行的颜色设置成灰色。当鼠标移开的时候，又恢复成原来的颜色
                  //遍历出每一行
                  var color = "white"
                  for (i=0;i<trs.length;i++) {
  
                      trs[i].onmouseover = function(){
  
                          //绑定鼠标移入事件