DOM-文档对象模型

最新推荐文章于 2023-11-25 11:56:04 发布

yyy_wj

最新推荐文章于 2023-11-25 11:56:04 发布

阅读量147

点赞数

本文链接：https://blog.csdn.net/yyy_wj/article/details/96622817

版权

1、DOM的概念

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM 。

DOM又称为文档树模型

html页面中都有一个根标签--html--也叫根元素
页面中的有一个根元素(标签--html),里面有很多的元素(有很多的标签,有很多的对象)
文档:一个页面就是一个文档
元素(element):页面中的所有的标签都是元素,元素可以看成是对象
节点(node):页面中所有的内容都是节点:标签,属性,文本

2、模拟文档树结构

3、DOM经常进行的操作

获取元素
事件(什么时机做相应的操作)
对元素进行操作(设置其属性或调用其方法)
动态创建元素

获取页面元素的几种方式

根据id获取元素

var div = document.getElementById('main');
console.log(div);

根据标签名获取元素

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
  var div = divs[i];
  console.log(div);
}

根据name获取元素

<body>
<input type="button" value="显示效果" id="btn"/><br/>
<input type="text" value="您好" name="name1"/><br/>
<input type="text" value="您好" name="name2"/><br/>
<input type="text" value="您好" name="name1"/><br/>
<input type="text" value="您好" name="name3"/><br/>
<input type="text" value="您好" name="name1"/><br/>
<input type="text" value="您好" name="name1"/><br/>

<script src="common.js"></script>
<script>

  //点击按钮,改变所有name属性值为name1的文本框中的value属性值

  my$("btn").onclick=function () {
    //通过name属性值获取元素-------表单的标签
    var inputs=document.getElementsByName("name1");
    for(var i=0;i<inputs.length;i++){
      inputs[i].value="我很好";
    }
  };
</script>

</body>

根据类名获取元素

  <style>
    div {
      width: 200px;
      height: 50px;
      background-color: green;
      margin-top: 10px;
    }

    .cls {
      background-color: yellow;
    }
  </style>
</head>
<body>
<p>这是一个p</p>
<p class="cls">这是另一个p</p>
<span class="cls">这是第一个span</span><br/>
<span>这是第二个span</span><br/>
<div class="cls">这是第一个div</div>
<div>这是第二个div</div>
<input type="button" value="显示效果" id="btn"/><br/>
<script src="common.js"></script>
<script>

  //点击按钮设置应用cls类样式的标签的背景颜色为红色
  //getElementsByClassName();------>h5的

  my$("btn").onclick = function () {
    //根据类样式的名字来获取元素
    var objs = document.getElementsByClassName("cls");
    for (var i = 0; i < objs.length; i++) {
      //设置每个元素的背景颜色
      objs[i].style.backgroundColor = "red";
    }
  };
</script>
</body>

根据选择器获取元素

  <style>
    .cls{
      background-color: red;
    }
  </style>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<p>这是一个p</p>
<p class="cls">这是一个p</p>
<span>这是一个span</span>
<span class="cls">这是一个span</span>
<script src="common.js"></script>
<script>

  //点击按钮弹出对话框
  //根据选择器的方式获取元素
// var btnObj= document.querySelector("#btn");
//  btnObj.onclick=function () {
//      alert("哈哈,我又变帅了");
//  };


  var objs=document.querySelectorAll(".cls");
  for(var i=0;i<objs.length;i++){
    objs[i].style.backgroundColor="green";
  }



</script>

几种获取页面元素方式的总结：

1、根据id属性的值获取元素,返回来的是一个元素对象
document.getElementById("id属性的值");
2、根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
document.getElementsByTagName("标签名字");

下面的几个,有的浏览器不支持

3、根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
document.getElementsByName("name属性的值")
4、根据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
document.getElementsByClassName("类样式的名字")
5、根据选择器获取元素,返回来的是一个元素对象
document.querySelector("选择器的名字");
6、根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
document.querySelectorAll("选择器的名字")

事件

事件：触发-响应机制

Event接口表示在DOM中发生的任何事件，一些是用户生成的（例如鼠标或键盘事件），而其他由API生成。

事件三要素

事件源:触发(被)事件的元素
事件类型:事件的触发方式(例如鼠标点击或键盘点击)
事件处理程序:事件触发后要执行的代码(函数形式)

事件的基本使用

var box = document.getElementById('box');
box.onclick = function() {
  console.log('代码会在box被点击后执行');  
};

案例

点击按钮弹出提示框

<body>
<input type="button" value="按钮" id="btn"/>
<script>
  //先有按钮,才能获取,获取之后才能注册事件


  //根据id属性的值从文档中获取这个元素,
  var btnObj = document.getElementById("btn");
  //为当前的这个按钮元素(对象),注册点击事件,添加事件处理函数(匿名函数)
  btnObj.onclick = function () {
    //响应做的事情
    alert("弹出来了一个对话框");
  };
</script>

点击按钮修改p标签的内容

<body>
<input type="button" value="设置p的内容" id="btn"/>
<p id="p1">我是一个p标签</p>
<script>
  //案例:点击按钮,修改p标签的显示内容

  //凡是成对的标签,中间的文本内容,设置的时候,都使用innerText这个属性的方式

  //根据id获取按钮,为按钮注册点击事件,添加事件处理函数
  document.getElementById("btn").onclick=function () {
    //根据id获取p标签,设置内容
    document.getElementById("p1").innerText="这是一个p";
  };


</script>

yyy_wj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM-文档对象模型

1、DOM的概念文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM 。DOM又称为文档树模型html页面中都有一个根标签--html--也叫根元素页面中的有一个根元素(标签--html),里面有很多的元素(有...
复制链接

扫一扫