请问DOM对象是什么意思啊

当前的DOM对象不存在导致获取对象属性时出错，检查树结构渲染的先后顺序。

DOM是以层次结构组织的节点或信息片断的集合。文档对象模型（Document Object Model）是给HTML与XML文件使用的一组API。DOM的本质是建立网页与脚本语言或程序语言沟通的桥梁。

浏览器对象是一个分层结构，也称为文档对象模型

（1）打开网页后，首先看到的是浏览器窗口，即顶层的window对象。

（2）其次，看到的是网页文档的内容，即document文档。

（3）定位对象windowdocumentmyformtext1

或documentmyformtext1因为window窗口对象是所有页面的根对象，所以常常省略。

(4)地址对象location和历史对象history，它对应IE浏览器中的地址栏和前进/后退按钮。

我们希望用户双击

todo

进入编辑状态后输入框自动获取焦点，而不是需要先手动点一下。input

元素有一个

focus

方法可以来帮我们完成这个事情，但现在的问题是如何在

Vue

中获得这个

input

元素，从而来 *** 作它。Vue

的自定义指令可以完成这个功能。

我们先来看看

Vue

官网的一个示例：

然而，有的情况下，你仍然需要对普通

DOM

元素进行底层 *** 作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下：

一个输入框：

当页面加载时，该元素将获得焦点

(注意：

autofocus

在移动版

Safari

上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：

//

注册一个全局自定义指令

`v-focus`

Vuedirective('focus',

{

//

当被绑定的元素插入到

DOM

中时……

inserted:

function

(el)

{

//

聚焦元素

elfocus()

}

})

如果想注册局部指令，组件中也接受一个

directives

的选项：

directives:

{

focus:

{

//

指令的定义

inserted:

function

(el)

{

elfocus()

}

}

}

指令是什么，就是用来指导被绑定的元素的行为，我们之前接触过

v-if、v-model、v-bind

等指令，官方文档说的非常清楚，我们可以自己注册一个指令，然后实现某些钩子函数，从而指定被绑定元素的行为。这里我们依葫芦画瓢，实现一个

focus

指令，这个指令实现了

inserted

钩子函数，这个函数在被绑定的元素被插入

dom

时触发，且被绑定的元素会作为参数传入钩子函数，我们就可以在函数中对它 *** 作。

我们在

Vue

对象中声明局部指令：

<script>

let

id

=

0;

//

用于

id

生成

var

app

=

new

Vue({

methods:

{

},

directives:

{

focus:

{

inserted:

function

(el)

{

elfocus()

}

}

}

})

</script>

然后就可以使用这个指令了，把它绑定到编辑框，这样编辑框出现时指令就被触发，从而聚焦。

<input

type="text"

value="编辑

todo"

v-focus="true"

v-if="editedTodo!==null

&&

editedTodoid===todoid"

v-model="todotitle"

@keyupenter="editDone(todo)"

@keyupesc="cancelEdit(todo)"/>

注意因为元素一旦出现一定要聚焦的，所以条件始终为

true。

现在用户体验好多了！快打开浏览器体验一下吧！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:vue-auto-focus:

控制自动聚焦行为的

vue

指令方法

原文链接： >

js中有四种获取dom的方法：

根据ID获取对象：documentgetElementById(ID);

根据class获取对象数组：documentgetElementsByClassName("box");

根据tag获取对象数组：documentgetElementsByTagName("p");

根据name获取对象数组：documentgetElementsByName(NAME);

用jquery选择器就多得去了，一般都用jquery，js一大串代码用jquery几个符号搞定。

根据ID获取对象：$('#ID');

根据class获取对象数组：$("box");

根据tag获取对象数组：$("p");;

根据name获取对象数组：$('input[name="nw"]');

DOM0（属性绑定，兼容性好）：将一个函数赋值给一个事件处理属性

在dom上直接绑定事件（一个事件只能绑定一次），没有事件传播（事件一旦发生就立即调用句柄执行）。缺点：一个事件处理程序只能对应一个处理函数。

监听方法：

1在标签内写onclick事件

<input id="myButton" type="button" value="Press Me" οnclick="alert('thanks');" >

alert()中的this的值会变成全局(window)对象的引用（在 严格模式 中为 undefined）。

2在JS写onlicke=function（）{}函数

documentgetElementById("myButton")onclick = function () {

    alert('thanks');

}

this的指向

用DOM0级的方式绑定事件是在元素对象的作用域内运行，因此在事件函数内的this属性不是引用全局对象，而是引用当前元素对象，可以用this获取当前元素的属性。

$btnonclick=function(){alert('输出当前元素id：'thisid);}

删除DOM0事件处理程序，只要将对应事件属性置为null即可：

btnonclick = null；

DOM2：（函数绑定，兼容性不好）

采用addEventListener来注册事件，支持 事件流 的捕获过程和冒泡过程（注册事件的时候第三个参数控制）

只有一个监听方法，添加事件处理程序：addEventListener()，可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用。

移除事件处理程序：removeEventListener()，不能移除匿名添加的函数。

它们都有三个参数：

第一个参数是事件名（如click）；

第二个参数是事件处理程序函数；

第三个参数表示 是否在捕获时执行事件处理函数 ，默认为false表示在冒泡阶段调用。

和DOM0级事件的绑定一样，这种方式也是依附在元素的作用域执行，因此this保存的同样是当前元素对象的引用。

注：

a)  eventName的值均不含on，如注册鼠标点击事件eventName为click

b)  给EventListener传递一个（普通或者箭头）函数，则处理函数中的this指的是指当前dom元素；如果传递函数的引用，则this指全局对象，除非通过bind调用想要访问对应作用域对象：

elementaddEventListener('click', thisonclick2bind(this) ,false);

c)  通过addEventListener添加的事件处理程序，只能通过removeEventListener来删除，也就是说通过addEventListener添加的匿名函数将无法被删除。

d)IE中的DOM2级事件处理使用了attachEvent和detachEvent来实现，这俩个方法接受俩个相同的参数，事件处理名称和事件处理函数。IE8级更早版本只支持冒泡阶段触发句柄，所以attachEvent添加的事件都会被添加到冒泡阶段，并且要在事件前面加on（例如onclick）

documentgetElementById("myTest")attachEvent("onclick", function(){alert(1)});

//等价于

documentgetElementById("myTest")addEventListener("click", function(){alert(1)}, false);

只有DOM2级包含事件流：事件捕获阶段、处于目标阶段和事件冒泡阶段

<span>

    <a></a>

</span>

点击a后capturing(捕捉)阶段事件传播会从document-> span->a，然后发生在a，最后bubbling(冒泡)阶段事件传播会从a->span->document 。

区别：

如果定义了两个dom0级事件，dom0级事件会覆盖；dom2不会覆盖，会依次执行

dom0和dom2可以共存，不互相覆盖，但是dom0之间依然会覆盖

dom2提供了一种更精细的手段控制listener的触发阶段（即可以选择捕获或者冒泡）

DOM3事件

DOM3级事件规定了一下几种事件：

UI事件，当用户与页面上的元素交互时触发；

焦点事件，当元素获得或者失去焦点时触发；

鼠标事件，当用户通过鼠标在页面上执行 *** 作时触发；

滚轮事件，当使用鼠标滚轮（或类似设备）时触发；

文本事件，当在文档中，输入文本时触发；

键盘事件，当用户通过键盘在页面上执行 *** 作时触发；

合成事件，当为IME（Input Method Editor，输入法编辑器）输入字符时触发；

变动事件，当底层Dom结构发生变化时触发；

DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件。包括IE9在内的主流浏览器都支持DOM2级事件，IE9也支持DOM3级事件。

DOM中的事件模拟（自定义事件）

DOM3级还定义了自定义事件，自定义事件不是由DOM原生触发的，它的目的是让开发人员创建自己的事件。要创建自定义事件可以由createEvent("CustomEvent")

返回的对象有一个initCustomEvent（）方法接收如下四个参数

1）type：字符串，触发的事件类型，自定义，例如 “keyDown”，“selectedChange”;

2）bubble（布尔值）：标示事件是否应该冒泡；

3）cancelable(布尔值)：标示事件是否可以取消；

4）detail（对象）：任意值，保存在event对象的detail属性中；

可以像分配其他事件一样在DOM中分派创建的自定义事件对象，如：

var  div = documentgetElementById("myDiv");

EventUtiladdEventHandler(div,"myEvent", function () {

    alert("div myEvent!");

});

EventUtiladdEventHandler(document,"myEvent",function(){

    alert("document myEvent!");

});

if(documentimplementationhasFeature("CustomEvents","30")){

    var e = documentcreateEvent("CustomEvent");

    einitCustomEvent("myEvent",true,false,"hello world!");

    divdispatchEvent(e);

}

这个例子中创建了一个冒泡事件myEvent，eventdetail的值被设置成了一个简单的字符串，然后在div和document上侦听该事件。因为在initCustomEvent中设置了事件冒泡，所以当div激发该事件时，浏览器会将该事件冒泡到document。

写一个行内onclick，行外赋值onclick，和evenrlistener，怎么输出？

为什么一般在冒泡阶段，而不是在捕获阶段注册监听 

以上就是关于请问DOM对象是什么意思啊全部的内容，包括:请问DOM对象是什么意思啊、Vue2.x Todo之自定义指令实现自动聚焦的方法、vue指令 全局指令（获取焦点）等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！