909422229__关于JS_Element获取元素与属性的总结
来源:互联网 发布:二手丝袜淘宝 编辑:程序博客网 时间:2024/06/15 07:00
一,获取html元素
1.getElementByID(id)
通过对元素的ID访问,这是DOM一个基础的访问页面元素的方法.
example:
<div id="divid">测试</div>
<script language="javascript">
var div=document.getElementByID("divid");
alert (div.nodeName); //显示元素名
</script>
如果id在元素中不是唯一的,那么获得的将是第一个ID.
2.getElementsByName(name)
仅用于input radio checkbox等元素,返回名字为name的元素数组
example:
<div name="george"></div>
<input name="george"></div>
<script language=javascript>
var ge=document.getElementsByName("george");
alert (georges.length); //获取georges个数,对div唔效果
</script>
3.getElementsByTagName(tagname)
返回具有tagname的元素列表数组.处理大的DOM结构会用到它
二,DOM Element常用方法
1.appendChild(node) //增加内容
向当前对象追加节点,example:
<div id="test">123</div>
<script type="text/javascript">
var newdiv=document.createElement("div");
var newtext=document.createTextNode("A new div");
newdiv.appendChild(newtext) ;
document.getElementById("test").appendChild(newdiv) ;
</script>
当然,上面的功能用document.getElementById("test").innerHTML="测试一下"就可实现,遗憾的是,innerHTML不属于DOM.
2,removeChild(childreference)
移除当前节点的子节点,并返回节点
<div id="father"><div id="child">A child</div></div>
<script type="text/javascript">
var childnode=document.getElementById("child");
var removednode=document.getElementById("father").removeChild(childnode)
</script>
3.cloneNode(deepBoolean)
复制并返回当前的复制节点,由于复制了原节点的id属性,所以在document树中要改ID属性,以确保ID唯一性.
4,insertBefore(newElment,targetElement) 插入新的节点
在当前节点插入一个新节点,如果targetElement为null,那新节点为最后节点.
example:
<body>
<span id="lovespan">熊掌我所欲也!</span>
</body>
<script type="text/javascript">
var lovespan=document.getElementById("lovespan"); //获取id
var newspan=document.createElement("span");
var newspanref=document.body.insertBefore(newspan, lovespan);
newspanref.innerHTML="鱼与";
</script>
三,DOM Element常用属性
1、childeNodes 返回所有子节点对象,
例如
<ul id="mylist">
<li>美国</li>
<li>意大利</li>
<li>加拿大</li>
</ul>
<script>
var msg="" ;
var mylist=document.getElementById("mylist")
for (i=0; i<mylist.childNodes.length; i++){
var li=mylist.childNodes[i];
msg+=li.innerText;
}
alert (msg);
</script>
2,innerHTML
这是一个标准,但它并不书DOM
例如:
<div id="bbb"><span id="aaa">我拉</span></div>
<input type=button value="点击看看">
<script language="javascript">
function change()
{
document.getElementById("aaa").innerHTML= "修改修改";
}
</script>
3,style
这是一个极其重要的属性,可以获取并修改每个单独的样式.
例如:document.getElementByTagName("body")[0].style.backgroundColor="#cccccc"
4、firstChild 返回第一个子节点
lastChild 返回最后一个子节点
parentNode 返回父节点的对象。
nextSibling 返回下一个兄弟节点的对象
previousSibling 返回前一个兄弟节点的对象
nodeName 返回节点的HTML标记名称,使用英文的大写字母,如P, FONT
5,click()
执行元素的一次点击,可以用于通过脚本来触发onClick函数
- 909422229__关于JS_Element获取元素与属性的总结
- JQuery获取元素的值与属性
- js获取元素的方法与属性
- 获取元素的属性
- 关于元素的float属性以及清除浮动的总结
- 关于HTML中link元素的onload属性总结
- js中获取元素属性、currentStyle与getComputedStyle的区别
- obj.currentStyle.property、window.getComputedStyle(obj,null).property、obj.style.property 获取与元素属性的总结
- jQuery操作元素的属性与样式方法总结
- html元素&属性的总结
- 关于获取页面元素到补充总结
- 关于表单的元素获取
- 关于同辈元素定位方式与z-index的总结
- 黑马程序员__关于学习File类的总结
- 黑马程序员__关于学习Properties的学习总结
- 关于Controller方面的总结__以及资料收集
- 关于Jquery获取对象的属性与值
- 如何获取元素的所有属性??
- 网络版五子棋程序的开发
- Android调用系统拔号和短信
- 数码管的显示(共阳)
- Navicat for Mysql SSH tunnel 用跳板机解决方案
- 一道关于sql的面试题
- 909422229__关于JS_Element获取元素与属性的总结
- Java小数点保留问题
- linux下查看所有用户及所有用户组
- 51nod 1265 四点共面
- 【剑指offer】面试题25:二叉树中和为某一值的路径
- 【蒻爆了的NOIP系列--普及组初赛】(2)2015-2019问题求解
- 生成排列
- 微服务&soa docker apigateway
- linux下theano/tensorflow安装cuda支持gpu