javascript之Dorm
2015-07-16 20:05
706 查看
一、document.getElementById() 根据Id获取元素节点;
<div id="div1">
<p id="p1">
我是第一个P</p>
<p id="p2">
我是第二个P</p>
</div>
window.onload = function () {
var str = document.getElementById("p1").innerHTML;
alert(str); //弹出 我是第一个P
}
二、document.getElementsByName() 根据name获取元素节点;
<div id="div1">
<p id="p1">
我是第一个P</p>
<p id="p2">
我是第二个P</p>
</div>
window.onload = function () {
var str = document.getElementById("p1").innerHTML;
alert(str); //弹出 我是第一个P
}
二、document.getElementsByName() 根据name获取元素节点;
<div id="div1"> <p id="p1"> 我是第一个P</p> <p id="p2"> 我是第二个P</p> <input type="text" value="请输入值" name="userName" /> <input type="button" value="确定" onclick="fun1()"> </div> function fun1() { var username = document.getElementsByName("userName")[0].value; alert(username); //输出userName里输入的值 } 三、document.getElementsByTagName() 根据HTML标签名获取元素节点,注意getElements***的选择器返回的是一个NodeList对象,能根据索引号选择其中1个,可以遍历输出。
<div id="div1"> <p id="p1"> 我是第一个P</p> <p id="p2"> 我是第二个P</p> </div> window.onload = function () { var str = document.getElementsByTagName("p")[1].innerHTML; alert(str); //输出 我是第二个P,因为获取的是索引为1的P,索引从0开始 } window.onload = function () { var arr = document.getElementsByTagName("p"); for (var i = 0; i < arr.length; i++) { alert(arr[i].innerHTML); } } window.onload = function () { var node = document.getElementById("div1"); var node1 = document.getElementsByTagName("p")[1]; //从获取到的元素再获取 alert(node1.innerHTML); } 四、document.getElementsByClassName() 根据class获取元素节点
<div id="div1"> <p id="p1" class="class1"> 我是第一个P</p> <p id="p2"> 我是第二个P</p> </div> window.onload = function () { var node = document.getElementsByClassName("class1")[0]; alert(node.innerHTML); } 五、文档结构和遍历 (1)作为节点数的文档 1、parentNode 获取该节点的父节点 2、childNodes 获取该节点的子节点数组 3、firstChild 获取该节点的第一个子节点 4、lastChild 获取该节点的最后一个子节点 5、nextSibling 获取该节点的下一个兄弟元素 6、previoursSibling 获取该节点的上一个兄弟元素 7、nodeType 节点的类型,9代表Document节点,1代表Element节点,3代表Text节点,8代表Comment节点,11代表DocumentFragment节点 8、nodeVlue Text节点或Comment节点的文本内容 9、nodeName 元素的标签名(如P,SPAN,#text(文本节点),DIV),以大写形式表示 注意,以上6个方法连元素节点也算一个节点。 (2)作为元素树的文档 1、firstElementChild 第一个子元素节点 2、lastElementChild 最后一个子元素节点 3、nextElementSibling 下一个兄弟元素节点 4、previousElementSibling 前一个兄弟元素节点 5、childElementCount 子元素节点个数量 六、创建,插入,删除节点 1、document.createTextNode() 创建一个文本节点
<div id="div1"> <p id="p1">我是第一个P</p> <p id="p2">我是第二个P</p> </div> window.onload = function () { var textNode = document.createTextNode("<p>我是一个javascript新建的节点</p>"); document.getElementById("div1").appendChild(textNode); } 2、document.createElement() 创建一个元素节点
<div id="div1"> <p id="p1">我是第一个P</p> <p id="p2">我是第二个P</p> </div> window.onload = function () { var pNode = document.createElement("p"); pNode.textContent = "新建一个P节点"; document.getElementById("div1").appendChild(pNode); } 3、插入节点 appendChild() //将一个节点插入到调用节点的最后面 insertBefore() //接受两个参数,第一个为待插入的节点,第二个指明在哪个节点前面,如果不传入第二个参数,则跟appendChild一样,放在最后。
<div id="div1"> <p id="p1">我是第一个P</p> </div> window.onload = function () { var pNode1 = document.createElement("p"); pNode1.textContent = "insertBefore插入的节点"; var pNode2 = document.createElement("p"); pNode2.textContent = "appendChild插入的节点"; document.getElementById("div1").appendChild(pNode2); document.getElementById("div1").insertBefore(pNode1,document.getElementById("p1")); } 七、删除和替换节点。 1、removeChild(); 由父元素调用,删除一个子节点。注意是直接父元素调用,删除直接子元素才有效,删除孙子元素就没有效果了。
<div id="div1"> <p id="p1">我是第一个P</p> <p id="p2">我是第二个P</p> </div> window.onload = function () { var div1 = document.getElementById("div1"); div1.removeChild(document.getElementById("p2")); } 2、replaceChild() //删除一个子节点,并用一个新节点代替它,第一个参数为新建的节点,第二个节点为被替换的节点
<div id="div1"> <p id="p1">我是第一个P</p> <p id="p2">我是第二个P</p> </div> window.onload = function () { var div1 = document.getElementById("div1"); var span1 = document.createElement("span"); span1.textContent = "我是一个新建的span"; div1.replaceChild(span1,document.getElementById("p2")); }
相关文章推荐
- 【JavaScript】——基础(一)
- js中Dom对象的position属性
- Javascript之第三方程序库
- 初步探索fastJson
- 在mvc返回JSON时出错:序列化类型为“System.Data.Entity.DynamicProxies.Photos....这个会的对象时检测到循环引用 的解决办法
- javascript(一)
- $.toJSON的使用方法
- [JSOI2007][BZOJ1029] 建筑抢修
- Maven Missing Artifact 问题(ezmorph, json-lib)
- jackson json 序列化与反序列化时json中字段名称问题
- JSON.parse()与JSON.stringify() (浏览器兼容性:IE8以上、Chrome、Firefox3.5、Opera10.5、Safari4.0)
- Js 对象添加属性
- js json string 互转
- js的一种闭包用法
- Extjs首日工作总结
- 将jsp页面转为html页面
- js getyear和getfullyear
- Extjs第二日工作总结
- JSON.parse()和JSON.stringify()
- js数据类型操作