美文网首页
DOM获取HTML元素

DOM获取HTML元素

作者: 敬酒_不吃 | 来源:发表于2019-03-23 09:05 被阅读0次

通过 id 查找 HTML 元素

下面的代码通过ID查找元素,给button注册点击事件。

<input type="button" value = "隐藏" id="btn" class="btn">
<script>
   var btn = document.getElementById("btn");
  btn.onclick = function(){
            if(flag===1){
                btn.value="显示";
                box.className = "hidden";
                flag=0;
            }
            else{
                btn.value="隐藏";
                box.className = "show";
                flag = 1;
            }
</script>
image.png

我们通过console.log(btn)在浏览器控制台打印出获取的元素。


image.png

通过标签名查找 HTML 元素

上述的例子,我们使用标签名获取元素,并在控制台打印。

  var tags = document.getElementsByTagName("input");
  console.log(tags);
image.png

可以看到,此时打印出来的不是单个元素,而是一个元素集合,此时注册按钮事件时应该取其中的一个元素。

 tags[0].onclick = function(){
            if(flag===1){
                btn.value="显示";
                box.className = "hidden";
                flag=0;
            }
            else{
                btn.value="隐藏";
                box.className = "show";
                flag = 1;
            }
        }

通过类名找到 HTML 元素

var classnames = document.getElementsByClassName("btn");
image.png

通过类名得到的也是一个元素集合,用法与标签名类似

classnames[0].onclick = function(){
           if(flag===1){
               btn.value="显示";
               box.className = "hidden";
               flag=0;
           }
           else{
               btn.value="隐藏";
               box.className = "show";
               flag = 1;
           }
       }

相关文章

  • JavaScript获取dom元素

    获取dom元素的方法 通过标签名获取dom元素 通过id名获取dom元素 通过类名获取元素 HTML5新方法 通过...

  • JavaScript DOM0级事件

    DOM0级事件1、通过DOM获取HTML元素2、获取HTML元素.事件=执行脚本语法:ele.事件=执行脚本功能:...

  • 元素对象和选择器

    html dom树 通过获取dom节点的方法获取到 元素对象 还能通过console.dir(元素对象) 打印出元...

  • DOM获取HTML元素

    通过 id 查找 HTML 元素 下面的代码通过ID查找元素,给button注册点击事件。 我们通过console...

  • js中的dom操作

    Dom 选择器 通过id来获取html元素 单个 通过tag标签名来获取html元素(累数组 多个) 通...

  • 学习W3school的DOM教程

    总而言之,HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。 DOM实例,学习全部DOM操作。

  • Vue 组件

    全局组件引入 局部组件引入 ref获取dom节点、获取组件引用 ref在html元素获取的是dom节点ref在组件...

  • JS:day02

    一、DOM(文档对象模型) 1、获取元素的几种方式 ①.通过 id 查找 HTML 元素(getElementBy...

  • 获取元素

    DOM在我们实际开发中主要用来操作元素根据ID获取根据标签名获取通过HTML5新增的方法获取特殊元素获取 get ...

  • DOM0级事件

    1.通过DOM获取HTML元素2.(获取HTML元素).事件=执行脚本说明:执行脚本可以是一个匿名函数,也可以是一...

网友评论

      本文标题:DOM获取HTML元素

      本文链接:https://www.haomeiwen.com/subject/zbsjvqtx.html