Js节点属性与方法

概念和用法 nodeType 属性再次来到被选节点的节点类型。

到家分析HTML5中的标准属性与自定义属性,周密深入分析html5

正如 HTML5
语法中所解说的,成分得以分包属性(attributes)给贰个成分设置各样品质(properties)。

稍加属性被定义为全局的,能够用在别的因素上,而别的的被定义为成分特有的。全数的性质都有多少个名称和贰个值,看起来如上边包车型地铁演示所示。

上边是一个运用 HTML5 属性的事例,演示了什么用名称为 class 的习性和值
“example” 标记贰个 div 成分:

<div class=”example”>…</div>
属性只好在胚胎标签中钦赐,相对不可能用在终止标签中。

HTML5
属性不区分轻重缓急写,能够全方位大写或许夹杂使用,就算最普及的预约是一味使用小写。

正式属性 下边列出的习性大约具备的 HTML5 标签都匡助。

属性 选项 功能
accesskey 用户自定义 定义访问元素的键盘快捷键。
align right, left, center 水平对齐标签。
background URL 在元素后面设置一个背景图像。
bgcolor 数值,十六进制值,RGB值 在元素后面设置一个背景颜色。
class 用户定义。 分类一个元素,便于使用级联样式表。
contenteditable true, false 定义用户是否可以编辑元素的内容。
contextmenu Menu id 为元素定义上下文菜单。
data-XXXX 用户定义。 自定义属性。 HTML 文档的作者可以定义自己的属性。 自定义属性必须以 "data-" 开头。
draggable true,false, auto 定义用户是否可以拖动元素。
height 数字值 定义表格,图像或表格单元的高度。
hidden hidden 定义元素是否应该可见。
id 用户定义。 命名元素,便于使用级联样式表。
item 元素列表。 用于组合元素。
itemprop 条目列表。 用于组合条目。
spellcheck true, false 定义元素是否必须有拼写或错误检查。
style CSS 样式表。 给元素定义内联样式。
subject 用户定义 id。 定义元素关联的条目。
tabindex Tab number 定于元素的 tab 键顺序。
title 用户定义。 元素的“弹出”标题。
valign top, middle, bottom HTML 元素内标签的垂直对齐方式。
width 数字值。 定义表格,图像和表格单元的宽度。

自定义属性 HTML5 还引进了一个新特点,便是足以增多自定义的多少属性。

自定义数据属性以 data- 早先,基于大家的供给命名。上边是多个简短的例证:

<div class=”example” data-subject=”physics”
data-level=”complex”>

</div>
上边的事例中多个名字为 data-subject 和 data-level 的自定义属性在 HTML5中是一丝一毫可行的。大家仍是可以使用 JavaScript API 恐怕在 CSS
中以得到标准属性类似的格局猎取它们的值。

在HTML元素中加多自定义属性,通过JavaScript进行拜候,要是你此前有品味过,你会意识,轻巧忽略标志验证,而HTML5足认为你提供在使得的网页内创设并采取本人的要素属性的功用。

创建HTML5文件:

倘若您还没想好要采用哪八个,能够复制上边包车型地铁代码:

XML/HTML Code复制内容到剪贴板

  1. <!DOCTYPE html   
  2. >  
  3.     
  4. <  
  5. html  
  6. >  
  7.     
  8. <  
  9. head  
  10. >  
  11.     
  12. <  
  13. script  
  14. >  
  15.     
  16. /*functions here*/     
  17. </  
  18. script  
  19. >  
  20.     
  21. </  
  22. head  
  23. >  
  24.     
  25. <  
  26. body  
  27. >  
  28.     
  29. </  
  30. body  
  31. >  
  32.     
  33. </  
  34. html  
  35. >  

 
在body中装置自定义成分,在head部分脚本区域接纳JavaScript成分进行拜谒。

创制元素:

第一,增加一些简便的剧情和自定义属性以及ID等成分,以便我们能够识别JavaScript示例。

XML/HTML Code复制内容到剪贴板

  1. <  
  2. div id=”product1″ data-product-category=”clothing”  
  3. >  
  4.     
  5. Cotton Shirt     
  6. </  
  7. div  
  8. >  

 
正如您所看到的那么,自定义属性的花样为:“data-*”,在“data-”部分设定名称可能你选定的称谓。在HTML5中接纳自定义属性,那是独一有效的主意。因而,假诺您想表达网页是还是不是有效可才使用这种方法。

自然,项目细节部分决定了自定义属性对您是还是不是有用,以及该将其怎么样命名。那些示例可适用于差别产品类别的零售网址。

自定义属性允许你以一种奇特的章程利用页面内的JavaScript代码来安装成分,比如,动画展现效果。若无标准的HTML成分,大家建议使用自定义属性。

丰硕测验开关

在页面上利用本人的JavaScript成分就可以举行事件,前提是将上面包车型客车代码加多到页面中:

XML/HTML Code复制内容到剪贴板

  1. <  
  2. input type=”button” value=”get attribute” onclick=”getElementAttribute(‘product1’)”  
  3. />  

 
获得属性:

在JavaScript中做客属性最常用的法子是使用“getAttributes”,这也是大家要做的率先步。在页面包车型地铁head脚本区域增多以下函数:

JavaScript Code复制内容到剪贴板

  1. function getElementAttribute(elemID) {     
  2. var theElement = document.getElementById(elemID);  
      
  3. var theAttribute = theElement.getAttribute(‘data-product-category’);     
  4. alert(theAttribute);     
  5. }   

此处,大家为示范增添了alert 值,当然你也得以依据自家须要在剧本中加上。

获取数据:

你能够行使要素数据集来代替DOM
“getAttributes”,那大概更有效,越发是在某种情状下,代码通过多样品质举行迭代,然则,浏览器对数据集的帮助照旧比十分的低,所以牢记这或多或少,此代码与//前边的不二等秘书籍同样可进行同样的历程。

//var theAttribute =
theElement.getAttribute(‘data-product-category’); 
var theAttribute = theElement.dataset.productCategory;
从属性名称发轫在数额集中删除“data-”,它依旧蕴藏在HTML中。

请留意,假若您的自定义属性名称中有一个连字符,当通过数量访谈时这会突显出camel-case格局,即(“data-product-category”
造成“productCategory”)。

其他模块、函数

咱俩早就获得该属性,脚本如故能够安装和删除。下边包车型地铁代码演示了如何运用规范的JavaScript模块和数码集来设置属性。

JavaScript Code复制内容到剪贴板

  1. //DOM method       
  2.     
  3. theElement.setAttribute(‘data-product-category’, ‘sale’);      
  4. //dataset version       
  5.     
  6. theElement.dataset.productCategory = “sale”;     
  7. 你也足以利用DOM方法依旧数额集来删除有个别属性:   
  8.   
  9. //DOM method     
  10. theElement.removeAttribute(‘data-product-category’);    
  11. //dataset version     
  12. theElement.dataset.productCategory = null;   

在HTML5中落到实处自定义属性技能上而不是很复杂,真正困难的是接纳使用的不二等秘书诀是不是适用于你的档案的次序;若是适用,该如何使其更实用?请记住,未来启用数据集方法作为页面效果还为风尚早,究竟相当多浏览器暂不帮助此成效。

正如 HTML5
语法中所演讲的,成分得以包括属性(attributes)给多个要素设置各样属性…

var sysModule=[];        
   var treeJson = <%=(sysModule) %>;
            if (treeJson.length == 0) $(“#content”).html(“”);
            $(treeJson).each(function (i, menu) {
                console.log(i);
                console.log(menu);
                var item =””;
                $(menu.children).each(function (j, submenu) {
                    item += “<li><a
href=\””+submenu.Url+”\”><i
class=\””+submenu.icon+”\”></i><span
class=\”hidden-tablet\”>”+submenu.Name+”</span></a></li>”;
                });
                $(“#nav_menu”).html(item);
            });

属性:

语法: elementNode.nodeType

Attributes     存款和储蓄节点的特性列表(只读)
childNodes 存储节点的子节点列表(只读)
dataType     重回此节点的数据类型
Definition     以DTD或XML形式给出的节点的概念(只读)
Doctype     钦定文档类型节点(只读)
documentElement     再次回到文书档案的根成分(可读写)
firstChild     重返当前节点的率先身形节点(只读)
Implementation     返回XMLDOMImplementation对象
lastChild     重回当前节点倒数子节点(只读)
nextSibling     重返当前节点的下二个男子节点(只读)
nodeName     重临节点的名字(只读)
nodeType     再次回到节点的体系(只读)
nodeTypedValue     存储节点值(可读写)
nodeValue     再次来到节点的文书(可读写)
ownerDocument     再次来到包含此节点的根文书档案(只读)
parentNode     再次来到父节点(只读)
Parsed     重返此节点及其子节点是还是不是曾经被剖判(只读)
Prefix     再次回到名称空间前缀(只读)
preserveWhiteSpace     钦定是还是不是保留空白(可读写)
previousSibling     再次回到此节点的前叁个弟兄节点(只读)
Text     再次回到此节点及其子孙的文件内容(可读写)
url     重回前段时间载入的XML文书档案的UWranglerL(只读)
Xml     重回节点及其子孙的XML表示(只读)
方法:

节点编号: 节点名称:
1 Element
2 Attribute
3 Text
4 CDATA Section
5 Entity Reference
6 Entity
7 Processing Instrucion
8 Comment
9 Document
10 Document Type
11 Document Fragment
12 Notation

appendChild     为日前节点加多贰个新的子节点,放在最终的子节点后
cloneNode     重临当前节点的正片
createAttribute     制造新的性格
createCDATASection     成立包蕴给定数据的CDATA段
createComment     创设多个评释节点
createDocumentFragment     创建DocumentFragment对象
createElement     创立一个要素秋点
createEntityReference     创建EntityReference对象
createNode     创造给定类型,名字和命名空间的节点
createPorcessingInstruction     成立操作指上巳点
createTextNode     成立包涵给定数据的文书节点
getElementsByTagName     重临钦定名字的成分集结
hasChildNodes     重临当前节点是还是不是有子节点
insertBefore     在内定节点前插入子节点
Load     导入内定位置的XML文书档案
loadXML     导入钦命字符串的XML文书档案
removeChild     从子结点列表中剔除钦赐的子节点
replaceChild     从子节点列表中替换钦点的子节点
Save     把XML文件存到钦定节点
selectNodes     对节点开展点名的合营,并赶回相称节点列表
selectSingleNode     对节点开展点名的合营,并赶回第二个极度节点
transformNode     使用内定的样式表对节点及其子孙进行转移
transformNodeToObject     使用内定的样式表将节点及其子孙转变为指标

nodeType 属性再次来到被选节点的节点类型。
语法: elementNode.nodeType 节点编号: 节点名称: 1 Element 2 Attribute
3 Text 4 CDATA Section 5 En…

Attributes 存储节点的属性列表(只读)
childNodes 存储节点的子节点列表(只读) dataType 重回此节点的数据类型
Definition 以DTD或XML情势给出…

发表评论

电子邮件地址不会被公开。 必填项已用*标注