DOM简介

javaScript组成？

javascript由哪几部分组成？

ECMAScript：简称【ES】，它是由欧洲计算机协会，大概每年的六月中旬定制语法规范。
DOM：全称【document object model】即为文档对象模型。其实就是内置的document对象，引用类型数据
BOM：全称【browser object model】即为浏览器对象模型。每一个浏览器厂商给程序猿提供了一些内置对象，可以获取浏览器的一些信息。

1.1节点树
概述：节点即为标签。节点之间的这种关系，我们称为“节点树”,因为很像一颗大树扎根。
dom【document object model】文档对象模型，你可以理解为是整个节点树最外层“根元素”。
dom其实就是js语言中内置引用类型document对象，dom对象经常用来操作节点（标签）
操作节点的样式，属性。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

</body>
</html>

dom属性

概述：在js当中，是引用数据类型，官方给我们提供了很多属性、方法,用来操作节点树上的节点

<head>
  <meta charset="UTF-8">
  <title>我是祖国的花朵</title>
</head>
<body>

</body>
</html>
<script type="text/javascript">
  // DOM：其实就是内置的document对象，引用类型数据
  console.log(document);
  console.log(typeof document)
</script>
<script type="text/javascript">
  // DOM:常用属性
  // documentElement：获取到节点树的html标签
  console.log(document.documentElement);
  // head：获取到节点树的head标签
  console.log(document.head)
  //title：获取到节点树的title文本
  console.log(document.title)
  //body：获取到节点body
  console.log(document.body)
</script>

dom方法

概述：dom对象，官方提供了很多方法来操作节点树上的标签。

document.getElementById

可以获取节点树上的任意节点，不过需要给标签添加id属性，通过id选择器进行选择

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    #box{
      color: red;
      text-indent: 3em;
      background-color: gold;
    }
  </style>

</head>
<body>
<div id="box">我爱你我的祖国</div>
</body>
</html>
<script type="text/javascript">
  console.log(document.getElementById("box"));
  var element=document.getElementById("box");
</script>

前端代码是从上向下执行的代码，所以js需要放在代码的下面
注意：标签节点在js中属于引用类型数据

操作节点属性

我们通过dom方法获取到节点树上的任意节点（标签），经常通过(.)点语法来操作节点上的属性、文本、样式等。

操作节点属性

js当中经常通过dom获取节点，经常用来操作节点属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我是祖国的花朵</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    /*#box{*/
    /*  color: cyan;*/
    /*  background-color: skyblue;*/
    /*  width: 300px;*/
    /*  height: 300px;*/
    /*  border-radius: 50%;*/
    /*  text-align: center;*/
    /*  line-height: 300px;*/
    /*}*/
    input{
      width: 300px;
      height: 200px;
      display: block;
      margin: 100px auto;
    }
  </style>
</head>
<body>
<div id="box" class="cur">我是祖国的未来</div>
<div>
  <input type="text" id="box1">
</div>
</body>
</html>
<script type="text/javascript">
  var div = document.getElementById("box");
  var box1 = document.getElementById("box1");
  console.log(div)
  console.log(div.id)
  console.log(box1.type)
  // ES6语法中不允许使用class关键字，所以只有属性，使用的是className
  console.log(div.className)
  console.log(div.classList)
  div.id = "newBox";
  
  box1.type="password";


</script>

可以通过DOM方法获取节点，进而操作节点属性
通过节点名字利用点语法【属性名字】，可以获取节点某一属性的属性值，当然也可以通过JS动态设置对应的新的属性值

操作文本

可以通过DOM对象提供的方法获取对应的标签，我们也可以通过点语法操作节点文本
注意：操作节点文本分为两种情况

操作表单元素文本，需要通过value属性进行操作，input标签
操作非表单元素文本，需要通过innerHtml属性进行操作，非input标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我是祖国的花朵</title>
</head>
<body>
<p id="cur">我是祖国的未来</p>

<p>
  <input id="container" type="text" value="我是默认文本">
</p>
</body>
</html>
<script type="text/javascript">
  var p = document.getElementById("cur");
  console.log(p)
  console.log(p.innerHTML)
  console.log(p.innerText)
  p.innerHTML = "我是祖国的flower";

  var input = document.getElementById("container");
  console.log(input.value)
  input.value="我是新的文本";
</script>

操作节点样式

可以通过dom方法获取节点，可以操作节点行内样式
样式分为三种样式：行内样式、外部样式、内部样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我是祖国的花朵</title>
<!--  内部样式-->
<!--  <style type="text/css">-->
<!--    *{-->
<!--      margin: 0;-->
<!--      padding: 0;-->
<!--    }-->
<!--    .container{-->
<!--      color: red;-->
<!--      border: 1px solid black;-->
<!--      width: 200px;-->
<!--      height: 200px;-->
<!--      text-align: center;-->
<!--      line-height: 200px;-->
<!--      font-size: 30px;-->
<!--      font-weight: bold;-->
<!--    }-->
<!--  </style>-->
</head>
<body>

<p id="container" style="width: 100px; height: 100px;color: red;background-color: cyan">
  我是一个锻炼
</p>
</body>
</html>
<script type="text/javascript">
  var elementById = document.getElementById("container");
  // 可以获取样式
  console.log(elementById.style.width)
  // 可以设置样式
  elementById.style.width="500px";
  // 可以设置新的样式
  elementById.style.fontSize="500px";
</script>

事件绑定

在网站中，用户经常进行鼠标移上某个元素、单击某个元素，这个元素可以对用户这个行为进行响应。像这种现象称之为“事件绑定”。人和机器交互。
注意：在js中只有标签才可以绑定事件。数组、JSON、函数、变量、循环语句这些是不能绑定事件的。

语法格式：

element onxxx=function(){

}

onxxx 这些事件名字都是小写的。
右侧部分是一个函数（事件处理函数）：当用户触发事件的时候才会执行一次。

onclick|ondbclick

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我是祖国的花朵</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    div{
      width: 100px;
      height: 100px;
      background-color: red;
      margin: 100px auto;
      text-align: center;
      line-hight: 100px;
    }

  </style>
</head>
<body>
<div id="box">我是祖国的花朵</div>
</body>
</html>
<script type="text/javascript">
  var div = document.getElementById('box');
  div.onclick = function () {
    div.style.backgroundColor='blue';
  }
</script>

右侧函数（事件处理函数）当用户触发事件的时候（比如单机、双击这个元素）才会执行
可以给任意元素绑定单击事件（一般工作中，非表单元素绑定单击事件）

event事件对象

概述：任意节点树上的节点（标签），都可以绑定一个或者多个事件，当用户触发事件的时候，系统会自动给事件处理函数传递实参，而这个参数即位事件对象（event）

posted @ 2023-03-10 00:39 King-DA 阅读(79) 评论(0) 收藏举报

刷新页面返回顶部

King-D

king-d

DOM简介

javaScript组成？

dom属性

dom方法

document.getElementById

操作节点属性

操作节点属性

操作文本

操作节点样式

事件绑定

onclick|ondbclick

event事件对象