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
2. document.body
3. document.embeds
4. document.head
5. document.images
项目
6. document.title
项目
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/");
同样,可以使用setAttribute( )方法来更新或更改HTML元素上现有属性的值。
例
document.getElementsByTagName("input")[0].setAttribute("type", "text");
完整代码:
项目 单击按钮可将输入按钮更改为输入字段:
2. 从元素中删除属性
removeAttribute()方法用于从指定元素中删除属性。
本示例从锚元素中移除href属性:
document.getElementsByTagName("a")[0].removeAttribute("href");
看完上述内容,你们对JavaScript中htmldom 元素的作用是什么有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。
网站标题:JavaScript中htmldom元素的作用是什么
链接地址:http://myzitong.com/article/iichis.html