7月29日--javascript进阶篇4
来源:互联网 发布:ubuntu 限制root登录 编辑:程序博客网 时间:2024/06/06 18:21
1.认识DOM
注意:前两个是documentfangfa。
alert(myH.innerHTML); 其他两种类似
元素 1 属性 2 文本 3 注释 8 文档 9 varbiaoqian=document.getElementsByTagName_r("li"); document.write(biaoqian[i].nodeName+" ");
var x=document.getElementByIdx_x("con");
插入节点appendChild() newcode.innerHTML = "PHP";
newnode.innerHTML = "php";
for(vari=content.childNodes.length-1;i>=0;i--){ content.removeChild(content.childNodes[i]); }
在javascript基础(7.25)中已经简单的介绍过元素节点,文本节点,属性节点
节点属性:
nodeName 返回一个字符串,其内容是给定节点的名字
nodeType 返回一个整数,这个数值代表给指定节点的类型
nodeValue 返回给定节点当前值
遍历节点树:
DOM操作:
注意:前两个是documentfangfa。
getElementById在基础篇1中有提到。
返回带有指定名称的节点对象的集合。
语法:document.getElementsByName(name)
与getElementById() 方法不同的是,通过元素的 name 属性查询元素,而不是通过 id 属性。
注意:
1. 因为文档中的 name 属性可能不唯一,所有 getElementsByName()方法返回的是元素的数组,而不是一个元素。
2. 和数组类似也有length属性,可以和访问数组一样的方法来访问,从0开始。
getElementsByTagName()方法
返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。
语法:getElementsByTagName(Tagname)
说明:
1. Tagname是标签的名称,如p、a、img等标签名。
2. 和数组类似也有length属性,可以和访问数组一样的方法来访问,所以从0开始。
var myH=document.getElementById("myHead");
区别getElementByID,getElementsByName,getElementsByTagName
以人来举例说明,人有能标识身份的身份证,有姓名,有类别(大人、小孩、老人)等。
1. ID 是一个人的身份证号码,是唯一的。所以通过getElementById获取的是指定的一个人。
2. Name 是他的名字,可以重复。所以通过getElementsByName获取名字相同的人集合。
3.TagName可看似某类,getElementsByTagName获取相同类的人集合。如获取小孩这类人,getElementsByTagName_r("小孩")。
<html> <body> 请选择你的爱好:<br> <input type="checkbox" name="hobby" id="hobby1"> 音乐 <input type="checkbox" name="hobby" id="hobby2"> 登山 <input type="checkbox" name="hobby" id="hobby3"> 游泳 <input type="checkbox" name="hobby" id="hobby4"> 阅读 <input type="checkbox" name="hobby" id="hobby5"> 打球 <input type="checkbox" name="hobby" id="hobby6"> 跑步 <input type="button" value="全选" onclick="checkall();"> <input type="button" value="全不选" onclick="clearall();"> <p>请输入你要选择爱好的序号,序号为1-6:</p> <input id="wb" name="wb" type="text"> <input name="ok" type="button" value="确定" onclick="checkone();"> <script> function checkall() { var hobby = document.getElementsByTagName("input"); for(var i = 0;i<hobby.length;i++){ if(hobby[i].type=="checkbox"){ hobby[i].checked=true; } } } function clearall() { var hobby = document.getElementsByName("hobby"); for(var i=0;i<hobby.length;i++){ hobby[i].checked=false; } } function checkone() { var j = document.getElementById("wb").value; var hobby = document.getElementsByName("hobby"); hobby[j-1].checked=true; } </script> </body></html>
getAttribute()方法
通过元素节点的属性名称获取属性的值。
语法:
属性名.getAttribute(要获得的值)
说明:
1.elementNode:使用getElementById()、getElementsByTagName_r()等方法,获取到的元素节点。
2. name:要想查询的元素节点的属性名字
setAttribute()方法
setAttribute() 方法增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。
语法:
elementNode.setAttribute(name,value)
说明:
1.name: 要设置的属性名。
2.value: 要设置的属性值。
注意:
1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性,该方法将创建一个新属性。
2.类似于getAttribute()方法,setAttribute()方法只能通过元素节点对象调用的函数。
2.节点属性
在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 :
1. nodeName : 节点的名称
2. nodeValue :节点的值
3. nodeType :节点的类型
一、nodeName 属性: 节点的名称,是只读的。
1. 元素节点的 nodeName 与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是 #text
4. 文档节点的 nodeName 永远是 #document
二、nodeValue 属性:节点的值
1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值
三、nodeType 属性: 节点的类型,是只读的。以下常用的几种结点类型:
元素类型 节点类型
访问子结点childNodes
访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性。
语法:
elementNode.childNodes
注意:
如果选定的节点没有子节点,则该属性返回不包含节点的 NodeList。
var mydiv=document.getElementsByTagName("div");
var myzj=mydiv[0].childNodes;
document.write(myzj[i].nodeName+" ");
访问子结点的第一和最后项
一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点,则该属性返回NULL。
语法:
node.firstChild
说明:与elementNode.childNodes[0]是同样的效果。
二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点,则该属性返回NULL。
语法:
node.lastChild
说明:与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。
document.write(x.firstChild.nodeName);
访问父节点parentNode
获取指定节点的父节点
语法:
elementNode.parentNode
注意:父节点只能有一个。
访问父节点parentNode
获取指定节点的父节点
语法:
elementNode.parentNode
注意:父节点只能有一个。
访问祖节点:elementNode.parentNode.parentNode
访问兄弟节点
1. nextSibling 属性可返回某个节点之后紧跟的节点(处于同一树层级中)。
语法:
nodeObject.nextSibling
说明:如果无此节点,则该属性返回 null。
2. previousSibling 属性可返回某个节点之前紧跟的节点(处于同一树层级中)。
语法:
nodeObject.previousSibling
说明:如果无此节点,则该属性返回 null。
注意: 两个属性获取的是节点。Internet Explorer会忽略节点间生成的空白文本节点(例如,换行符号),而其它浏览器不会忽略。
解决问题方法:
判断节点nodeType是否为1, 如是为元素节点,跳过。
获取下一个节点完整代码:
function get_nextSibling(n){ var x=n.nextSibling; while (x && x.nodeType!=1){ x=x.nextSibling; } return x; var x=document.getElementsByTagName_r("li")[0]; document.write(x.nodeName); document.write(" ="); document.write(x.innerHTML); var y=get_nextSibling(x); if(y!=null){ document.write("nextsibling:"); document.write(y.nodeName); document.write(" = "); document.write(y.innerHTML+""); }else { document.write("已经是最后一个节点"); } }
插入节点appendChild()
在指定节点的最后一个子节点列表之后添加一个新的子节点。
语法:
appendChild(newnode)
参数:
newnode:指定追加的节点。
在test添加li,内容为PHP
var otest = document.getElementById("test");
var newcode = document.createElement("li");
otest.appendChild(newcode);
插入节点insertBefore()
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
语法:
insertBefore(newnode,node);
参数:
newnode: 要插入的新节点。
node: 指定此节点前插入节点。
在test中的x1之前添加li
var otest = document.getElementById("test");
var node = document.getElementById("x1");
var newnode = document.createElement("li");
otest.insertBefore(newnode,node);
删除节点removeChild()
removeChild() 方法从子节点列表中删除某个节点。如删除成功,此方法可返回被删除的节点,如失败,则返回NULL。
语法:
nodeObject.removeChild(node)
参数:
node :必需,指定需要删除的节点。
清楚content中的所有节点:
function clearText() {
var content=document.getElementById("content");
}
0 0
- 7月29日--javascript进阶篇4
- 7月28日--JavaScript进阶篇
- 7月29日--javascript进阶篇3
- 7月30日--javascript进阶篇后续
- 7月28日--JavaScript进阶篇2
- 7月29日
- 7月29日
- 7月29日
- 4月29日
- 4月7日
- 4月7日
- 7月4日
- 7月4日
- 7月4日
- 7月4日
- 7月24日--JavaScript基础(1)
- 7月25日--JavaScript基础
- 预告:4月20日,MSDN网络广播: .Net Interop Marshalling进阶篇
- 7月26日--HTML和CSS
- 7月27日--HTML和CSS
- excel插件中的RibbonButton中文字符换行问题
- ubuntu 编译licode
- git cherry-pick 小结
- 7月29日--javascript进阶篇4
- 7月30日--javascript进阶篇后续
- 7月31日--旋转木马幻灯片
- 8月6号--时光轴
- GStreamer基础教程10——GStreamer工具
- LeetCode之231,Power of Two——新学到的超快速简洁判别方法
- sso(单点登录一)
- rpm安装器 参数
- 最好的Angular2表格控件