JavaScript中htmldom元素的作用是什么

今天就跟大家聊聊有关JavaScript中htmldom 元素的作用是什么,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

创新互联长期为1000多家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为盱眙企业提供专业的网站建设、网站制作盱眙网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。

一、找到HTML元素

通常,使用JavaScript,想操作HTML元素。要做到这一点,必须先找到元素。有几种方法可以做到这一点。

找到DOM中的HTML元素的最简单的方法,是利用元素的id。

使用id="intro"找到元素 :

var myElement = document.getElementById("intro");

如果找到元素,则该方法将返回元素作为对象 (赋值给myElement)。

元素没有被发现,myElement将是空的。

二、通过标签名称找到HTML元素

找到所有

元素:

var x = document.getElementsByTagName("p");

这个例子使用id="main"找到元素 , 并且在"main"里面找到所有的

元素:

var x = document.getElementById("main"); var y = x.getElementsByTagName("p");

三、通过类名称找到HTML元素

如果想找到同一类名称的所有HTML元素,使用getElementsByClassName()。

例:

返回所有class="intro"的元素列表.

var x = document.getElementsByClassName("intro");

在Internet Explorer 8和早期版本中,按类名查找元素不起作用。

四、通过CSS选择器找到HTML元素

如果想找到所有的HTML元素,匹配指定的CSS选择器 (id, 类名, 类型, 属性, 属性值, 等等), 使用querySelectorAll()  方法。

此示例返回所有class="intro"的

元素列表。

var x = document.querySelectorAll("p.intro");

querySelectorAll() 方法在Internet Explorer 8和早期版本中不起作用。

五、通过HTML对象集合找到HTML元素

此示例查找id="frm1"的表单元素,在表单集合里,并显示所有的颜色值。

var x = document.forms["frm1"]; var text = ""; var i; for (i = 0; i < x.length; i++) {    text += x.elements[i].value + "
"; } document.getElementById("demo").innerHTML = text;

下面的HTML对象(或对象的集合)也可访问:

1. document.anchors

    项目    HTML Tutorial
 CSS Tutorial
 XML Tutorial
  

     

JavaScript中htmldom 元素的作用是什么

2. document.body

JavaScript中htmldom 元素的作用是什么


3. document.embeds

JavaScript中htmldom 元素的作用是什么

4. document.head

JavaScript中htmldom 元素的作用是什么

5. document.images

        项目             

       

JavaScript中htmldom 元素的作用是什么

6. document.title

              项目            

           

JavaScript中htmldom 元素的作用是什么

HTML DOM允许JavaScript获取和更改HTML元素的属性。

六、扩展

获取元素的属性值

getAttribute()方法用于获取元素上指定属性的当前值。

以下示例获取锚元素的href和title属性的值。

var link = document.getElementById("demo"); var href = link.getAttribute("href"); var title = link.getAttribute("title");

1. 在元素上设置属性

setAttribute()方法用于设置指定元素上的属性的值。

如果属性已经存在,则更新值;否则,将添加具有指定名称和值的新属性,将href属性的值设置为锚元素:

var x = document.getElementsByTagName("a")[0]; x.setAttribute("href", "https://www.baidu.com/css3/");

JavaScript中htmldom 元素的作用是什么

同样,可以使用setAttribute( )方法来更新或更改HTML元素上现有属性的值。

document.getElementsByTagName("input")[0].setAttribute("type", "text");

完整代码:

    项目          

单击按钮可将输入按钮更改为输入字段:

                 

JavaScript中htmldom 元素的作用是什么

2. 从元素中删除属性

removeAttribute()方法用于从指定元素中删除属性。

本示例从锚元素中移除href属性:

document.getElementsByTagName("a")[0].removeAttribute("href");

JavaScript中htmldom 元素的作用是什么

看完上述内容,你们对JavaScript中htmldom 元素的作用是什么有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。


网站标题:JavaScript中htmldom元素的作用是什么
链接地址:http://myzitong.com/article/iichis.html