精华内容
下载资源
问答
  • HTML获取Dom元素的方法

    千次阅读 2019-05-24 18:50:03
    HTML获取Dom元素的方法 1.getElementsByTagName()方法:获取标签,获取的值是一个数组形式;然后再通过数组下标来准确得到自己想要的值 //getElementsByTagName 获取标签方法 获取的值是一个数组形式 //通过...

    HTML中获取Dom元素的方法

    1.getElementsByTagName()方法:获取标签,获取的值是一个数组形式;然后再通过数组下标来准确得到自己想要的值

    //getElementsByTagName  获取标签方法 获取的值是一个数组形式
            //通过索引下标获取第一个li  定义变量接收
            const xx = document.getElementsByTagName("li")[0];
            //打印结果
            console.log(xx);
    

    通过索引下标取值的方法不直观 因为以后数据都是从后台动态获取,前台动态生成添加

    2.querySelector()方法: 选择器查询 querySelector(传入的选择器名称 也可以是标签 ),如果参数是标签,其元素值不止一个的话;那么只会返回满足条件的第一个元素值 例如:

    var pp=document.querySelector("li") ;
    

    传入的参数:如果是类选择器,必须添加" .";如果是id选择器,必须添加" # ";否则会被当成标签来处理

    var pp=document.querySelector(".fous") ; //通过类名准确选择所需要的元素
            console.log(pp);
    

    3。querySelectorAll()方法:与getElementsByTagName()方法有点类似;获取满足条件的所有元素—数组形式 ;通过索引下标方式来获取想要得到的值

    var rr=document.querySelectorAll("li");
            var xpr=document.querySelectorAll("li")[2];
            console.log(rr);
            console.log(xpr);
    

    针对这几个方法,做了一个小小的例子,供参考

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <ul>
        <li class="one">JAVA</li>
        <li class="two">C++</li>
        <li class="three">HTML</li>
        <li class="fous">PHP</li>
    </ul>
    
    <script>
    
        window.onload=function () {
            //getElementsByTagName  获取标签方法 获取的值是一个数组形式
            //通过索引下标获取第一个li  定义变量接收
            const xx = document.getElementsByTagName("li")[0];
            //打印结果
            console.log(xx);
    
        //  通过索引下标取值的方法不直观  因为以后数据都是从后台动态获取,前台动态生成添加
    
            //querySelector  选择器查询   querySelector(传入的选择器名称 也可以是标签 )
            //var pp=document.querySelector("li") ;
            //querySelector  获取单个元素,如果获取的元素不止一个,那么只会返回满足条件的第一个元素
    
            //传入的参数要求:如果是类选择器,必须添加" .";如果是id选择器,必须添加" # ";否则会被当成标签来处理
    
    
        // querySelectorAll   获取满足条件的所有元素---数组形式
        //  通过索引下标方式来获取想要得到的值
            var rr=document.querySelectorAll("li");
            var xpr=document.querySelectorAll("li")[2];
            console.log(rr);
            console.log(xpr);
        }
    </script>
    </body>
    </html>
    
    

    运行结果如:

    在这里插入图片描述

    展开全文
  • 既然DOM树是一个树结构,那么我们就可以使用遍历树结构的相关方法来对DOM树进行遍历,同时DOM2的”Traversal”模块又提供了两种新的类型,从而可以很方便地实现DOM树的先序遍历。 注:本文的5种方法都是对DOM的...
  • react的ref获取dom或者组件方法

    千次阅读 2019-01-22 14:13:53
    在vue,如果想获取DOM元素时,可以使用this.$refs.引用名称 在react也可以像vue,有类似的写法,如下 为元素添加ref引用 &amp;lt;h2 ref=&quot;test&quot;&amp;gt;这是h2标签&amp;lt;...

    1. 使用ref获取DOM的引用

    在vue中,如果想获取DOM元素时,可以使用this.$refs.引用名称
    在react中也可以像vue中,有类似的写法,如下

    1. 为元素添加ref引用
    <h2 ref="test">这是h2标签</h2>
    
    1. 在页面上获取元素
    this.refs.test
    

    2. 使用ref获取组件的引用

    1. 为组件添加ref引用
    <Text ref="hellow"/>
    
    1. 在页面上使用组件的引用
    this.refs.hellow
    

    注意点: 只要使用ref拿到组件的引用对象,它就是组件的实例对象,因此就可以调用这个组件的方法,或者它的属性

    展开全文
  • DOM中文手册

    2007-01-26 17:47:59
    DOM中文手册 详细的方法
  • vue操作Dom节点的方法

    千次阅读 2019-09-21 03:34:33
    1.vueref操作dom节点 <template> <div id="app"> <div ref="box">1111111111111111</div> <button @click="changeColor">改变</button> </div> ...

    1.vue中ref操作dom节点

     

    <template>
      <div id="app">
        <div ref="box">1111111111111111</div>
        <button @click="changeColor">改变</button>
      </div>
    </template>
    
    <script>
    export default {
      name: "app",
      data() {
        return {
        };
      },
      methods:{
        changeColor() {
          this.$refs.box.style.color = 'red'
        }
      }
    };
    </script>
    
    <style>
    
    </style>

     页面效果:

     

    转载于:https://www.cnblogs.com/v616/p/11261142.html

    展开全文
  • vue获取DOM方法

    万次阅读 2019-06-02 19:48:00
    在标签加上el='dom',然后在代码this.$els.dom这样就拿到了页面元素 例如:<div class='box' v-el: myBox>你好</div> 让你好的颜色显示为红色:this.$els.my-box.style.color = 'red' vue2.*版本...

    vue1.*版本中

    在标签中加上el='dom',然后在代码中this.$els.dom这样就拿到了页面元素

    例如:<div class='box'  v-el: myBox>你好</div>

    让你好的颜色显示为红色:this.$els.my-box.style.color = 'red'

    vue2.*版本中

    在标签中加上ref='dom',然后在代码中this.$refs.dom这样就拿到了页面元素

    例如:<div class='box' ref='myBox'>你好</div>

    让你好的颜色显示为红色:this.$refs.myBox.style.color = 'red

    展开全文
  • Vue操作dom方法

    万次阅读 2018-12-12 15:44:22
    1、 this.$refs.* 拿到虚拟Dom,可以进行真实dom的一切操作 1)在标签添加ref="...2、自定义指令,el就是当前环境下的Dom元素  el.style.color = "yellow";  console.log(el.tagName)...
  • React获取Dom方法

    千次阅读 2018-10-30 09:48:42
    1. js 常规dom操作方式,通过id获取dom 2.react原生函数findDOMNode获取dom 3.通过ref来定位一个组件,切记ref要全局唯一(类似id) import React, { Component } from 'react'; import ReactDOM from 'react-dom...
  • JS中DOM的创建方法

    千次阅读 2012-11-24 08:59:14
    1、createElement()创建节点 2、appendChild()方法可向节点的子节点列表的末尾添加新的子节点 ... js Dom方法的实例:  创建一个图层,并且在该图层显示出“abcd”文字  步骤:  (1)、创建该图层的节点
  • 有时候还是需要一些操作dom的功能.目前我在vue项目最常用两种方式操作dom;下面简单说一些.  第一种: 封装一个类似于jquery的函数.通过函数执行访问到dom元素.  第二种: 使用vue提供的实例属性$refs获取到dom. ...
  • 火狐Firefox使用XML DOM 方法

    千次阅读 2014-06-19 17:57:28
    火狐Firefox使用XML DOM 方法  2008-07-02 15:10:13| 分类: 程序开发 |举报 |字号 订阅 Firefox的XML DOM 现在我们来看看Firefox的XML DOM实现,Firefox的开发人员采用更为标准的方法...
  • JS DOM insertAfter方法

    千次阅读 2016-11-09 01:08:16
    JS DOM操作 insertAfterJS DOM操作有insertBefore方法,但是很不人性化的,出乎意料外的并没有insertAfter方法,接下来我们自己写一个insertAfter方法
  • 页面获取iframedom方法

    千次阅读 2012-07-03 13:04:07
    页面获取iframedom方法 $("#inner",top.frames['test'].document).html(); 兼容方法: top.frames['test'].document获取iframe的document对象 不兼容: document.frames['test'].document;只有ie识别 ...
  • 通常我们的用法是:document.getElementById("表格id名")....因为reset()是DOM对象的方法,不是jquery对象的方法。$("#表格id名")获取的是jquery对象,$("#表格id名")[0]获取的是DOM对象(为什么加上个[0]就是DOM对象
  • VUE获取DOM节点的方法

    千次阅读 2020-08-29 14:39:48
    在vue项目,获取dom节点可以用ref属性,这个属性就是来获取dom对象的。 这个属性就相当于给这个标签起了一个类似于id的东西。 <template> <div class="contaier" ref="box" style="width: 100px;height:...
  • 获取所有dom元素的方法(使用递归)

    千次阅读 2019-02-19 10:22:29
    获取所有的dom元素的方法:
  • Java使用DOM方法解析XML文件

    千次阅读 2018-06-13 23:34:31
    Java使用DOM方法解析XML文件 1、简介 XML现在已经成为一种通用的数据交换格式,平台的无关性使得很多场合都需要用到XML,本博客将介绍用DOM方法解析XML文件的方法,DOM解析是将XML文件全部载入到内存,组装成一...
  • React获取DOM节点的两种方法

    千次阅读 2020-01-05 07:06:06
    React提供的获取DOM元素的方法有两种,一是react-dom中的findDOMNode(),二是refs。 1、findDOMNode findDOMNode通常用于React组件的引用,其语法如下: import ReactDOM from 'react-dom'; ReactDOM.findDOMNode...
  • JS获取DOM元素的方法

    千次阅读 2017-12-01 10:36:53
     1)使用方法:document.getElementById("domId")  其中,domId为要选取元素的id属性值  2)兼容性:低于IE8版本的IE浏览器对getElementById方法的实现是不区分元素ID号的大小写的,并且会返回匹配name属性的...
  • DOM操作之getAttribute方法

    千次阅读 2016-12-19 18:41:47
    DOM操作之getAttribute方法
  • Dom4jSelectNodes使用方法

    千次阅读 2018-05-31 10:35:47
    XPath 是 XML 的内容,这里 SelectNodes 是 dom4j  XmlDocument 或 XmlNode 的一个方法。SelectNodes 使用 XPath 来选取节点。重要语法SelectNodes("item")从当前节点的儿子节点选择名称为 item 的...
  • 但是在js或者jQuery操作元素节点以及属性都是使用DOM对象或者jquery对象。下面将介绍如何把html字符串转为Jquery对象或者DOM对象。 原html字符串如下: var text="<div id='overLay' style='width:50px;...
  • JSIframe之间获取DOM方法

    千次阅读 2017-12-27 17:03:22
    1.在iframe子页面获取父页面的元素:1、window.parent.document....获取父页面js方法:xxxx(); 2.在父页面获取iframe子页面的元素: var child = document.getElementById("mainFrame")
  • DOM方法添加标签

    千次阅读 2017-09-09 16:07:14
    DOM动态添加标签
  • 在angular4的ts文件进行类似于dom操作的方法 在html页面 你好 在ts页面  var s = document.querySelector('.nihao');  s['style'].width = '190px'; 这样就能够改变div的样式了

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 489,392
精华内容 195,756
关键字:

dom中的一些方法