DOM认知

1. ECMAScript：简称【ES】，它是欧洲计算机协会，大概每年的六月中旬定制语法规范。
2. DOM：全称【document object model】即为文档对象模型
3. BOM：全称【browser object model】即为浏览器对象模型

   1.2DOM属性

   概述:DOM【document object model】：它在JS当中，是引用类型数据，官方给我们提供很多属性、方法进行操作。

   <script>
     //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官方给我们提供很多属性、方法。用来操作节点树上面节点。

1.3DOM方法

概述:DOM对象，官方也给我们提供很多方法用来操作节点树上的标签。

1. getElementById:它是DOM对象方法，可以通过标签ID选择器，在JS当中获取标签。

 

<script>
   //getElementById方法:可以获取到节点树上任意节点
   //【需要给标签添加id属性，通过id选择器获取】
   var element = document.getElementById("box");
   var eleCur = document.getElementById("cur");
   var eleLi = document.getElementById("me");
   console.log(element);
   console.log(eleCur);
   console.log(eleLi);
   console.log(typeof element);
</script>

 

1.4操作节点属性

概述：我们可以通过DOM方法获取到节点树上的任意节点（标签），经常通过点语法来操作节点的属性、文本、样式等。

<div id=”box” class=”cur”>我爱你我的祖国</div>
<img src=”/images/1.jpg”/>
//代码如下
<script ">
   //JS当中经常通过DOM获取节点,经常用来操作节点属性
   var div = document.getElementById("box");
   //获取节点属性值
   console.log(div.id);
   console.log(div.className);
 //设置节点的属性值
   div.id = "memeda";
   div.className = "hahaha";
</script>

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

1.5操作节点文本

概述：我们可以通过DOM对象提供方法获取对应的节点，我们也可以通过点语法操作节点文本。

但是需要注意：操作节点文本分为两种情况：

1. 操作表单元素文本，需要通过value属性进行操作。
2. 操作非表单元素文本，需要通过innerHTML属性进行操作。

<span>ABC</span>
//代码如下：
<script">
 //非表单元素:不是input标签即可。 div、span、a、img等等
 //非表单元素操作文本:需要使用innerHTML属性进行操作
  var p = document.getElementById("cur");
  var input = document.getElementById('container');
  //获取文本
  console.log(p.innerHTML);
  //修改文本
  p.innerHTML = "我是中国人";
  p.innerHTML = "I like ch";
  //表单元素操作文本:通过的是value属性
  //获取表单元素文本
  console.log(input.value);
  input.value= "通过JS给表单元素重新设置新的文本";
</script>

1. 我们可以通过JS动态操作节点文本
2. 表单元素需要通过value属性进行操作文本
3. 非表单元素需要通过innerHTML属性进行操作文本

 1.6操作节点样式

概述：我们可以通过DOM方法获取节点，可以操作节点属性、文本、行内样式。

样式：层叠样式表，样式可以美化网页、可以让元素通过浮动、定位改变他们在网页中位置。

样式分为三种写法：行内样式、内部样式、外部样式。

行内样式:

<div style="width:100px;height:100px;color: red;background-color: cyan">ABC</div>

//内部样式
<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>
//外部样式
  <link rel="stylesheet" type="text/css" href="./css/default.css">

//代码如下：
<script">
       //获取节点
       var p = document.getElementById("box");
       //获取行内样式
       console.log(p.style);
       console.log(p.style.width);
       console.log(p.style.height);
       console.log(p.style.color);
       //设置样式样式
       p.style.width = "200px";
       p.style.height = "200px";
       p.style.color= "cyan";
       p.style.backgroundColor = "red";
</script>

 

1. 在JS当中点语法操作行内样式
2. 通过JS代码：可以获取行内样式、当然也可以设置样式
3. 节点样式：background-color、font-size等等【中间带有横岗的】，变为驼峰写法。