js学习，语法注意，如何查找HTML，DOM

JS简介

计算机程序是由计算机“执行”的一系列“指令”。在编程语言中，这些编程指令被称为语句。JavaScript 程序就是一系列的编程语句javaScript 是属于 HTML 和 Web 的编程语言， JavaScript 能够改变 HTML 内容、属性、样式、或者是某些属性等。

JS语法注意

1：“===”与“==”
==：只比较值是否相同；
===：不仅比较值是否想爱你沟通还要比较类型是否相同。
2：运算有关字符串的级联问题：

 var x="8"+3+5;------835
 var y=3+5+"8";------88

实际是级联为字符串（引号）后面的数，实际前面的的数的运算不受影响。
3.let，const

• 可以使用 let 关键词声明拥有块作用域的变量，var是拥有全局作用域的，如果在块级里声明，变量也将重新声明块外的变量

var  x = 10;
{  
  var x = 2;
}
// Here x is 2
document.getElementById("demo").innerHTML = x;
结果是：2

在相同的作用域，或在相同的块中，通过 let 重新声明一个 var 变量是不允许的。

• JavaScript const 变量必须在声明时赋值：不是真正的常数因此，我们不能更改常量原始值，但我们可以更改常量对象的属性。

 const PI = 3.141592653589793;
 PI = 3.14;      // 会出错
 PI = PI + 10;   // 也会出错

在同一作用域或块中，不允许将已有的 var 或 let 变量重新声明或重新赋值给 const。

js如何查找HTML元素

主要分为三大类：

• 通过id查找：

 <p id="demo6">loo</p>
 <script>
   var myelement = document.getElementsById("demo6");
   document.getElementById("demo6").style.color = "red";
   document.getElementById("demo6").style.fontFamily = "Arial";
   document.getElementById("demo6").style.fontSize = "large";
 </script>

• 通过标签名查找

 <div id="main">
        <p id="demo7">hello</p>
  </div>
  <script>
  var myelement = document.getElementsByTagName("p");
  var myelement = document.getElementsById("main");
  var myelement = document.getElementsByTagName("p");
  </script>

• 通过类名查找

  <p calss="struo">hi</p>
  <script>
  var x = document.getElementsByClassName("struo");
  </script>

DOM一小部分内容

JavaScript 能改变页面中的所有 HTML 元素
JavaScript 能改变页面中的所有 HTML 属性
JavaScript 能改变页面中的所有 CSS 样式
JavaScript 能删除已有的 HTML 元素和属性
JavaScript 能添加新的 HTML 元素和属性
JavaScript 能对页面中所有已有的 HTML 事件作出反应
JavaScript 能在页面中创建新的 HTML 事件
注意：getElementById 是方法，而 innerHTML 是属性。
eg：表单验证：

<form name="myForm" action="" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
      <input type="submit" value="Submit">
</form>

action 表示表单提交的地址，为空时默认提交到当前页面，method 表示表单提交的HTTP方式（ get 、post、dialog ），它的默认值为get。

这里给name设定值“myForm”是为了在js中获取到这个form。当一个页面有多个表单的时候，我们就需要用name来区分

<script>
function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
 
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}
</script>

myForm代表name为“myForm”的表单，以此推fname。这里就是接收用户输入姓名的input框。合起来的意思就是获取了表单“myForm”中input的value值，其实就相当于：

 “document.getElementsByName(“fname”[0].value;”）

其实可以直接在<input>中使用required=“required”验证，当你提交时表单会自动帮你验证。