DOM概念及作用

最新推荐文章于 2024-03-28 23:55:28 发布

今天吃洋芋呀

最新推荐文章于 2024-03-28 23:55:28 发布

阅读量1.7k

点赞数 1

文章标签： DOM

本文链接：https://blog.csdn.net/qq_39248504/article/details/94879633

版权

Javascript分三个部分
ECMAScript标准:JS的基本的语法
DOM:Document Object Model —>文档对象模型----操作页面的元素
BOM:Browser Object Model----->浏览器对象模型—操作的是浏览器
该文档仅限DOM

DOM

DOM又称文档对象模型，由于万物皆对象，所以我们可以把文档也当做一个对象，页面中的每一个标签都是元素，也可以看做是一个对象
什么叫元素？

页面中所有的标签都是元素，都是对象

什么叫节点？

文档中所有的内容都为节点，包括标签，属性，文本

html中有一个根标签，即html，也叫做根元素
根标签下又分为许多子标签（元素），由文档及文档中的所有元素组成的树状图成为DOM树
页面就是文档-----document，文档有根元素----html，根元素下有子元素—head—body-----等等

获取元素

获取元素:

根据id从整个的文档中获取元素—返回的是一个元素对象
document.getElementById("id属性的值")
根据标签的名字获取元素-----返回的是元素对象组成的伪数组
document.getElementsByTagName("标签的名字");
根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
document.getElementsByName("name属性的值")
根据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

  document.getElementsByClassName("类样式的名字")

根据选择器获取元素,返回来的是一个元素对象

  document.querySelector("选择器的名字");

根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

 document.querySelectorAll("选择器的名字")

元素的样式操作：

对象.style.属性=值;
对象.className=值;

事件

事件:就是一件事,有触发和响应,事件源

点击按钮获取对话框

<input type="button" value="按钮" id="btn"/>
<script>
  document.getElementById("btn").onclick=function () {
      alert("哈哈");
  };
</script>

当按钮被点击时,弹出对话框，所以按钮---->事件源，点击---->事件名字，被点了—>触发了，弹框—>响应

点击列表修改列表背景颜色

<input type="button" id="btn" value="按钮 ">
<ul id="uu">
  <li>哈哈</li>
  <li>好好</li>
  <li>好的</li>
  <li>欧克欧</li>
</ul>

<script>
  document.getElementById("btn").onclick=function(){
    document.getElementById("uu").style.backgroundColor="yellow";
  };
</script>

鼠标滑入添加边框事件

<style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
      width: 200px;
      height: 150px;
      background-color: green;
      float: left;
      margin-left: 10px;
      border: 2px solid green;//此类高亮一般先设定边框，防止div抖动
    }
  </style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
var dvObjs=document.getElementsByTagName("div");
  for(var i=0;i<dvObjs.length;i++){
    dvObjs[i].onmouseover=function(){
      this.style.border="2px solid red";
    };
    dvObjs[i].onmouseout=function(){
      this.style.border="";
    };
  }
</script>

模拟搜索框

<style>
    input {
      color: gray;
    }
  </style>
</head>
<body>
<input type="text" value="请输入搜索内容" id="txt"/>
<script>
document.getElementsByTagName("txt").onfocus=function(){
    if (this.value=="请输入搜索内容") {
      this.value="";
      this.style.color="black";
    }
  };
  document.getElementsByTagName("txt").onblur=function(){
    if (this.value=="") {
      this.value="请输入搜索内容";
      this.style.color="gray"
    }
    if (this.value.length==0) {
      this.value="请输入搜索内容";
      this.style.color="gray";
    }
  };
</script>

今天吃洋芋呀

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
DOM概念及作用

Javascript分三个部分ECMAScript标准:JS的基本的语法DOM:Document Object Model —>文档对象模型----操作页面的元素BOM:Browser Object Model----->浏览器对象模型—操作的是浏览器该文档仅限DOMDOMDOM又称文档对象模型，由于万物皆对象，所以我们可以把文档也当做一个对象，页面中的每一个标签都是元素，...
复制链接

扫一扫