JS-DOM Element方法和属性
JS-DOM Element方法和属性
一,获取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函数
转载于:https://www.cnblogs.com/muyan927/p/5272835.html
JS-DOM Element方法和属性相关推荐
- js DOM Element属性和方法整理
js DOM Element属性和方法整理 节点操作,属性 1. childNodes.children 这两个属性获取到的子节点会根据浏览器的不同而不同的,所以一定要判断下nodeType是否为1. ...
- element元素 取属性_JS-DOM Element方法和属性
setAttribute方法: var a=document.createElement("div"); //新建一个DIV a.id="div1" ...
- JS中 forEach 方法添加属性遇到 “obj“ is not extensible 的解决方法 (不可扩展、密封、冻结的对象添加属性)
项目中有可能会遇到not extensible的对象,这个时候我们只能拷贝一份对象,然后再我们新拷贝的对象中进行数据操作. 以下为sample代码: var copiedData = [] // 用于 ...
- javascript同级遍历_有用的DOM遍历方法,你需要了解一下
英文 | https://levelup.gitconnected.com/useful-dom-traversal-methods-d2b55cf8e25c翻译 | web前端开发(ID:web_q ...
- 前端:JS/25/DOM官方定义,DOM分类,HTML节点树(节点关系,节点类型,),核心DOM中公共的属性和方法(节点访问,查找DOM节点,节点属性,节点的创建,追加和删除)
DOM官方定义 DOM,Document Object Model,文档对象模型,我们可以把网页中的所有"东西"看成是对象": DOM的官方定义:DOM可以使用脚本,动态 ...
- js Dom对象的属性与方法
1.对象集合: (1).all[]; (2).images[]; (3).anchors[]; (4).forms[]; (5).links[]; 2.属性: document.cookie;设置或返 ...
- dom对象常用的属性和方法有哪些?
dom对象常用的属性和方法有哪些? 一.总结 一句话总结: 1.document属性和方法:document的属性有head,body之类,方法有各种获取element的方法 2.element的属性 ...
- DOM节点类型及其属性和方法
目录 一.DOM介绍 二.DOM节点 1.节点层级 2.节点类型 3.节点树 三.节点类型的属性和方法 1.Node类型 1.1 属性 nodeType nodeName nodeValue text ...
- DOM基础,classList属性提供的方法和属性,DOM中节点的操作,追加节点
1. 什么是DOM: Document Object Modei :文档对象模型 2.DOM核心:document对象 3.DOM作用: 可以访问和操作xtml和HTML文档中的标签,标签的属性, ...
最新文章
- Fun Chat 饭聊手机软件
- 食品、快速消费品行业的ERP兄弟们来此跟帖交流,开发实施路上的点点滴滴
- python运用在哪些地方_必看 | 2020年,Python十大应用领域介绍!
- Address already in use: JVM_Bind 8083端口被占用的几个解决办法
- redis怎么修改_面试官问我Redis事务,还问我有哪些实现方式
- 设计模式笔记之六:生产消费者模式
- 1347 格子游戏 (并查集)
- python音频提取pcm_python 实现录音pcm格式功能
- MongoDB是什么?看完你就知道了!
- javaweb项目大概轮廓
- 程序员一年多少行_程序员版的倚天屠龙,看完泪奔!
- 苹果IPSW文件提取软件
- PKI/CA/电子签名等相关名词解释
- 图像处理中涉及的灰度图、彩色图以及深度图概念
- App应用中拨打电话
- 这可能是我用过最好用的SQL工具,免费还免安装,良心推荐SQL Studio
- 【IDEA】 弹出Server's certificate is not trusted 解决方法
- 《年度区块链产业发展报告(2020)》重磅发布,透视产业应用现状与未来
- C语言中有bool类型吗?
- 致张勇先生一封信:海底捞的“七宗罪”!