飞道科技

飞道科技文档总汇

Dom 属性和方法

属性(Attribute)

前一章节,我们已经介绍过Dom节点的属性,通常我们在html页面中在一个节点的开始标签的标签名称后面添加属性,不同属性之间使用空格隔开。

<tagname attr1="value1" attr2=value2 attr3='value3' attr4>
</tagname>

属性值为一个字符串

上例中,attr1attr3的属性值都是一个字符串,但有时候我们使用双引号,在另外一些时候我们使用单引号。

多数时候,我们在书写html的时候,都应该使用双引号,这是一个习惯。但有的时候,我们也会使用单引号,典型的情况是:我们在初始化的时候将一整行数据绑定到列表的一个属性上,因为属性值必须为一个字符串,所以我们需要将数据转换成字符串,而当我们将其转换为字符串之后,通常这个字符串中便会有双引号,这时候如果属性值外层使用双引号的话,就会出错,所以这时候我们会使用单引号避免这问题。

const tpl = `<div data-value=''></div>`;
const data = JSON.stringify({a: 'test'});
// render(data, tpl);

事实上,attr2的属性值也是一个字符串,所以我们定下来这样的规范,即属性值必须加引号(双引号或单引号)。这样就不会有人会误以为一些属性值为数字或布尔值。

attr4,有些属性甚至没有值,只是定义这个属性即可,典型的有类似disable,readonly,controls这样的属性。一般情况下,这一类属性用来决定两种状态。

获取/设置属性值

我们使用节点元素的getAttribute来获取某一个属性值,使用setAttribute设置属性值。

// 属性值为字符串
dom.getAttribute('attr-name');
// 属性值为数字,需要转换
parseInt(dom.getAttribute('attr-name'), 10);
// 属性值为boolean,需要使用字符串来判定
dom.getAttribute('attr-name') === 'true';

属性(Property)

一部分DOM节点元素也提供了一些属性方便我们使用, 如idstyle等。我们可以直接使用这些属性进行一些操作。像前面介绍过的,此属性(Property)不同于彼属性(Attribute)。

样式

样式style属性估计是我们使用最多的属性了,通过它,我们可以使用JavaScript脚本操作页面上的元素,使它改变颜色,形状等。如我们将某个节点元素的背景色修改为红色

node.style.backgroundColor = 'red';

方法

前面我们已经提到过了一些dom节点元素的方法,以及设置和获取属性(Attribute)的方法。除了那些之外,一些特定的节点还有一些独特的方法,比如Formsubmit方法,比如Videoplay,stop方法等。通过这些方法,才将一个静态的页面变成为了可以接受用户事件的页面。