JavaScript节点
DOM:
documentobjectmodel(文档对象模型)。
D:文档,xml文档和html文档
O:对象,document对象的属性和方法
M:模型
DOM是针对xml(html)的基于树的API
DOM树:节点(node)的层次
DOM把一个文档表示为一颗家族树,即父亲,兄弟,儿子;DOM定义了node的接口以及许多种节点类型来表示xml节点的多个方面
节点(node):
根据DOM,html(xml)文档的每个成分都是节点,整个文档是一个文档节点,每个HTML元素是元素节点,包含在HTML元素中的文本就是文本节点,每个HTML属性就是属性节点,注释是注释节点
节点彼此都是等级关系,HTML文档中的节点组成了节点树,文档中的每个元素,属性,文本都是这个树中的一个节点,树起始于文档节点,并由此继续伸展纸条,直至处于这棵树的最底层为止,如图所示:
元素节点:每个HTML标签都是元素节点
文本节点:标签中的文字是文本节点
属性节点:标签的属性是属性节点
重点API
1.getElementById()
1)查询给定ID属性值的元素,返回该元素的元素节点,也是元素对象
2)因为在一个HTML中ID的值是唯一的,所以返回值也是唯一的,所以方法名为getElementById(),而不是getElementsById();
3)该方法只能用于document对象,就像Java的static对象
2.getElementsByName()
1)查找给定name属性的所有元素,这个方法将会返回一个节点集合,也称为对象集合
2)这个集合可以作为一个数组来对待,length属性的值表示的集合的个数
3)因为在html中name不能作为唯一确定的元素,所以方法的名称为getElementsByName(),而不是getElementByName();
3.getElementsByTagName();
1)查询给定标签的所有元素
2)在html中,标签名不是唯一的,所以返回的是节点的集合
3)这个集合可以当作节点来处理,length属性表示这个集合的个数
4)可以有两种形式来执行这个方法:
---1varelements=document.getElementsByTagName();
---2varelements=element.getElementsByTagName();
从这两个方法里可以看出持有这个方法的不一定是整个文档对象,也可以是元素节点
4、hasChildNodes();
1)这个方法用来判断这个元素是否含有子节点
2)返回值是true或false
3)因为文本节点和属性节点不可能有子节点,所以返回值永远为false
4)如果 hasChildNodes()为false,则childNodes,firstChild,lastChild将返回空数组或者空字符串
5、nodeName
1)文档中每一个节点都会有这个属性
2)为给定节点的名称
3)如果节点是属性节点,nodeName返回的是属性名称,如果节点是元素节点,则返回的是元素名称,如果节点是文本节点,则返回的是#text的字符串
6、nodeType
该节点表明的是节点类型,返回值是一个整数
元素节点类型的返回值是1,属性节点的返回值是2,文本节点的值是3
7、nodeValue
1)返回给定点的当前值(字符串)
2)如果给定节点是属性节点,返回值是这个属性的值,如果给定节点是文本节点,返回值是文本节点的内容,如果给定节点是元素节点,返回值是null
3)nodeValue是一个读写属性
8、replaceChild()
1)把一个给定元素里的一个子节点替换为另外一个子节点
2)varreference=element.replaceChild(newChild,oldChild);
返回值指向已经被替换掉的那个子节点的引用
9、getAttribute()
1)返回一个给定元素的给定属性的节点值
2)VarattributeValue=element.getAttribuate(attributeName);
3)给定属性的名字必须以字符串的形式传递给该方法
4)给定属性的值将以字符串的形式返回
10、setAttribute()
1)将给定元素添加到一个新的属性或改变它现有的值
2)element.setAttribute(attributeName,attributeValue);
3)属性的名字和值必须以字符串的形式传递
4)如果这个属性已经存在,那么值将被attributeValue取代
5)如果这个属性不存在,那么先创建它,再给他赋值
分享到:
相关推荐
javascript 节点 描述 入门教程 入门指导
js节点操作
javascript 节点的属性和方法参考
JavaScript节点.pdfJavaScript节点.pdfJavaScript节点.pdfJavaScript节点.pdfJavaScript节点.pdf
本文实例总结了JavaScript节点及列表操作的方法。分享给大家供大家参考。具体如下: (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建...
修改后的bootstrap-treeview,支持子节点的回溯选中,父辈节点的回溯选中
对JavaScript中常用的节点进行概括,DOM对象和XMLHttp,包括js操作xml文件的实例。
JavaScript 实现在树形菜单中添加、删除节点实例 js note JavaScript实现在树形菜单中添加、删除节点实例,本程序侧重于学习,主要介绍一种在多级树节点中创建节点、删除节点,帮助了解树形菜单创作原理。
我们在实际的开发当中经常要获取页面中某个html元素,动态的更新该元素的样式、内容属性等。 那么如何获取要更新的这些元素呢?用JavaScript获取这些节点的方法有很多种,下面是总结的一些方法.
//JS实现treeview中选中父节点,子节点也选中,如果子节点全部选中,自动选中父节点 //仅支持TreeView //调用方法 TreeView.Attributes.Add("onclick", "OnTreeNodeChecked()");
javaScript节点操作.txt 没分了 给点分吧~~~~~~
代码详细讲解了如何在d3 force力图中如何动态添加节点为图片,文字分析见http://blog.csdn.net/sdxushuxun/article/details/79066553
本文实例分析了Javascript的节点关系。分享给大家供大家参考。具体如下: <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /&...
arcgis js api 4.9 下的节点编辑模块,可以直接运行,
js实现节点可拖动的树! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
Rete.js - JavaScript可视化编程/节点编辑器开发框架
D3.js强制图JavaScript节点类 例子 // create nodes // Array [0, 1] is irrelevant to node ids let [ n0 , n1 ] = [ 0 , 1 ] . map ( n => new BaseNode ( ) ) ; n0 . id ; // 0 n1 . id ; // 1 // connect n0 to ...
利用d3.js插件实现动态拓扑图,动态增加节点,删除节点,结合拖拽操作,实现一个简单的演示利用d3.js插件实现动态拓扑图,动态增加节点,删除节点,结合拖拽操作,实现一个简单的演示
1Attributes 存储节点的属性列表(只读) 2childNodes 存储节点的子节点列表(只读)