js操作节点(添加、删除、更改属性)
来源:互联网 发布:mac怎么用word文档 编辑:程序博客网 时间:2024/05/02 00:49
1.创建节点并添加内容:使用的方法:createElement和createTextNode
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>HTML DOM</title>
<script type=text/javascript>
function Message()
{
var op=document.createElement("p");
var oText=document.createTextNode("hello world!");
op.appendChild(oText);
document.body.appendChild(op);
}
</script>
</head>
<body onload="Message();">
</body>
</html>
2,删除节点 方法:getElementsByTagName和removeChild
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>HTML DOM</title>
<script type=text/javascript>
function removeMessage()
{
var op=document.body.getElementsByTagName("p")[0];
op.parentNode.removeChild(op);
}
</script>
</head>
<body onload="removeMessage();">
<p>hello world!</p>
</body>
</html>
3.替换节点 方法replace(new,old)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>HTML DOM</title>
<script type=text/javascript>
function replaceMessage()
{
var oNewp=document.createElement("p");
var oText=document.createTextNode("World Hello");
oNewp.appendChild(oText);
var oOldp=document.body.getElementsByTagName("p")[0];
oOldp.parentNode.replaceChild(oNewp,oOldp);
}
</script>
</head>
<body onload="replaceMessage();">
<p>hello world!</p>
</body>
</html>
4.插入新消息 insertBefore(new,old)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>HTML DOM</title>
<script type=text/javascript>
function replaceMessage()
{
var oNewp=document.createElement("p");
var oText=document.createTextNode("World Hello");
oNewp.appendChild(oText);
var oOldp=document.body.getElementsByTagName("p")[0];
document.body.insertBefore(oNewp,oOldp);
}
</script>
</head>
<body onload="replaceMessage();">
<p>hello world!</p>
</body>
</html>
5,文档碎片
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>HTML DOM</title>
<script type=text/javascript>
/****************
* 当向document中添加大量的节点时,如果逐个添加将会十分缓慢,这时可以使用文档碎片一次性添加到document中
* 方法:createDocumentFragment()
********************************************/
function replaceMessage()
{
var arrText=["first","second","third","fourth","fifth","sixth","seventh","eighth","ninth","tenth"];
var oFragment=document.createDocumentFragment();//文档碎片
for(var i=0;i<arrText.length;i++)
{
var op=document.createElement("p");
var oText=document.createTextNode(arrText[i]);
op.appendChild(oText);
oFragment.appendChild(op);
}
document.body.appendChild(oFragment);
}
</script>
</head>
<body onload="replaceMessage();">
<p>hello world!</p>
</body>
</html>
6,操作document元素属性
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>HTML DOM</title>
<script type=text/javascript>
function Load_message()
{
var oimg=document.getElementById("a");
alert(oimg.getAttribute("border"));
oimg.setAttribute("alt","DOM Test");
}
</script>
</head>
<body onload="Load_message();">
<img border="0" width="100" height="150" id="a"/>
</body>
</html>
- js操作节点(添加、删除、更改属性)
- JS操作图片(添加,更改,删除)
- js节点属性的创建 添加 删除
- js节点属性的创建 添加 删除
- js操作之动态添加,删除节点
- js操作DOM--添加、删除节点
- TreeView 添加,删除,更改 节点
- 完成对节点属性的添加、删除的操作
- js对节点的操作,添加,删除,获得父节点,子节点,兄弟节点
- dom属性:添加节点、删除节点
- js 节点的添加 删除
- jdbcTemplate实现crud操作(添加、删除、更改操作)
- js添加input节点,删除input节点
- Js 添加删除HTML DOM 元素(节点)
- js操作dom节点,创建,复制,删除,添加,查找等操作总结
- div节点的操作(添加,删除,替换,克隆)
- 操作Cassandra(2)-添加,替换,移动和删除节点
- mybatis 用户添加,删除,更改 操作
- oracle静默安装文件db_install.rsp详解
- 当访问php遇到空白页时
- 网页版的绘图工具
- 收藏的Android非常好用的组件或者框架
- Oracle数据文件
- js操作节点(添加、删除、更改属性)
- (转载)【Android进阶】嵌套TabHo…
- (转载)【Android进阶】多抽屉效…
- 陈耀烨九段加冕新名人见证实录
- (转载)【Android设备管理】利用D…
- (转载)Intent跳转到系统应用中的…
- mysql -u root -p 等这些常用的参数
- 用listview显示文件列表
- cocos2dx: UIImagePickerController闪退及显示statusBar的解决方案