【js】Dom基本语法

最新推荐文章于 2022-05-15 22:29:11 发布

啧啧啧~~

最新推荐文章于 2022-05-15 22:29:11 发布

阅读量254

点赞数

本文链接：https://blog.csdn.net/weixin_43689100/article/details/85304008

版权

Dom (document object model)即文本对象模型，document对象指的是html中所有对象。

1.Dom元素的获取：

（1）getElementsByClassName
getElementsByClassName 获取出来的对象是集合类型（即数组类型）因为class类名称可以绑定多个不同的元素，有长度属性 length代表其长度。
innerHTML 对元素的HTML内容进行操作，js里面不能进行隐式迭代（即不能操作一堆元素），所以要用该属性需要对集合中每个元素分开写，或者用for循环遍历。
具体如下：

<body>
<button class="but">按钮1</button>
<button class="but">按钮2</button>
<script>

//获取到了网页里面的按钮
var but=document.getElementsByClassName("but");
console.log(but);
but.innerHTML="按钮";                  //这样写是错误的；

but[0].innerHTML="按钮"；                //这样写才正确；
but[1].innerHTML="按钮";

   //或者也可以这样写
for(var i=0;i<but.length;i++){               
        but[i].innerHTML="按钮";
    }
</script>
</body>

（2）getElementById 获取的是唯一的元素；
（3）getElementsByName 通过元素的name名称获取，获取到的也是多个元素，使用方法同getElementsByClassName；
(4)getElementsByTagName 通过元素的名称获取；
（5）getElementsByTagName获取。

2、Dom元素的事件：

js里面的事件（被动行为）
事件的分类：键盘事件鼠标事件窗口事件移动端的事件（触屏事件）
键盘事件：keydown(键盘按下) keyup（键盘按下后弹起的那一瞬间） keypress（包括按下和弹起）
鼠标事件：mousedown mouseup click doubleclick mouseenter(鼠标进入) mouseleave(鼠标离开水平 mouseout(鼠标离开垂直) mouseover(鼠标悬停) mousemove（鼠标移动）
窗口事件：load（加载） focus(获焦) blur（失焦）
对元素基本事件进行绑定：（js的事件前面都带on）
方法一：在元素的行内直接进行绑定

<body>
<button onclick="btnData()">提交</button>
 <script>
 function btnData(){
            alert("按钮")
        }
  </script>
</body>

方法二：在脚本区域直接动态绑定事件
注：脚本写在元素之前要考虑获取的元素是否存在
window.function(){}
窗口的加载完成事件（函数会预加载（隐式函数除外）页面加载完成后再加载事件，如果不写这句话，那么获取不到元素如果把script写在相应id下面（body里面的）就不用写这个）
在这里插入图片描述
将js写在head里面：

方法三：事件的监听（委托事件）

...
 window.function(){
 var btn=document.getElementsByClassName("btnname");
 for(var i=0;i<btn.length;i++){
 btn[i].addEventListener("click",btnSave);
                function btnSave(){
                    console.log("mine");
                     this.removeEventListener("click",btnSave);
                }
            }
        }
...
<button class="btnname">按钮</button>

this ：在事件的回调函数里面指代的是当前事件的执行对象
addEventListener:添加事件的监听；
removeEventListener ：移除事件的监听，在移除的时候 addEventListener 里面的内部函数得改成外部函数
事件的冒泡：
如果定义相同的事件，那么事件从子元素到父元素再到上一级（依次递推）执行，一层一层往外冒，这就是冒泡原理。
常见冒泡的阻止：
event.stopPropagation(); 阻止事件的冒泡，但不能阻止默认行为
preventDefault 阻止事件的默认行为
return false;在js中不能阻止事件的冒泡，可阻止事件的默认行为（可在jQ中阻止事件冒泡）
event.preventDefault(); 阻止事件的默认行为
事件的默认行为：指的是自带的默认功能（如网页中点击鼠标右键弹出菜单）

啧啧啧~~

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【js】Dom基本语法

Dom (document object model)即文本对象模型，document对象指的是html中所有对象。1.Dom元素的获取：（1）getElementsByClassNamegetElementsByClassName 获取出来的对象是集合类型（即数组类型）因为class类名称可以绑定多个不同的元素，有长度属性 length代表其长度。innerHTML 对元素的HTM...
复制链接

扫一扫