web7(dom)

最新推荐文章于 2022-07-12 16:59:53 发布

蒙蒙小公举

最新推荐文章于 2022-07-12 16:59:53 发布

阅读量306

点赞数

分类专栏：前端文章标签： dom

本文链接：https://blog.csdn.net/qq_44102678/article/details/104510283

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

函数和对象

初级阶段
函数就是将一堆语句打包放在一起，先不执行，调用时才执行
调用时可以传入参数。
函数运行后可以返回值。
当全局变量和局部变量冲突时，想要使用全局变量a，则需要写为window.a

对象+数组=json;
JSON.stringify(json)
用来将json转化为标准字符串，存储或传输

JSON.parse(txt)
将存储或服务器传输的json字符串，格式化为标准json

document.write(
        JSON.stringify(json)
        JSON.parse(txt)
    )

dom文档对象模型

元素的获取
元素的遍历
元素的操作（创建、添加、替换、克隆、移除）
元素的属性操作
元素的事件操作
杂项
前端动画（页面交互）

1.元素的获取

getElementById 通过元素的id来获取元素。只能由document发起
getElementsByTagName 通过元素的名称来获得元素（得到的值是元素的集合）可以由文档或元素发起
getElementsByClassName() 通过元素的样式类名称来获得元素（得到的值是元素的集合）可以由文档或元素发起

querySelector
querySelectorAll
都是通过css选择器的帮助来选择元素
querySelector翻译第一个符合的元素
querySelectorAll返回所有符合要求的元素集合
可以由文档或元素发起

2.元素的遍历

节点，元素和文本都是节点。

						 parentNode

 previousElementSibling                     nextElementSibling

 firstElementChild       children(集合)       lastElementChild

获取元素的父节点：parentNode()
获取元素的前一个同胞元素:previousElementSibling()
获取元素的后一个同胞元素:nextElementSibling()
获取元素的第一个孩子： firstElementChild()
获取元素的最后个孩子： lastElementChild()

3.元素的操作

var ul = document.getElementById('ul');
    // 1、创建
    // 创建了一个li元素
    var newLi = document.createElement('li');
    var txt = document.createTextNode('新的');
    newLi.appendChild(txt);
    // newLi.innerHTML = '新的';

    // 2、添加
    // ul.appendChild(newLi)
    // ul.insertBefore(newLi,ul.children[2])

    // 3、替换
    ul.replaceChild(newLi,ul.children[1])

    // 4、克隆
    // cloneNode(bool)
    //     克隆，会克隆元素自身，属性，不会克隆事件。
    //     参数的真假，负责元素的子孙节点是否被克隆。
    ul.replaceChild(
        newLi.cloneNode(true),
        ul.children[0]
    )

    // 5、移除
    // ul.removeChild(ul.children[2])
    ul.children[1].remove()

4.元素的属性操作

 // 1、通用的操作
     setAttribute(name,value)
     getAttribute(name)
     removeAttribute(name)
     hasAttribute(name) // 判断有没有xx属性，返回布尔值。

    // 2、系统认可的属性
    //     元素.name 可读可写
     id、src、href ...

    // 3、样式相关的属性（class、style）
    // class也是系统认可的属性，但是class是es中的关键字，因此，
    // 使用classname属性名称来替代class。

    // 元素.style.cssText 可读可写，对style属性的值做整体的设置。
    // 元素.style.cssname 可读可写
    //     cssname 如果遇到css名称有中横杠，则去掉中横杠，将其后的字母大写。
   //例如：
    img.style.cssText = 'border-radius:50%';
    img.style.borderRadius = '1px solid red';


    // 4、表单的属性操作
    // 表单的值有两套，默认值（html的代码值）、真实值（提交值）。
    // 任何表单元素都可以使用value属性来获取提交值（包括textarea）
    //形式为 元素.value
    checked、selected、readonly、disabled它的值都是布尔值。

注意:
元素.innerText
元素.innerHTML
元素.outerHTML
元素.outerText
innerXX和outerXX的区别：innerXX表示只包含元素标签之间的内容
而outerXX表示包含连元素标签在内的内容

5.元素的事件操作

标签内书写onclick，实际上是属性，只是这个属性关联到一个事件来执行。
元素的事件有两个独立的区域，互不干扰，互相独立。
唯一区间：只能保留最后一次附加的函数
要移除唯一区间的事件，只需要再次指定事件的处理函数为null就可以。

监听区间：
    不会发生覆盖，要移除必须要知道函数的名称，匿名函数无法移除。

<h1 id="h1" onclick="alert(1)">123123</h1>
<script>
var h1 = document.getElementById('h1');

h1.onclick = function () {
    alert(2);
}
h1.onclick = function () {
    alert(3);
}
h1.onclick = null;

h1.addEventListener('click',function () {
    alert(4);
});
h1.addEventListener('click',function () {
    alert(5);
})
h1.addEventListener('click',cuihua);
h1.removeEventListener('click',cuihua);

    function cuihua() {
        alert(6)
    }
</script>
-----------------------------------------------------------------
js可以主动触发事件，
h1.onclick()
h1.click()
    都可以主动触发事件，onclick()不会执行浏览器与事件关联的默认动作
    例如a(链接)的点击事件，onclick()不会真的跳转而click()会跳转。

事件的分类：
    鼠标事件、键盘事件、剪贴板事件、表单事件

鼠标事件详解

    onmouseenter(进入)   onmouseleave(离开)  非冒泡

    onmouseover(进入)     onmouseout(离开)  冒泡
    事件的冒泡，是指，当一个元素附加事件后，它的子孙节点是否也触发这个事件。
    大多数事件都具有冒泡，大多数表单事件都是非冒泡。
    onwheel  当鼠标滚轮滚动时
    ondblclick  当双击时
    oncontextmenu  当鼠标右键点击时。
    onmousedown  鼠标按下事件
    onmouseup 鼠标松开事件
    onmousemove 鼠标移动事件
    
  document.onmousedown = function () {
        txt.innerHTML += '<div>鼠标按下了</div>'
    }
    document.onmouseup = function () {
        txt.innerHTML += '<div>鼠标松开了</div>'
    }
    document.onmousemove = function () {
        txt.innerHTML += '<div>鼠标移动了</div>'
    }

（自定义右键菜单）实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义右键菜单</title>
    <style>
        #list{
            width: 500px;
            margin: 50px auto;
            border: 1px solid black;
            background-color: red;
        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        li{
            text-indent: 2em;
            line-height: 50px;
            margin: 1px;
            background-color: white;
        }
        #menu{
            position: fixed;
            left:50%;
            top:70%;
            background-color: #eee;
            outline: none;
            display: none;
        }
        #menu div{
            padding: 10px 20px;
            cursor: pointer;


        }
        #menu div:hover{
            background-color: #bbbbbb;
        }
    </style>
</head>
<body>
<div id="list">
    <ul>
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
        <li>55555</li>
        <li>66666</li>
    </ul>
</div>
<div id="menu" tabindex="-1"><!--tabindex表示获得焦点-->
    <div>新增</div>
    <div>删除</div>
    <div>修改</div>
</div>
<script>
    var arrLi = document.querySelectorAll('#list li');

    //全局注册一个变量来记录当前被选中的 数据li
    var li;
    // var arrLi = document.getElementById('list').getElementsByTagName('li');
    for(var i=0;i<arrLi.length;i++){
        //鼠标右键事件
        arrLi[i].oncontextmenu = li_rightClick;
    }

    //当menu菜单失去焦点时，菜单隐藏
    menu.onblur = menu_blur;
    function menu_blur() {
        menu.style.display = 'none';
    }

    menu.children[1].onclick = delete_click;
    function delete_click() {
        //1.执行删除
        li.remove();
        //2.关闭自定义菜单
        //失去焦点
        menu.blur()
    }

    function li_rightClick(e) {
        //1.屏蔽系统右键菜单
        //return false;//不采取（民间做法）
        var e = e||event;
        e.preventDefault();
        //2.将菜单移到鼠标所在的位置，并显示，获得焦点
        menu.style.left = e.clientX+'px';
        menu.style.top = e.clientY+'px';
        //菜单以块级方式显示
        menu.style.display = 'block';
        //获得焦点
         menu.focus();
        //3.将当前的li记录到全局
        li = e.target;

    }
</script>
</body>
</html>