zoukankan      html  css  js  c++  java

  • JavaScript-DOM操作

    DOM

    document object modle 文档对象模型。把整个HTML文档看成一棵树，树的每一个节点都是一个对象，对象中包含对象的属性信息、文本信息、关系信息，其中节点分为：

    • 元素节点：HTML标签

    • 文本节点：标签中的文字部分

    • 属性节点：标签的属性

    给前端web加动作的步骤

    • 找到相应的标签

    • 给标签绑定相应的事件

    • 操作对应的标签

    查找标签

    直接查找

     // 通过id获取单个标签
 var div1 = document.getElementById(标签id名);
 ​
 // 通过标签名获得标签数组
 var arr1 = document.getElementsByTagName(标签名); 
 arr1[0] // 获取数组中第一个元素
 ​
 // 通过类名获得标签组
 var arr2 = document.getElementsByClassName(标签类名); 
 arr2[0] // 获取数组中第一个元素

    实例

     1  <!DOCTYPE html>
 2  <html lang="zh-ch">
 3  <head>
 4     <meta charset="UTF-8">
 5     <title>DOM</title>
 6     <style>
 7         div.di0{width:100px;height:100px;background-color: gray}
 8         a.a0{display:inline-block;width:100px;height:100px; background-color: pink}
 9  ​
10     </style>
11  </head>
12  <body>
13  <div id="div1" class="di0" name="div1">
14     OKOKOOK
15     <a href="https://www.jjzz.com" id="a1" class="a0" name="a1">jjzz官网</a>
16  </div>
17  <div id="div2" class="di0" name="div2">we are the champions</div>
18  <a href="http://www.haha.com" id="2" class="a0" name="a2" >哈哈网</a>
19  </body>
20  </html>
21  ​
22  #  方式1
23  var arr1 = document.getElementById('div1');
24  console.log(a1);
25  // 输出
26  <div id="div1" class="di0" name="div1">
27     OKOKOOK
28     <a href="https://www.jjzz.com" id="a1" class="a0" name="a1">jjzz官网</a>
29  </div>
30  ​
31  # 方式2
32  var arr2 = document.getElementsByClassName('a0');
33  ​
34  # 方式3 
35  var arr3 = document.getElementsByTagName('div');
    实例

    间接查找

    节点与节点之间并不是相互孤立的，它们存在的关系有：父节点、兄弟节点、子节点、所有子节点

    父节点兄弟节点子节点所有子节点
    parentNode nextSibling firstChild childNodes
      nextElementSibling firstElementChild children
      previousSibling lastChild  
      previousElementSibLing lastElementChild  

    获取父节点

     # 以bing主页面为例
 var arr1 =  document.getElementById('hp_table');
 p1 = arr1.parentNode();   // 获取父节点

    获取儿子节点

    # 沿用上例
 // 获取所有儿子节点
 p2 = arr1.children
 ​
 // 获取第一个儿子节点
 p3 = p1.firstElementChild;
 // 获取第二个儿子的节点
 p4 = p1.lastElementChild;

    获取兄弟节点

     p5 = arr1.nextElementSibling；  //找下一个兄弟 返回一个对象
 p6 = arr1.previousElementSibling;  //找上一个兄弟 返回一个对象

    操作标签

    标签的创建

     var obj = document.createElement('标签名')   // a div ul li span
 obj就是一个新创建出来的标签对象
 ​
 var obj1 = document.createElement('a') // 创建一个新的a标签

    标签的添加

     父节点.appendChild(要添加的节点)  //添加在父节点的儿子们之后
 父节点.insertBefore(要添加的节点,参考的儿子节点)  //添加在父节点的某个儿子之前
 ​
 var obj1 = document.createElement('div')；
 var a1 = document.createElement('a');
 obj1.appendChild(a1);
 var a3 = document.createElement('div');
 obj1.insertBefore(a3,a1);

    标签的删除

     父节点.removeChild(要删除的子节点)
 子节点1.parentNode.removeChile(子节点2)
 ​
 var a2 = document.createElement('a');
 obj1.appendChild(a2);
 obj1.removeChild(a2);

    标签的替换

     父节点.replaceChild(新标签,旧儿子)
 ​
 var a4 = document.createElement('span');
 obj1.replaceChild(a4,a1);

    标签的复制

    要复制的节点.cloneNode();       //括号里不带参数和带参数false，效果是一样的。不带参数/带参数false：只复制节点本身，不复制子节点。
 要复制的节点.cloneNode(true);   //带参数true：既复制节点本身，也复制其所有的子节点。

    标签的属性操作

    // 获取节点属性
 节点对象.getAttribute('属性名')
 ​
 // 设置节点的属性值
 节点对象.setAttribute('属性名','属性值')
 ​
 // 删除节点属性
 节点对象.removeAttribute('属性名')

    节点的文本操作

     节点对象.innerText = '只能写文字'  // 只能添加文本内容
 节点对象.innerHTML = '可以放标签'  // 可以自动识别添加标签和文本内容

    获取值操作

    .value 适用于以下标签，用户输入或者选择类型的标签：input 、select 、textarea

     1 <body>
 2     <a href="" value = 'xxx' class = 'akjds' name ='sajkfk'>文本</a>
 3     <input type="text" name="user" id="user">
 4     <select name="city" id="city">
 5         <option value="1" selected>北京</option>
 6         <option value="2">上海</option>
 7         <option value="3">天津</option>
 8     </select>
 9     <textarea name="" id="content" cols="30" rows="10">
10     </textarea>
11 </body>
12 
13 // 进行值操作，在网页的console界面
14 var a1 = document.getElementById('user');
15 var a2 = document.getElementById('city');
16 var a3 = document.getElementById('content');
17 a2.value; // 1
18 a2.value = 2; 
19 
20 a1.value = '请输入用户名'；
21 a3.value = '请在次输出如评论';
22 
23 # 可以通过网页更改value的值，通过  .value获取这些值。
    举例

    class类操作

    可以让网页动起来了

     1 className  获取所有样式类名(字符串)
 2  ​
 3  # 首先获取标签对象
 4  标签对象.classList.remove(cls)  删除指定类
 5  classList.add(cls)             添加类
 6  classList.contains(cls)       存在返回true，否则返回false
 7  classList.toggle(cls)         存在就删除，否则添加，toggle的意思是切换，有了就给你删除，如果没有就给你加一个
 8  <head>
 9     <meta charset="UTF-8">
10     <title>class操作</title>
11     <style>
12         .odiv1{
13             width: 100px;
14             height: 100px;
15             background-color: red;
16         }
17         .odiv2{
18             background-color: yellow;
19         }
20     </style>
21  </head>
22  <body>
23  <div id='box' class = 'odiv1'></div>
24  <script>
25           box.onclick = function () {
26           if(this.classList.contains('odiv2')){
27                 this.classList.remove('odiv2')
28           }else{
29             this.classList.add('odiv2')
30           }
31     }
32  </script>
33  </body>
    举例

    【红绿灯】

     1 <head>
 2     <meta charset="UTF-8">
 3     <title>事件-红绿灯</title>
 4     <style>
 5         .fa{display: inline-block; padding: 5px;border-radius: 10px;border-color: darkgray;border-style: solid}
 6         .div0{width:100px;height:100px;border-radius: 50px;
 7             border-color: white;background-color: gray;
 8             display: inline-block;margin: 0;}
 9         .div2{background-color: green;}
10         .div1{background-color: red;}
11         .div3{background-color: yellow;}
12     </style>
13  </head>
14  <body>
15  <div class="fa">
16     <div id="d0" class="div0 div1"></div>
17     <div id="d1" class="div0"></div>
18     <div id="d2" class="div0"></div>
19  </div>
20  ​
21  <script>
22  ​
23     function change()
24     {
25         var tem = document.getElementsByClassName('div0');
26         if (tem[0].classList.contains('div1'))
27         {
28             tem[0].classList.remove('div1');
29             tem[1].classList.add('div2');
30         }
31         else if (tem[1].classList.contains('div2'))
32         {
33             tem[1].classList.remove('div2');
34             tem[2].classList.add('div3');
35         }
36         else if (tem[2].classList.contains('div3'))
37         {
38             tem[2].classList.remove('div3');
39             tem[0].classList.add('div1');
40         }
41  ​
42     }
43     setInterval(change,1000);
44      
45  </script>
46  </body>
    红绿灯的实现

    指定CSS操作

      obj.style.backgroundColor="red" 

    1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如：

     obj.style.margin
 obj.style.width
 obj.style.left
 obj.style.position

    2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即使用驼峰体。如：

     obj.style.marginTop
 obj.style.borderLeftWidth
 obj.style.zIndex
 obj.style.fontFamily

    事件

    事件的三要素：

    • 事件源，引发后续事件的html标签

    • 事件，js定义的事件

    • 事件驱动，DOM

    常见事件

    事件名描述事件名描述
    onclick 鼠标单机 onkeyup 按下键盘的一个按键并释放时触发
    ondbclick 双击鼠标 onchange 文本内容或者下拉菜单的选项发生改变时
    onload 加载网页事件 onfocus 获得焦点，表示文本框获得鼠标
    onunload 关闭网页时 onblur 失去焦点，表示文本框等失去鼠标光标
    onsubmit 表单提交事件 onmouseover 鼠标悬停，鼠标悬停在图片上时
    onreset 重置表单 onmouseout 鼠标移出，鼠标移开图片时
    onresize 窗口变化时 onscroll

    获取事件源

    前文已经记录了

     var div1 = document.getElementById("标签ID");     //方式一：通过id获取单个标签
 var arr1 = document.getElementsByTagName("标签名");     //方式二：通过 标签名 获得 标签数组，所以有s
 var arr2 = document.getElementsByClassName("类名");  //方式三：通过 类名 获得 标签数组，所以有s　

    绑定事件

    方式一：直接绑定

     <div id="box1" ></div>
 ​
 <script type="text/javascript">
    var div1 = document.getElementById("box1");
     
    //直接绑定
    div1.onclick = function () {
        alert("hello");
    }
 </script>

    方式二：先单独定义函数，再绑定

    注意绑定函数的时候是直接跟的函数名，而不是函数名()

     <div id="box1" ></div>
 ​
 <script type="text/javascript">
    var div1 = document.getElementById("box1");   //绑定事件的第二种方式
    div1.onclick = fn;   //注意，这里是fn，不是fn()，fn()指的是返回值。
     
    //单独定义函数
    function fn() {
        alert("hello");
    }
 </script>

    方式三：行内绑定

    行内绑定使用的是函数名()，而不是函数名，因为绑定的这段代码不是写在js代码里的，而是被识别成了字符串。

     <!--行内绑定-->
 <div id="box1" onclick="fn()"></div>  //行内绑定的是fn()
 ​
 <script type="text/javascript">
 ​
    function fn() 
    {
        alert("hello");
    }
 </script>

    事件驱动

    【注意事项】

    • 在js里写属性值时，要用引号；

    • 在js里写属性名时，是backgroundColor，不是CSS里面的background-Color。记得所有的像css属性的text-，line-、backgroun-等在js中都写成驼峰

    onload事件

    当页面加载（文本和图片）完毕的时候，触发onload事件。

    作用：js的加载是和html同步加载的。因此，如果使用元素在定义元素之前，就容易报错。这个时候，onload事件就能派上用场了，把使用元素的代码放在onload里，就能保证这段代码是最后执行。

    【举例】

     <script type="text/javascript">
    window.onload = function ( ) {
        console.log(document.documentElement.clientWidth);
        console.log(document.documentElement.clientHeight);
 ​
        window.onresize = function () {
            console.log(document.documentElement.clientWidth);
            console.log(document.documentElement.clientHeight);
        }
    }
 </script>

    onscroll事件

    <body style=" 2000px;height: 2000px;">
    <div style="height: 200px;background-color: red;"></div>
    <div style="height: 200px;background-color: green;"></div>
    <div style="height: 200px;background-color: yellow;"></div>
    <div style="height: 200px;background-color: blue;"></div>
    <div style="height: 200px;background-color: gray;"></div>
    <div id = 'scroll' style=" 200px;height: 200px;border: 1px solid red;overflow: auto;padding: 10px;margin: 5px 0px 0px 0px;">
        <p> 
            叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳
            叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳
            叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳
            叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳   叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳
        </p>
    </div>
 </body>
 ​
 <script type="text/javascript">
 ​
    window.onload = function(){
 ​
        // 实施监听滚动事件
        window.onscroll = function(){
            console.log(1111);
            console.log('上'+document.documentElement.scrollTop);
            console.log('左'+document.documentElement.scrollLeft);
            console.log('宽'+document.documentElement.scrollWidth);
            console.log('高'+document.documentElement.scrollHeight);
        };
 ​
        var s = document.getElementById('scroll');
        s.onscroll = function(){
        // scrollHeight : 内容的高度+padding  不包含边框
            console.log('上'+s.scrollTop);
            console.log('左'+s.scrollLeft);
            console.log('宽'+s.scrollWidth);
            console.log('高'+s.scrollHeight);
        }
    }
 </script>

    　　

    仅供参考，欢迎指正
  • 相关阅读:
    [置顶] 文件批量重命名（工具）
    zookeeper源码分析之三客户端发送请求流程
    java set转list，数组与list的转换
    分布式电子邮件系统设计--转载
    redis 模糊删除实现
    eclipse 使用jetty调试时，加依赖工程的源码调试方法
    社交产品后端架构设计--转载
    solr服务器的查询过程
    What is corresponding Cron expression to fire in every X seconds, where X > 60? --转载
    zookeeper源码分析之二客户端启动
  • 原文地址：https://www.cnblogs.com/jjzz1234/p/11360252.html
Copyright © 2011-2022 走看看