JS——DOM小结(一)查找元素
来源:互联网 发布:oppo怎么隐藏软件 编辑:程序博客网 时间:2024/05/17 23:26
基础知识:
HTML中元素的定义:一个或一对标签定义的范围,如下为一个完整的元素。
<div title=”属性节点”>测试Div</div>
这样的一个元素中的节点可以分为三类
其中的title是元素节点的属性,还包括id、class、style。这几个属性值都可以通过DOM或设置。
DOM:Document Object Model 是针对HTML和XML的。通过 DOM,可以增、删、改、查所有的 HTML 元素以及这些元素所包含的文本和属性。也就是可以操作以上的所有节点及其的值。
DOM查找元素
getElementById:
通过元素的id名获得元素节点对象,就可以访问元素节点对象的属性。 document.getElementById('box')//获得了<div></div>这个元素节点对象
getElementsByTagName:
返回的是所有拥有相同元素名的元素列表。
document. getElementsByTagName(‘div’);//获得所有的div元素,返回数组
getElementsByName:
返回所有拥有相同Name名的元素列表。
document. getElementsByName(‘test’);//获得所有name属性值为test的元素
tagName:元素的标签名,innerHTML:元素节点的内容,在获得元素节点对象之后可以获得元素的标签名及文本内容。
document.getElementById('box').tagNeme;//div 得到元素名 document.getElementById('box').innerHTML//测试Div 得到元素中的内容 document. getElementsByTagName(‘div’)[0].tagNeme;//Li 得到元素名
DOM获取设置元素的属性值,有两种方法:
在HTML中:
<div id=”box” style=”color:red;”class=”test” title=”属性节点”>测试Div</div> <span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>
var box=document.getElementById('box');方法一:使用属性名
获取:
alert(box.id); //获得的是元素节点id属性的值:box alert(box.title); //获得的是title的属性值:属性节点 alert(box.style); //获得的是style属性对象: CSSStyleDeclaration alert(box.style.color); //获得的是style属性对象中color属性的值 alert(box.class); //class是保留字,结果为undefined alert(box.className); //所以使用 className获得class属性的值
设置:
box.style.color=’green’; //改为绿色
方法二:使用getAttribute()、setAttribute()、removeAttribute()
获得: document.getElementById('box').getAttribute('id'); 设置:document.getElementById('box').setAttribute('color','green');//改为绿
两种方法比较
对于自定义的属性:
使用属性名法,仅IE支持。
对于class属性
getAttribute(‘class’) // 非IE支持
getAttribute(‘className’)//仅IE支持
小结
以上是DOM对HTML元素的操作,通过DOM可以方便的获得元素及元素属性的值,对其中的属性值进行设置,初步的实现动态效果。
- JS——DOM小结(一)查找元素
- js学习—DOM元素
- 【元素的查找】js和jquery方法查找dom元素
- JS——DOM小结(二)操作节点
- DOM(一)DOM简介及查找元素的几个方法、操作特性
- Js 获取HTML DOM节点元素的方法小结
- 查找元素节点【DOM】
- 查找DOM元素的方法集合(searchElement.js)
- js基于像素查找DOM元素的方法
- 动态添加元素后 js点击 DOM查找不到
- DOM(一)——HTML DOM
- js课程笔记(二)DOM小结
- JS DOM处理小结
- 【JS】DOM小结
- js定位DOM元素
- js-dom元素操作
- JS操作DOM元素
- js,dom节点查找
- eclipse git插件使用
- Java垃圾收集器与内存分配策略、Java中四种引用类型
- java多种排序方式以及代码(冒泡,插入,选择,快速,归并,希尔,折半)
- LeetCode的medium题集合(C++实现)七
- Leetcode27: Count Primes
- JS——DOM小结(一)查找元素
- 【BZOJ 1458】 士兵占领
- Swift基础-0001
- 感悟(4)——投资贵金属半年有感
- android dialog提示框
- Jsonschema2pojo:生成Json架构上的POJO
- Uedtior富文本框的简单使用
- Eclipse搭建SSH(Struts2+Spring3+Hibernate3)框架项目教程
- 通王网校为何成为网络营销黄埔军校?