javascriptdom对象,BOM对象

不帅的帅

java 前端

javascriptdom对象,BOM对象

@author:杜勇帅

@email:820482874@qq.com

6DOM对象

1元素节点对象

1.DOM树介绍节点(Node)：HTML文档中的所有内容都可以称之为节点包含【元素节点、属性节点、文本节点】、注释节点和文档节点。文档(Document)：就是指HTML或者XML文件。元素(Element)：HTML文档中的标签可以称为元素。 2.获取元素节点 a)通过标签名获取元素节点语法：document.getElementsByTagName("标签名"); 返回值：返回符合条件的元素节点集合！集合中的每个元素才是元素节点对象！ b)通过class获取元素节点语法：document.getElementsByClassName("class属性值"); 返回值：返回符合条件的元素节点集合！集合中的每个元素才是元素节点对象！ c)通过id获取元素节点语法：document.getElementById("id属性值"); 返回值：返回符合条件的元素节点对象。补充1：在同一个文档中，id属性值不能相同。补充2：CSS选择器使用最多的是：class选择器。 js选中文档中符合条件的元素节点，常见使用：id选择器原因：1)效率高！ 2)js开发中，更常见的是直接获取某一个元素节点对象，而不是元素节点集合

注意：目前我们所学的获取元素节点，都是基于从整个html文档中来找符合条件的元素。 document对象代表的就是html文档，document也是window对象的一个属性！ document == window.document

<h1 class="box">我是一个h1标签</h1>
    <strong>我是一个strong标签</strong>
    <p class="box">我是一个段落标签1</p>
    <div>我是一个div标签</div>
    <p id="box">我是一个段落标签2</p>
    <script>
        // 3.通过id获取元素节点
        var box = document.getElementById("box");
        box.style.backgroundColor = "red";
        /*// 2.通过class获取元素节点
        var arr = document.getElementsByClassName("box");
        for(var i = 0; i < arr.length; i++) {
            arr[i].style.backgroundColor = "yellow";
        // 需求：通过标签来选中文档中所有符合条件的p标签，然后给p标签添加背景颜色
        // 1.通过标签名获取元素节点集合
        var arr = document.getElementsByTagName("p");
        // 2.通过循环，获取元素节点集合中的每一个元素节点
        for(var i = 0; i < arr.length; i++) {
            // arr[i],获取到arr集合中的每一个元素节点对象
            // 添加背景颜色语法：元素节点.style.backgroundColor = "颜色值";
            // 3.给每一个元素节点对象添加背景颜色
            arr[i].style.backgroundColor = "yellow";
    </script>

2入口函数

script标签位置：body和head 如果一定要在head的script标签中获取元素节点，该如何实现呢？？？解决：使用入口函数！

入口函数：作用：等待文档中的标签和内容全部加载完毕之后，在来执行入口函数中的代码！语法：window.onload = function() { // 书写js代码！ } 注意点：一个文档中，最多只能有一个入口函数。

强调：如果script标签在head中，并且在script中需要获取某个元素节点，那么必须在入口函数中来执行获取操作！如果script标签在body中，那么script标签必须在body标签内部的最后面，这样才不需要入口函数否则依旧需要入口函数

<script>
        window.onload = function () {
            /*var box = document.getElementById("box");
            box.style.backgroundColor = "red";*/
            console.log("第一个入口函数");
    </script>
</head>
    <h1 class="box">我是一个h1标签</h1>
    <strong>我是一个strong标签</strong>
    <p class="box">我是一个段落标签1</p>
    <div>我是一个div标签</div>
    <p id="box">我是一个段落标签2</p>
    <a href="04.document文档.html">进入document文档网页</a>
    <script>
        var box = document.getElementById("box");
        box.style.backgroundColor = "red";
    </script>

3单击事件

事件三要素：事件源：响应事件的元素节点事件：事件元素需要触发的事件，例如：单击事件、鼠标键事件、焦点事件等等事件驱动程序：响应事件需要做的操作。

onclick -->单击事件

注意事项： 1)事件的匿名函数体中，this指的就是“事件源” 2)什么时候响应单击事件？？点击单击事件源的时候响应，如何响应？浏览器会执行：事件源.onclick(); 如果想要手动触发某个元素的的单击事件，该如何实现？？？手动调用：事件源.onclick(); 3)取消事件源绑定的事件。实现方式：事件源.onclick = null;

window.onload = function () {
            // 1.获取事件源
            var btn = document.getElementById("btn");
            // 2.给事件源添加单击事件
            btn.onclick = function () {
                console.log("btn响应单击事件");
                // console.log(this); // 此处this指的就是btn，也就是事件源
                // 3.在函数体中，就是书写事件驱动程序
                this.style.backgroundColor = "yellow";
            // btn.onclick(); // 手动触发单击事件
            // 需求：点击“#btn1”按钮，要求解除“#btn”的单击事件
            var btn1 = document.getElementById("btn1");
            btn1.onclick = function () {
                console.log("btn1响应单击事件");
                // 取消“#btn”的单击事件
                btn.onclick = null;
    </script>
</head>
    <!-- 需求：点击按钮，要求吧按钮的背景颜色设置为黄色 -->
    <button id="btn">单击按钮</button>
    <button id="btn1">取消btn的单击事件</button>
</body>

4document文档

<head>
    <meta charset="UTF-8">
    <title>武汉尚学堂官网</title>
</head>
<a href="#">百度一下1</a>
<a href="#">百度一下2</a>
<a href="#">百度一下3</a>
<a href="#">百度一下4</a>
<img src="img/27125326.jpg" alt="">
<img src="img/27125326.jpg" alt="">
<img src="img/27125326.jpg" alt="">
<img src="img/27125326.jpg" alt="">
<form action="#"><input type="text"></form>
<form action="#"><input type="text"></form>
<form action="#"><input type="text"></form>
<form action="#"><input type="text"></form>
<script>
    // document文档---获取元素节点
    // 获取文档中的 body元素
    // console.log(document.body);
    // 获取文档中的的所有超链接
    // console.log(document.links);
    // 获取文档中的的所有图片标签
    // console.log(document.images);
    // 获取网页中所有的图片
    /*for(var i = 0; i < document.images.length; i++) {
        var img = document.images[i];
        // 获取img元素节点的src属性值
        // 语法：元素节点.src
        console.log(img.src);
    // 获取文档中的的所有form标签
    // console.log(document.forms);
    // 获取文档中的所有元素
    // console.log(document.all);
    // 等效于：document.getElementsByTagName("*");
    /*var elements = document.getElementsByTagName("*");
    console.log(elements);*/
    // document文档---document其他操作
    // 返回当前页面存放的cookie值
    console.log(document.cookie);
    // 返回的就是当前网页的域名。
    console.log(document.domain);
    // 返回当前<title>标签里面的内容
    console.log(document.title);
    // 返回当前页面的全地址。
    console.log(document.URL);
    // 解码
    var decode = decodeURI(document.URL);
    console.log(decode);
    // 返回当前页面是从哪个一页面跳转过来的。
    console.log(document.referrer);
    console.log(decodeURI(document.referrer));
</script>

5获取from表单元素

<script>
        window.onload = function () {
            // 1.获取form元素节点
            // 语法：document.form元素的name属性值
            var form = document.login;
            // 2.获取表单域元素节点和表单按钮元素节点
            // 语法：form元素节点.name属性值
            var userName = form.userName;
            var password = form.password;
            var submit = form.submit;
            console.log(userName);
            console.log(password);
            console.log(submit);
    </script>
</head>
    <form action="" name="login">
        用户名：<input type="text" name="userName"> <br>
        密码：<input type="password" name="password"> <br>
        <input type="submit" value="登录" name="submit">
    </form>
</body>

6单机事件

onclick -->单击事件

该方式的事项步骤： 1.给标签添加onclick属性，属性值为响应事件之后需要执行的函数。明确了事件源和事件 2.声明一个函数，该函数名需要和onclick的属性值中调用的方法名保持一致。在函数中，就可以书写事件驱动程序。注意：该方式不被W3C推荐使用，原因：事件三要素不明确；无法实现内容和js相分离

注意事项： 1.给响应事件的函数传递事件源。 a)onclick="myClick(this);" 调用函数时，传递实参this。 b)function myClick(_this) {} 使用形参_this来接收实参this 2.响应单击事件的函数名不能命名为click,建议方法名取名见名知意。 3.响应单击事件的函数，只能为全局函数，不能是局部函数！

<script>
        function myClick(_this) {
            _this.style.backgroundColor = "yellow";
            console.log("单击事件");
    </script>
</head>
    <!-- 需求：点击按钮，要求吧按钮的背景颜色设置为黄色 -->
    <!-- onclick属性，代表给元素添加一个单击事件-->
    <!-- onclick属性值，该属性值就是设置响应单击事件之后需要执行的方法 -->
    <button id="btn" onclick="myClick(this);">单击按钮</button>
</body>

2.DOM文本和属性节点

1.内容节点(文本节点) innerHTML：设置或获取元素的文本内容(普通文本和html标签) innerText: 设置或获取元素的文本内容(普通文本) 注意：innerHTML是所有浏览器都支持的 innerText是IE浏览器和chrome浏览器支持的，旧版本的Firefox浏览器不支持。

<script>
        window.onload = function () {
            var btn1 = document.getElementById("btn1");
            var box = document.getElementById("box");
            btn1.onclick = function () {
                // 1.设置文本内容
                // box.innerHTML = "我是一个h1标签";
                box.innerHTML = "<ul>\
                                    <li>武汉</li> \
                                    <li>重庆</li> \
                                    <li>上海</li> \
                                    <li>北京</li> \
                                 </ul>";
                // 2.获取文本内容
                console.log(box.innerHTML);
            var btn2 = document.getElementById("btn2");
            btn2.onclick = function () {
                // 1.设置文本内容
                // box.innerText = "我是一个h1标签";
                box.innerText = "<ul>\
                                    <li>武汉</li> \
                                    <li>重庆</li> \
                                    <li>上海</li> \
                                    <li>北京</li> \
                                 </ul>";
                // 2.获取文本内容
                console.log(box.innerText);
    </script>
</head>
    <h1 id="box">我是一个标题标签</h1>
    <button id="btn1">innerHTML</button>
    <button id="btn2">innerText</button>
</body>

2.属性节点

属性节点操作方式： 1.当成普通js对象来操作属性点语法：元素节点.属性名中括号法：元素节点["属性名"]

<script>
        window.onload = function () {
            var image = document.getElementById("image");
            // 获取属性
            var btn1 = document.getElementById("btn1");
            btn1.onclick = function () {
                console.log(image.src); // 完整路径
                console.log(image["title"]);
                console.log(image.alt);
            // 设置属性
            var btn2 = document.getElementById("btn2");
            btn2.onclick = function () {
                image.src = "img/aa.jpg";
                image["title"] = "美女";
    </script>
</head>
    <img src="img/27125326.jpg" alt="图片加载失败" title="小猴子" id="image">
    <button id="btn1">获取属性</button>
    <button id="btn2">设置属性</button>

2.使用DOM提供的方法来操作属性获取属性语法：元素节点.getAttribute("属性名"); 设置属性语法：元素节点.setAttribute("属性名", "属性值"); 判断某个属性是否存在语法：元素节点.hasAttribute("属性名"); 如果存在该属性，则返回ture，否则返回false 删除属性语法：元素节点.removeAttribute("属性名");

<script>
 window.onload = function () {
            var image = document.getElementById("image");
            // 获取属性
            var btn1 = document.getElementById("btn1");
            btn1.onclick = function () {
                console.log(image.getAttribute("src")); // 单存的属性值
                console.log(image.getAttribute("title"));
                console.log(image.getAttribute("alt"));
            // 设置属性
            var btn2 = document.getElementById("btn2");
            btn2.onclick = function () {
                image.setAttribute("src", "img/aa.jpg");
                image.setAttribute("title", "大美女");
            // 删除属性
            var btn3 = document.getElementById("btn3");
            btn3.onclick = function () {
                // 1.判断该属性是否存在
                if(image.hasAttribute("title")) {
                    // 2.如果存在，则进行删除操作
                    image.removeAttribute("title");
    </script>
</head>
    <img src="img/27125326.jpg" alt="图片加载失败" title="美猴王" id="image">
    <button id="btn1">获取属性</button>
    <button id="btn2">设置属性</button>
    <button id="btn3">删除属性</button>
</body>

3.使用className属性来操作class属性(为第一种方式的补充) 第一种方式，无法获取或设置class属性如果一定要使用点语法或中括号法来操作class属性，那么必须使用className来操作使用className的注意点：设置className属性值的时候，做的是覆盖操作！

第二种方式，可以获取或设置class属性操作class值的时候，也是做的覆盖操作！

<script>
        window.onload = function () {
            var box = document.getElementById("box");
            var btn1 = document.getElementById("btn1");
            var btn2 = document.getElementById("btn2");
            btn1.onclick = function () {
                console.log("className:" + box["className"]);
            btn2.onclick = function () {
                // box.className = "box3"; // 覆盖操作
                // 需求：要求保留以前的class值，并且新增一个class值
                // box.className = box.className + " box3";
                box.setAttribute("class", box.getAttribute("class") + " box3");
    </script>
</head>
    <h1 class="box1 box2" id="box">我是一个标题标签</h1>
    <button id="btn1">获取class属性值</button>
    <button id="btn2">设置class属性值</button>
</body>

3.DOM样式和节点操作

1.样式操作在js中所学的样式操作都只能操作行内样式，如果想要操作选择器中的样式要等到jQuery在学习获取样式获取单个样式语法：元素节点.style.样式名注意：样式名统一采用小驼峰命名法则。设置样式设置单个行内样式语法：元素节点.style.样式名 = "样式值"; 注意：a)样式名统一采用小驼峰命名法则。 b)如果“样式值”为数值型，那么可以使用双引号或单引号包裹，也可以不包裹如果“样式值”不是数值型，必须用双引号或单引号包裹建议：样式值统一采用双引号或单引号包裹。设置多个行内样式语法：元素节点.style.cssText = "样式名1: 样式值1; 样式名2: 样式值2; ..."; 例如：box.style.cssText = "background-color: red; opacity: 1; width : 400px;"; 注意：a)设置的多条样式，样式名单词之间采用减号(-)链接 b)多条样式值的规则，和选择器(或style属性值)中的规则一模一样。

补充：建议样式的操作，最好使用CSS来实现。原因：效率高！！！实现步骤： 1)给需要添加样式的元素节点新增一个class属性值 2)在style标签或css文件中，通过新增的class属性来选中该元素，然后再选择器中书写需要添加的样式

<script>
        window.onload = function () {
            var box = document.getElementById("box");
            // 获取单个样式
            var btn1 = document.getElementById("btn1");
            btn1.onclick = function () {
                console.log(box.style.backgroundColor);
                console.log(box.style.opacity);
                // 只能获取行内样式，不能获取选择器中的样式
                // console.log(box.style.width);
            // 设置单个行内样式
            var btn2 = document.getElementById("btn2");
            btn2.onclick = function () {
                box.style.backgroundColor = "red";
                box.style.opacity = 1;
                box.style.width = "400px";
            // 设置多个样式
            var btn3 = document.getElementById("btn3");
            btn3.onclick = function () {
                box.style.cssText = "background-color: red; opacity: 1; width : 400px;";
            var btn4 = document.getElementById("btn4");
            btn4.onclick = function () {
                box.className = box.className + " box";
    </script>
</head>
    <div id="box" class="block" style="background-color: blue; opacity: 0.3;"></div>
    <button id="btn1">获取行内样式</button>
    <button id="btn2">设置单个行内样式</button>
    <button id="btn3">设置多个行内样式</button>
    <button id="btn4">通过CSS设置样式</button>
</body>

2.clientWidth和clientHeight clientWidth: 返回width属性+左右padding的值

clientHeight：返回height属性+上下padding的值

好处： 1)能获取选择器中设置的宽高样式值

2)返回的结果是数值，不携带单位，方便直接做运算。

<script>
        window.onload = function () {
            var btn = document.getElementById("btn");
            var box = document.getElementById("box");
            btn.onclick = function () {
                console.log("clientWidth: " + box.clientWidth);
                console.log("clientHeight: " + box.clientHeight);
    </script>
</head>
    <div id="box"></div>
    <button id="btn">获取元素宽高</button>
</body>

3.位置，和我们CSS所学的绝对定位想相关。 offsetParent: 通过绝对定位的元素，从而获取绝对定位的参照元素。

offsetTop：通过绝对定位的元素，从而获取距离参照元素顶部的距离

offsetLeft：通过绝对定位的元素，从而获取距离参照元素左侧的距离

<script>
        window.onload = function () {
            var btn = document.getElementById("btn");
            var child = document.getElementById("child");
            btn.onclick = function () {
                // 通过绝对定位的元素，从而获取绝对定位的参照元素。
                // console.log(child.offsetParent);
                // 通过绝对定位的元素，从而获取距离参照元素顶部的距离
                console.log("offsetTop：" + child.offsetTop);
                // 通过绝对定位的元素，从而获取距离参照元素左侧的距离
                console.log("offsetLeft：" + child.offsetLeft);
    </script>

4DOM访问关系

DOM访问关系找父节点(找亲父亲)，一个儿子只有一个父亲，所以返回的就是父元素节点。语法：子节点.parentNode 返回值：返回的是父元素节点对象。找子节点(找亲儿子)，一个父亲可以有多个儿子，所以返回的就是集合，集合中的每一个元素才是子元素节点对象语法：父节点.children 返回值：返回的是子元素节点集合

<script>
        window.onload = function () {
            var btn1 = document.getElementById("btn1");
            var child = document.getElementById("child");
            btn1.onclick = function () {
                child.parentNode.style.backgroundColor = "red";
            var btn2 = document.getElementById("btn2");
            var list = document.getElementById("list");
            btn2.onclick = function () {
                var arr = list.children;
                for(var i = 0; i < arr.length; i++) {
                    arr[i].style.backgroundColor = "red";
    </script>

5DOM节点操作

<script>
        window.onload = function () {
            // 创建一个元素
            var box = document.createElement("p");
            box.innerHTML = "我是动态创建出来的段落标签";
            box.title = "段落标签";
            box.style.backgroundColor = "yellow";
            // 在父元素内部的末尾追加一个元素
            var btn1 = document.getElementById("btn1");
            var parent = document.getElementById("parent");
            btn1.onclick = function () {
                parent.appendChild(box);
            // 在父元素内部的指定位置插入一个元素
            var btn2 = document.getElementById("btn2");
            btn2.onclick = function () {
                var txt = document.getElementById("txt");
                parent.insertBefore(box, null);
            // 删除元素
            var btn3 = document.getElementById("btn3");
            btn3.onclick = function () {
                var txt = document.getElementById("txt");
                parent.removeChild(txt);
            // 删除所有子节点
            var btn4 = document.getElementById("btn4");
            btn4.onclick = function () {
                // 删除父元素中所有的子元素
                parent.innerHTML = "";
    </script>
</head>
    <div id="parent">
        <p>我是一个p标签</p>
        <strong id="txt">我是一个strong标签</strong>
        <span id="box">我是一个span标签</span>
    <button id="btn1">追加节点</button>
    <button id="btn2">插入节点</button>
    <button id="btn3">删除节点</button>
    <button id="btn4">删除所有子节点</button>
</body>

元素节点拷贝(克隆) 剪切插入元素获取到元素，直接把元素插入文档的操作，那么就是剪切操作复制插入元素 a)先对元素进行赋值 b)执行元素插入操作元素节点克隆语法：需要复制的元素节点.cloneNode(boolean类型的参数) 参数：如果为true，代表连同子元素一起克隆。如果为false(默认为值)，则不克隆子元素！

<script>
        window.onload = function () {      
            var src = document.getElementsByClassName("src")[0];
            var des = document.getElementById("des");
            var btn1 = document.getElementById("btn1");
             * 执行剪切、插入操作
            btn1.onclick = function () {
                des.appendChild(src);
            var btn2 = document.getElementById("btn2");
             * 执行复制、插入操作
            btn2.onclick = function () {
                // 执行src复制操作
                var cloneNode = src.cloneNode(true);
                // 把克隆的元素追加到des内部末尾
                des.appendChild(cloneNode);
    </script>
</head>
    <div class="src">
        <p>我是一个段落标签</p>
        <h1>我是一个标题标签</h1>
    <div id="des">
    <button id="btn1">移动元素节点</button>
    <button id="btn2">复制元素节点</button>
</body>

下面是一个添加删除的小例子

<script>
        window.onload = function () {
            var btn = document.getElementById("btn");
            var box = document.getElementById("box");
            // 给“添加内容”按钮添加一个单击事件
            var index = 0;
            btn.onclick = function () {
                // 1.创建元素节点
                var div = document.createElement("div");
                var input = document.createElement("input");
                var delBtn = document.createElement("button");
                // 2.给创建的元素添加内容、样式和属性
                div.style.margin = "5px 0";
                input.type = "file";
                delBtn.innerHTML = "删除" + ++index;
                // 3.把创建的元素节点添加进入文档
                box.appendChild(div);
                div.appendChild(input);
                div.appendChild(delBtn);
                // 4.点击“删除”按钮，执行删除操作
                delBtn.onclick = function () {
                    // this-->事件源 -->就是响应单击事件的"删除按钮"
                    // box.removeChild(this.parentNode);
                    // this.parentNode.parentNode.removeChild(this.parentNode);
                    // remove()方法也能删除元素，属于非W3C的规范方法，但是浏览器几乎都支持
                    this.parentNode.remove();
    </script>
</head>
    <button id="btn">添加内容</button>
    <div id="box">
    </div>

4.DOM表单操作

1.value属性

表单操作，此处中讲得就是表单属性属性操作。重要的表单属性：value、checked、selected、disabled 强调：以上四个属性都属于读写属性。 value属性：用于设置或获取“表单域”的内容和“表单按钮”的显示文字。

<script>
        window.onload = function () {
            var btn1 = document.getElementById("btn1");
            var userName = document.getElementById("userName");
            // 获取内容
            btn1.onclick = function () {
                userName.value = "admin";
            // 设置内容
            var btn2 = document.getElementById("btn2");
            btn2.onclick = function () {
                console.log(userName.value);
    </script>
</head>
    姓名：<input type="text" id="userName"> <br>
    <button id="btn1">获取文本输入框内容</button>
    <button id="btn2">设置文本输入框内容</button>
</body>

2.checked: 设置或获取“单选框”和“复选框”的选中状态! 判断是否被选中 checked：返回值为true，则证明被选中，否则证明没有被选中设置某一个被选中 checked：设置的属性值为true，代表设置选中，否则代表设置不选中

获取用户选中的那个单选框，然后获取选中单选框的value值 1)遍历所有的单选框(name属性值相同的) 2)判断每一个单选框的选中状态 checked：返回值为true，则证明被选中，否则证明没有被选中 3)如果某一个单选框被选中，那么输出该单选框的value属性值

<script>
        window.onload = function () {
            var btn1 = document.getElementById("btn1");
            btn1.onclick = function () {
                // 获取所有的单选框元素集合
                var sexArr = document.getElementsByClassName("sex");
                // 通过循环，遍历所有的单选框
                for(var i = 0; i < sexArr.length; i++) {
                    // 判断每一个单选框的选中状态
                    if(sexArr[i].checked) {
                        // 输出被选中单选框的value属性值
                        console.log(sexArr[i].value);
                        // 因为单选框只能被选中一个，所以找到符合条件的单选框之后，可以跳出循环
                        // 但是复选框可以选中多个，所以找到其中一个符合条件的复选框之后，还需要继续循环
                        break;
             * 手动设置“未知”为默认选中，设置value属性值为“3”的单选框选中
             *     1)遍历所有的单选框(name属性值相同的)
             *     2)判断单选框的value属性值是否为“3”
             *     3)如果某个单选框的value属性值为“3”，则把该单选框设置为选中
             *          checked: 设置的属性值为true，代表设置选中，否则代表设置不选中
            var btn2 = document.getElementById("btn2");
            btn2.onclick = function () {
                // 获取所有的单选框元素集合
                var sexArr = document.getElementsByClassName("sex");
                // 通过循环，遍历所有的单选框
                for(var i = 0; i < sexArr.length; i++) {
                    // 判断单选框的value属性值是否为“3”
                    if(sexArr[i].value === "3") {
                        // 把该单选框设置为选中
                        sexArr[i].checked = true;
                        // 因为单选框只能被选中一个，所以找到符合条件的单选框之后，可以跳出循环
                        // 但是复选框可以选中多个，所以找到其中一个符合条件的复选框之后，还需要继续循环
                        break;
    </script>
</head>
    <input type="radio" class="sex" name="sex" value="1">女
    <input type="radio" class="sex" name="sex" value="2">男
    <input type="radio" class="sex" name="sex" value="3">未知
    <br><br>
    <button id="btn1">获取选中的性别</button>
    <button id="btn2">设置选中的性别</button>
</body>

3selected属性，用于设置或获取“下拉列表”选中。注意：selected属性是作用于option标签上面的。判断是否被选中 selected：返回值为true，代表被选中，否则代表没有被选中设置option被选中 selected: 设置值为true，则代表被选中，否则代表不被选中。

<script>
        window.onload = function () {
            var city = document.getElementById("city");
             * 获取用户选中的option，然后输出option的value属性值
             *     1)遍历下拉列表中的所有option元素
             *     2)判断option元素是否被选中
             *          selected：返回值为true，代表被选中，否则代表没有被选中
             *     3)把选中的option的value属性值输出
            var btn1 = document.getElementById("btn1");
            btn1.onclick = function () {
                // 获取下拉列表中所有的option
                var options = city.children;
                // 通过循环，遍历下拉列表中的所有option元素
                for(var i = 0; i < options.length; i++) {
                    // 判断每一个option是否被选中
                    if(options[i].selected) {
                        // 输出被选中option的value属性
                        console.log(options[i].value);
             * 设置“武汉”为默认讯中，也就是设置value属性值为“027”的option被选中
             *      1)遍历下拉列表中的所有option元素
             *      2)判断每一个option元素的value属性值是否为“027”
             *      3)把符合条件的option设置为默认选中
             *           selected: 设置值为true，则代表被选中，否则代表不被选中。
            var btn2 = document.getElementById("btn2");
            btn2.onclick = function () {
                // 获取下拉列表中所有的option
                var options = city.children;
                // 通过循环，遍历下拉列表中的所有option元素
                for(var i = 0; i < options.length; i++) {
                    // 判断每一个option的value属性值是否为“027”
                    if(options[i].value === "027") {
                        // 设置value属性值为“027”的option为选中
                        options[i].selected = true;
             * 设置“重庆”、“北京”、“武汉”、“上海”为默认选中
            var btn3 = document.getElementById("btn3");
            btn3.onclick = function () {
                // 获取下拉列表中所有的option
                var options = city.children;
                // 通过循环，遍历下拉列表中的所有option元素
                for(var i = 0; i < options.length; i++) {
                    // 判断每一个option的value属性值是否为“023”、“021”、“027”、“020”
                    if(options[i].value === "023" || options[i].value === "021" || options[i].value === "027" || options[i].value === "020") {
                        // 设置value属性值为“027”的option为选中
                        options[i].selected = true;
    </script>
</head>
    故乡：<select id="city" size="4" multiple>
            <option value="023">重庆</option>
            <option value="021" selected>北京</option>
            <option value="027">武汉</option>
            <option value="020">上海</option>
            <option value="022">长沙</option>
            <option value="025">广州</option>
         </select>
    <button id="btn1">获取选中的城市</button>
    <button id="btn2">设置选中的城市</button>
    <button id="btn3">设置选中多个城市</button>
</body

4 disabled属性：设置或获取表单元素的选中状态补充：disabled属性不但可以作用于表单元素上面，还能作用于button标签上面

<script>
        window.onload = function () {
            var txt = document.getElementById("txt");
            var submit = document.getElementById("submit");
            // 判断表单元素是否被禁用
            console.log(txt.disabled);
            console.log(submit.disabled);
            // 设置表单元素为禁用
            var sex = document.getElementById("sex");
            sex.disabled = true;
            // 取消表单按钮的禁用状态
            submit.disabled = false;
            var btn = document.getElementById("btn");
            console.log(btn.disabled);
            btn.disabled = false;
    </script>
</head>
    <input type="text" id="txt">
    <input type="submit" id="submit" disabled>
    <input type="radio" name="sex"> 男
    <input type="radio" name="sex"> 女
    <input type="radio" id="sex" name="sex"> 未知
    <button id="btn" disabled>我是一个普通按钮</buttonid>
</body>

5表单事件操作

需求1：点击button[id="submit"]按钮，实现form表单的提交工作实现1：form表单元素节点.submit() 作用于表单上面，当表单提交时触发。

需求2：点击button[id="reset"]按钮，实现form表单的重置工作实现2：form表单元素节点.reset() 作用于表单上面，当表单重置时触发。

<script>
        window.onload = function () {
            var submitBtn = document.getElementById("submit");
            submitBtn.onclick = function () {
                // 实现form表单元素的提交服务器工作
                document.login.submit();
            var resetBtn = document.getElementById("reset");
            resetBtn.onclick = function () {
                document.login.reset();
    </script>
</head>
    <form action="http://www.baidu.com" name="login">
        <input type="text" name="username" placeholder="请输入用户名..."> <br>
        <input type="password" name="password" placeholder="请输入密码..."> <br>
    </form>
    <button id="submit">提交数据</button>
    <button id="reset">重置数据</button>
</body>

下面是一个百度和360同事搜索的例子

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        form {
            /*text-align: center;*/
            width: 290px;
            margin: 0 auto 15px;
        input[type="text"] {
            width: 200px;
        input[type="submit"] {
            width: 80px;
        iframe {
            border: 1px solid blue;
            width: 49.5%;
            height: 480px;
    </style>
</head>
    提交form表单数据时，直接跳转到某一个ifrme标签上面加载网页的实现方式。
        1)给form标签添加target属性，给iframe添加name属性
        2)要求target属性值和name属性值相同
    注意点：form表单中 target属性和name属性的属性值不要相同
    <form action="http://www.baidu.com/s" target="baidu_form" name="baidu_name">
        <input type="text" name="wd"> <!--name的属性值由百度服务器提供-->
        <input type="submit" value="搜索" name="submit">
    </form>
    <form action="http://www.so.com/s" style="display: none" target="so360_from" name="so360_name">
        <input type="text" name="q"> <!--name的属性值由360服务器提供-->
        <input type="submit" value="搜索">
    </form>
    <iframe name="baidu_form" frameborder="0"></iframe> <!--展示百度搜索结果-->
    <iframe name="so360_from" frameborder="0"></iframe> <!--展示360搜索结果-->
    <script>
         * 需求：点击“百度”的搜索按钮，把“百度”输入框中的数据赋值给“360”输入框中
         *      然后把“360”的form表单提交数据给服务器
        // 1.获取“百度”提交按钮，并且给该按钮添加单击事件
        var submit = document.baidu_name.submit;
        submit.onclick = function () {
            // 2.获取“百度”输入框中的数据，然后赋值给“360”输入框
            var value = document.baidu_name.wd.value;
            document.so360_name.q.value = value;
            // 3.手动触发“360”的form表单提交数据
            document.so360_name.submit();
    </script>
</body>

5.DOM事件

1双击事件连续、快速点击鼠标左键两下，就响应双击事件。如果同一个元素，同时添加了单击事件和双击事件，怎么区分？？？建议：不要对一个元素同时添加单击事件和双击事件！解决：判断两次单击事件的间隔时间，如果间隔时间很短，就不相应单击事件即可！网页实现方案一大堆。

<script>
        window.onload = function () {
            var btn = document.getElementById("btn");
            btn.ondblclick = function () {
                console.log("双击事件");
            btn.onclick = function () {
                console.log("单击事件");
    </script>
</head>
    <div id="btn"></div>

2焦点事件

焦点事件，一般用于输入框相关的标签。获得焦点 onfocus 失去焦点 onblur 使用场合：设置输入框的边框样式！

<script>
        window.onload = function () {
            var input = document.getElementById("uName");
            // 获得焦点
            input.onfocus = function () {
                console.log("获得焦点");
                this.style.border = "1px solid #5099CC";
            // 失去焦点
            input.onblur = function () {
                console.log("失去焦点");
                this.style.border = "1px solid #ccc";
    </script>
</head>
    <input type="text" id="uName">
</body>

3改变事件

改变事件，change事件主要用于下拉列表和文本输入框下拉列表：当下拉列表选中的option发生了变化，那么即刻响应改变事件注意1：change事件作用于select标签上面，而不是作用于option上面注意2：如果下拉列表一次只能选中一个option，那么获取被选中option的 value属性值可以直接通过 select元素节点.value 获取 select元素节点.value 一般在change事件的时候使用！文本输入框：失去焦点 + 文本框内容发生变化，满足以上两个条件才会触发change事件

需求：用户数输入的字母在失去焦点时全部变为大写失去焦点事件：可以实现，但是效率低。用户输入的数据未发生变化，但失去焦点时还需要把输入框中的数据变为大写改变事件：可以实现，效率高当失去焦点时，还需要内容发生变化，才会执行改变事件

<script>
        window.onload = function () {
            var city = document.getElementById("city");
            city.onchange = function () {
                console.log(this.value);
            var password = document.getElementById("password");
            password.onchange = function () {
                this.value = this.value.toUpperCase();
    </script>
</head>
    故乡：<select name="city" id="city">
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">广州</option>
            <option value="4">武汉</option>
         </select>
    密码：<input id="password" type="text" placeholder="请输入密码">
</body>

4鼠标事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: yellow;
    </style>
    <script>
        window.onload = function () {
    </script>
</head>
    <div id="box"></div>
</body>

鼠标事件（冒泡）

鼠标进入(onmouseover) + 鼠标离开(onmouseout) 会触发事件冒泡鼠标进入(onmouseenter) + 鼠标离开(onmouseleave) 不会触发事件冒泡现实开发中，使用“鼠标进入(onmouseenter) + 鼠标离开(onmouseleave)”最多补充：目前我们所学事件中，只有onmouseenter+onmouseleave不会触发事件冒泡其余的事件都会触发事件冒泡。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var parent = document.getElementById("parent");
            var child = document.getElementById("child");
            // 给parent添加鼠标进入和离开事件
            parent.onmouseover = function () {
                console.log("鼠标进入");
            parent.onmouseout = function () {
                console.log("鼠标离开");
    </script>
</head>
    <div id="parent">
        <div id="child"></div>
</body>

5键盘事件键盘事件，一般作用于整个文档。键盘按下(onkeydown) 键盘抬起(onkeyup)

<script>
        document.onkeydown = function () {
            console.log("键盘按下");
        document.onkeyup = function () {
            console.log("键盘抬起");
    </script>

下面是一个天猫切换图片事件(闭包)

<script>
        window.onload = function () {
            // 1.获取所有的li标签
            var list = document.getElementById("list").children;
            var box = document.getElementById("box");
            // 2.遍历list集合，获取每一个li标签
            for(var i = 0; i < list.length; i++) {
                // 3.给li标签添加onmouseenter事件
                // 方案一：闭包解决
                list[i].onmouseenter = function (index) {
                    return function () {
                        // 4.更新li标签对应的大图片，更改body的背景图片
                        var url = "url(mouse-img/0" + (index + 1) + "big.jpg)";
                        box.style.backgroundImage = url;
                }(i);
            console.log(i);
    </script>
</head>
    <div id="box">
        <!--box的上半部分设置的为背景图片，大图-->
        <!--box的下半部分设置的是小图，通过ul+li来展示的-->
        <ul id="list">
            <li><img src="mouse-img/01.jpg" alt="鼠标"></li>
            <li><img src="mouse-img/02.jpg" alt="鼠标"></li>
            <li><img src="mouse-img/03.jpg" alt="鼠标"></li>
            <li><img src="mouse-img/04.jpg" alt="鼠标"></li>
            <li><img src="mouse-img/05.jpg" alt="鼠标"></li>
    </div>

用添加属性的方法也可以实现

window.onload = function () {
            // 1.获取所有的li标签
            var list = document.getElementById("list").children;
            var box = document.getElementById("box");
            // 2.遍历list集合，获取每一个li标签
            for(var i = 0; i < list.length; i++) {
                // 3.给li标签添加onmouseenter事件
                // 方案二：利用js对象可以动态的添加属性的特性，以此来解决问题。
                list[i].index = i;
                list[i].onmouseenter = function (index) {
                    // 4.更新li标签对应的大图片，更改body的背景图片
                    var url = "url(mouse-img/0" + (this.index + 1) + "big.jpg)";
                    box.style.backgroundImage = url;
        }

6even属性

event对象，该对象是事件匿名函数的一个形参，每个事件的匿名函数都携带这个形参。 event对象，是响应事件时默认传递过来的，对于开发者而言，只需要掌握使用即可！建议：event对象形参名可以自定义，但是最好取名就叫做event，这样见名知意。

event对象的属性(了解)

event对象的方法(掌握)

// 键盘事件
    document.onkeydown = function (event) {
        // 判断用户是否是按下的：alt、shift和ctrl键
        /*console.log("ctrlKey：" + event.ctrlKey);
        console.log("shiftKey：" + event.shiftKey);
        console.log("altKey：" + event.altKey);*/
        // 判断用户按下的是键盘哪一个按键
        console.log("keyCode:" + event.keyCode);
        console.log("key:" + event.key);
    // 鼠标事件
    document.onmousedown = function (event) {
        /*if(event.button === 0) {
            console.log("左键按下");
        else if(event.button === 1) {
            console.log("中键按下");
        else if(event.button === 2) {
            console.log("右键按下");
        // 获取相对于浏览器窗口左上角的坐标
        console.log("clientX:" + event.clientX);
        console.log("clientY:" + event.clientY);
    /*var btn = document.getElementById("btn");
    btn.onclick = function (event) {
        console.log(event);
    };*/

事件冒泡：给子元素添加事件，如果父类元素也添加了对应的事件，那么当子元素响应该事件的时候，也会冒泡给该子元素的父类元素响应该事件

var child = document.getElementById("child");
    var parent = document.getElementById("parent");
    child.onclick = function (event) {
        console.log("click -- child");
        console.log(event.target);
        console.log(event.currentTarget);
    parent.onclick = function () {
        console.log("click -- parent");
         * target：最初触发事件的DOM元素，特指事件触发源  。
         * currentTarget：在事件冒泡阶段中的当前DOM元素，特指当前事件源
        console.log(event.target);
        console.log(event.currentTarget);
    document.body.onclick = function () {
        console.log("click -- body");
        console.log(event.target);
        console.log(event.currentTarget);
    }

如何阻止事件冒泡呢

event对象--方法 1)阻止事件冒泡 W3C提供的事件中，只有onmouseenter和onmuseleave默认实现了阻止事件冒泡 event.stopPropagation(); 2)取消事件默认行为

var child = document.getElementById("child");
    var parent = document.getElementById("parent");
    child.onclick = function (event) {
        console.log("click -- child");
        // 阻止事件冒泡
        event.stopPropagation();
    parent.onclick = function () {
        console.log("click -- parent");
    document.body.onclick = function () {
        console.log("click -- body");
    }

2)取消事件默认行为方式一：使用event对象提供的方法来实现 event.preventDefault(); 方式二：在事件函数内部，返回return false;来实现 return false;

var submit = document.form.btn;
        submit.onclick = function (event) {
            alert("哈哈");
            // 方式一：使用event对象提供的方法来实现
            // event.preventDefault();
            // 方式二：在事件函数内部，返回return false;来实现
            return false;
        var link = document.getElementById("link");
        link.onclick = function (event) {
            alert("xixi");
            // 方式一：使用event对象提供的方法来实现
            // event.preventDefault();
            // 方式二：在事件函数内部，返回return false;来实现
            return false;
        }

取消事件默认行为方式一：使用event对象提供的方法来实现 a)在 onclick="mySubmit(event);" 传递event对象 b)在mySubmit方法的方法体中，执行 event.preventDefault(); 方式二：在事件函数内部，返回return false;来实现 a)在 onclick="return myLink();" b)在 myLink的方法体中，返回return false;

<body>
    <form action="http://www.baidu.com" name="form">
        <input type="text" name="username">
        <!--<input type="submit" name="btn" onclick="mySubmit(event, this);">-->
        <input type="submit" name="btn" onclick="mySubmit();">
    </form>
    <!--<a href="http://www.baidu.com" id="link" onclick="myLink(event);">百度一下，你就知道</a>-->
    <!--<a href="http://www.baidu.com" id="link" onclick="return false;">百度一下，你就知道</a>-->
    <a href="http://www.baidu.com" id="link" onclick="return myLink();">百度一下，你就知道</a>
    <a href="javascript:;">尚学堂武汉校区</a>
    <script>
        function mySubmit() {
            alert("哈哈1");
            return false;
        function myLink() {
            alert("嘻嘻1");
            return false;
        /*function mySubmit(event, _this) {
            alert("哈哈1");
            console.log(event);
            console.log(_this);
            event.preventDefault();
        function myLink(event) {
            alert("嘻嘻1");
            event.preventDefault();
    </script>

下面是一个小蜜蜂练习

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img {
            position: fixed;
    </style>
    <script>
        window.onload = function () {
            var mifeng = document.getElementById("mifeng");
            document.onmousemove = function (event) {
                mifeng.style.top = event.clientY - mifeng.clientHeight/2 + "px";
                mifeng.style.left = event.clientX - mifeng.clientWidth/2 + "px";
    </script>
</head>
    <img src="mifeng/miaomifeng.gif" alt="小蜜蜂" id="mifeng">
</body>

5.BOM对象

<body>
<a href="javascript:;" id="link">打开百度首页</a>
<button id="btn">刷新网页</button>
<iframe width="800px" height="300px" src="http://www.baidu.com" frameborder="0"></iframe><br>
<input type="button" value="返回" onclick="goBack()">
<input type="button" value="前进" onclick="forward()">
<script>
    function goBack(){
        window.history.back()
    function forward() {
        window.history.forward();
    var link = document.getElementById("link");
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        location.reload();
     * BOM的学习核心是：window对象
     * 需要掌握的方法：
     *     window.location.href = "http://www.baidu.com";
     *     window.open("http://www.jd.com");
    link.onclick = function () {
        // 通过js打开某一个网页(在当前窗口打开)
        // window.location.href = "http://www.baidu.com";