[TOC]

操作标签对象

获取标签对象

var 变量名 = document.getElementById("id属性值");//这里用全局变量

方式一：在标签的下面写script标签，在script标签里面写代码

<div id="aaa">约吗</div>

<script>
  var aaa = document.getElementById("aaa");
  alert(aaa);
</script>

方式二：如果script标签写在目标标签的上面

<script>
  //当页面加载完之后，才会执行方法体中的内容
  window.onload = function() {
    let div = document.getElementById("aaa");
    alert(div);
  }
</script>

<div id="aaa">约吗</div>

操作标签中文本数据

  1. 获取标签文本数据 ```javascript 标签对象.innerHTML

var text = a.innerHTML; document.write(text);


2. 修改标签文本数据
```javascript
标签对象.innerHTML="数据";

a.innerHTML = "123";
  1. 追加标签文本数据 ```javascript 标签对象.innerHTML+=”数据”;

a.innerHTML += “123”;



<a name="FqOHD"></a>
## 操作标签的样式

```javascript
标签对象名.style="border:1pxsolidred;font-size:200px";
标签对象名.style.border="1pxsolidred";
//标签对象名.style.font-size="200px"; 如果有杠的话，去杠加大写
标签对象名.style.fontSize="200px";

事件处理(单击事件)

方式一：使用html中的事件属性

<script>
  function aaa() {
    alert("你好贱");
  }
</script>

<input type="button" value="点我啊" onclick="aaa()">

方式二：使用js原生代码

<script>
  window.onload = function() {
    var bt = document.getElementById("bt");

    //给按钮对象动态绑定鼠标单击事件
    bt.onclick = function() {
      alert("滚犊子");
    }
  }
</script>

<input id="bt" type="button" value="约吗">

BOM

浏览器对象模型(Browser Object Model)

把浏览器中的各个组件拆分出来，每一个都封装成了一个对象

BOM对象分类

image.png
Navigator：浏览器对象
*Window：浏览器窗口对象
*Location：浏览器地址栏对象
*History：浏览器历史栏对象
Screen：浏览器参数对象

*Document：浏览器文档对象，单独一个，因为比较重要，所以形成了DOM

Window对象

window对象中的方法可以直接使用，不需要对象名调用

弹出框方法

  • alert()：显示带有一段消息和一个确认按钮的警告框

  • confirm()：确认按钮和取消按钮的对话框

    var result = confirm("约吗");
alert(result);

  • prompt()：显示可提示用户输入的对话框

打开和关闭方法

  • open(“网址”)：打开一个新的浏览器窗口

  • close()：关闭浏览器窗口

    <script>
  var url;

  window.onload = function() {
      var bt1 = document.getElementById("bt1");
      var bt2 = document.getElementById("bt2");

      bt1.onclick = function() {
          url = open("http://baidu.com");
      }
      bt2.onclick = function() {
          url.close();
      }
  }
</script>

计时器方法

  • setInterval(参数一，参数二)：按照指定的周期（以毫秒计）来调用函数或计算表达式

    • 第一个参数：要执行的任务
    • 第二个参数：多长时间(毫秒值)

  • clearInterval()：取消由 setInterval() 设置的 timeout ```javascript

- setTimeout()：在指定的毫秒数后调用函数或计算表达式 ，只执行一次 - clearTimeout()：取消由 setTimeout() 方法设置的 timeoutjavascript 20-DOM - 图2 <a name="s94oh"></a> ### 常见的属性 document<br />history<br />location 地址栏 写法javascript window.document.write(“”); window.history.xxx(); window.location.xxx(); document.write(“”); history.xxx(); location.xxx(); <a name="rX6WX"></a> ## Location对象 常见的方法 - reload()：重新加载当前文档 常见的属性 - href：设置或返回完整的 URLjavascript ```javascript <script> window.onload = function() { setInterval("change()",1000) } function change() { var span = document.getElementById("span"); var num = span.innerHTML; if(num <= 1){ location.href = "http://baidu.com"; return; } span.innerHTML = num -1; } </script> ## History对象 常见的方法 - forward()：加载 history 列表中的下一个 URL - back()：加载 history 列表中的前一个 URL - go()：加载 history 列表中的某个具体页面 - 注意：里面需要传递参数，如果传递的是正数，代表下某个页面。如果传递的是负数，代表上某个页面 常见的属性 - length：返回浏览器历史列表中的 URL 数量 javascript window.onload = function() { var a = document.getElementById("a"); var b = document.getElementById("b"); a.onclick = function(){ history.back(); history.go(-1); } b.onclick = function(){ history.forward(); } } # DOM > 文档对象模型(Document Object Model) 把文档中的各个部分拆分出来，每一个都封装成了一个对象
浏览器在解析一个htm/文件的时候，会先将这个个页面加载进内存，形成一个树状结构，这个结构称为之为dom树 image.png
这个树可分为： - Document：文档对象，整个树对象 - Element：标签对象 - Attribute：属性对象 - Text：文本对象 - Comment：注释对象 - Node：节点对象。每个对象称为节点 ## DOM的分类 HTML DOM
XML DOM ## Document对象 1. 获取标签对象 - getElementById()：根据id属性来获取标签对象 - getElementsByName()：根据name属性来获取标签对象们 - getElementsByTagName()：根据标签名字来获取标签对象们 - getElementsByClassName()：根据class属性值来获取标签对象们 javascript <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> window.onload = function() { var divs = document.getElementsByTagName("div"); var divd = document.getElementById("a"); var divf = document.getElementsByName("b"); var divg = document.getElementsByClassName("c"); document.write(divs.length + "<br>"); document.write(divd.length + "<br>"); document.write(divf.length + "<br>"); document.write(divg.length + "<br>"); } </script> </head> <body> <div id="a"></div> <div name="b"></div> <div class="c"></div> </body> </html> 2. 创建元素和文本对象 - createElement() - createTextNode() 注意：创建出来的对象都是游离状态(不确定跟那个节点）image.png ## Element对象 - setAttribute()：设置属性 - getAttribute()：获取属性 - removeAttribute()：删除属性 ```html <!DOCTYPE html>
约吗


<a name="i7g3O"></a>
## Node对象

方法：

- appendChild()：把新的子节点添加到指定节点
- removeChild()：删除子节点

属性：<br />parentNode：获取父节点对象

小案例：<br />方法二：<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/21490994/1650201009554-63d608af-5080-48ed-a42d-de9ed54fa52c.png#clientId=uf09221df-7e6c-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=546&id=ub5e7cde2&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1092&originWidth=1674&originalType=binary&ratio=1&rotation=0&showTitle=false&size=993203&status=done&style=none&taskId=u1c7c5d4b-8fe7-4dd8-a00f-c0daa569c57&title=&width=837)
<a name="XLKfo"></a>
## js控制样式设置
方式一：
```javascript
<script>
  window.onload = function() {
    var bt = document.getElementById("bt");
    bt.onclick = function() {
      var div = document.getElementById("div");
      //div.style = "border:1px solid red; font-size:100px; color:red";
      div.style.border = "1px solid red";
      div.style.backgroundColor = "greenyellow";
      div.style.fontSize = "100px";
    }
  }
</script>
<body>
  <div id="div">约吗</div>
  <input type="button" value="添加样式" id="bt">
</body>

方式二：

<head>
  <style>
    .div {
      border: 1px solid red;
      font-size: 100px;
      color: greenyellow;
    }
  </style>
  <script>
    function add() {
      var div = document.getElementById("div");
      div.setAttribute("class","div");
    }
  </script>
</head>
<body>
  <div id="div">约吗</div>
  <input type="button" value="添加样式" onclick="add()">
</body>

方式三：

<head>
  <style>
    .div {
      border: 1px solid red;
      font-size: 100px;
      color: greenyellow;
    }
  </style>
  <script>
    function add() {
      var div = document.getElementById("div");
      div.className = "div";
    }
  </script>
</head>
<body>
<div id="div">约吗</div>
<input type="button" value="添加样式" onclick="add()">
</body>

js的事件处理

常见的事件有哪些呢？
点击事件：
onclick：鼠标单击事件
ondblclick：鼠标双击事件

加载事件：
onload：当页面加载完触发该事件

焦点事件：
onblur：元素失去焦点
onfocus：元素获取焦点

blur()：失去焦点
focus()：获取焦点

键盘事件：
onkeydown：某个键盘按键被按下
onkeypress：某个键盘按键被按下并松开
onkeyup：某个键盘按键被松开

鼠标事件：
onmousedown：鼠标按钮被按下
onmousemove：鼠标被移动
onmouseout：鼠标从某元素移开
onmouseover：鼠标移到某元素之上
onmouseup：鼠标按键被松开

表单事件：
onchange：域的内容被改变
onselect：文本被选中
onsubmit：确认按钮被点击

表单提交方式？
方式一：

<html>
  <head>
    <meta charset="utf-8">
    <title>表单提交</title>
    <script>
      function aaa() {
        return true;
        //return false;
      }
    </script>
  </head>
  <body>
    <form action="success.html" method="get" onsubmit="return aaa()">
      用户名：<input type="text" name="username"><br>
      密码：<input type="password" name="password"><br>
      <input type="submit" value="注册">
    </form>
  </body>
</html>

方式二：

<head>
  <meta charset="utf-8">
  <title>表单提交</title>
  <script>
    window.onload = function() {
      var submit = document.getElementById("submit");
      submit.onsubmit = function() {
        //return false;
        return true;
      }
    }
  </script>
</head>
<body>
  <form action="success.html" method="get" id="submit">
    用户名：<input type="text" name="username"><br>
    密码：<input type="password" name="password"><br>
    <input type="submit" value="注册">
  </form>
</body>

方式三：

<html>
<head>
  <meta charset="utf-8">
  <title>表单提交</title>
  <script>
    function aaa() {
      //提交表单

      //获取表单对象
      var submit = document.getElementById("submit");

      //表单提交
      submit.submit();
    }
  </script>
</head>
<body>
  <form action="success.html" method="get" id="submit">
    用户名：<input type="text" name="username"><br>
    密码：<input type="password" name="password"><br>
    <!-- <input type="button" value="注册"> -->
  </form>

  <input type="button" value="注册" onclick="aaa()">
</body>
</html>

课后练习：
1.隔行换色
2.复选框的全选和全不选
3.表单校验
用户名和密码不能为空，如果为空要有提示
4.省市二级联动