js遍历子节点子元素附属性及方法

 更新时间:2014年08月19日 11:01:31   投稿:whsnow  
遍历子节点子元素的方法有很多,本例使用js来实现,另附示例代码及属性方法,需要的朋友可以参考下

复制代码 代码如下:

// 添加子节点前 删除所有子节点

var usernameEle = document.getElementById("username");
var childs = usernameEle.childNodes;
for(var i = childs.length - 1; i >= 0; i--) {
usernameEle.removeChild(childs[i]);
}
var username = document.createTextNode(obj.username);
usernameEle.appendChild(username);

属性:

nextSibling 返回当前节点的下一个兄弟节点(只读)
previousSibling 返回此节点的前一个兄弟节点(只读)
parentNode 返回父节点(只读)
childNodes 存储节点的子节点列表(只读)
nodeValue 返回节点的文本(可读写)
Text 返回此节点及其后代的文本内容(可读写)
nodeName 返回节点的名字(只读)

Attributes 存储节点的属性列表(只读)
dataType 返回此节点的数据类型
Definition 以DTD或XML模式给出的节点的定义(只读)
Doctype 指定文档类型节点(只读)
documentElement 返回文档的根元素(可读写)
firstChild 返回当前节点的第一个子节点(只读)
Implementation 返回XMLDOMImplementation对象
lastChild 返回当前节点最后一个子节点(只读)
nodeType 返回节点的类型(只读)
nodeTypedValue 存储节点值(可读写)
ownerDocument 返回包含此节点的根文档(只读)
Parsed 返回此节点及其子节点是否已经被解析(只读)
Prefix 返回名称空间前缀(只读)
preserveWhiteSpace 指定是否保留空白(可读写)
url 返回最近载入的XML文档的URL(只读)
Xml 返回节点及其后代的XML表示(只读)

方法:

getElementsByTagName 返回指定名字的元素集合
appendChild 为当前节点添加一个新的子节点,放在最后的子节点后
createElement 创建一个元素节点
createTextNode 创建包括给定数据的文本节点
removeChild 从子结点列表中删除指定的子节点
hasChildNodes 返回当前节点是否有子节点

cloneNode 返回当前节点的拷贝
createAttribute 创建新的属性
createCDATASection 创建包括给定数据的CDATA段
createComment 创建一个注释节点
createDocumentFragment 创建DocumentFragment对象
createEntityReference 创建EntityReference对象
createNode 创建给定类型,名字和命名空间的节点
createPorcessingInstruction 创建操作指令节点
insertBefore 在指定节点前插入子节点
Load 导入指定位置的XML文档
loadXML 导入指定字符串的XML文档
replaceChild 从子节点列表中替换指定的子节点
Save 把XML文件存到指定节点
selectNodes 对节点进行指定的匹配,并返回匹配节点列表
selectSingleNode 对节点进行指定的匹配,并返回第一个匹配节点
transformNode 使用指定的样式表对节点及其后代进行转换
transformNodeToObject 使用指定的样式表将节点及其后代转换为对象

相关文章

  • javascript中layim之查找好友查找群组

    javascript中layim之查找好友查找群组

    这篇文章主要介绍了javascript中layim之查找好友查找群组,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-02-02
  • 通过实例解析JavaScript常用排序算法

    通过实例解析JavaScript常用排序算法

    这篇文章主要介绍了通过实例解析JavaScript常用排序算法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • JS构造函数与原型prototype的区别介绍

    JS构造函数与原型prototype的区别介绍

    下面小编就为大家带来一篇JS构造函数与原型prototype的区别介绍。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • Vue 组件渲染详情

    Vue 组件渲染详情

    这篇文章主要介绍了Vue 组件渲染详情,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-08-08
  • js在输入框屏蔽按键,只能键入数字的示例代码

    js在输入框屏蔽按键,只能键入数字的示例代码

    本篇文章主要介绍了js在输入框屏蔽按键,只能键入数字的示例代码。需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • 小程序视频列表中视频的播放与停止的示例代码

    小程序视频列表中视频的播放与停止的示例代码

    本篇文章主要介绍了小程序视频列表中视频的播放与停止的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • Bootstrap实现下拉菜单效果

    Bootstrap实现下拉菜单效果

    这篇文章主要为大家详细介绍了Bootstrap实现下拉菜单效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • 微信小程序自定义渐变的tabbar导航栏功能

    微信小程序自定义渐变的tabbar导航栏功能

    这篇文章主要介绍了微信小程序自定义渐变的tabbar导航栏,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-09-09
  • 详解js跨域请求的两种方式,支持post请求

    详解js跨域请求的两种方式,支持post请求

    原先一直以为要实现跨域请求只能用jsonp,只能支持GET请求,后来了解到使用POST请求也可以实现跨域,但是需要在服务器增加Access-Control-Allow-Origin和Access-Control-Allow-Headers头,下面说明下两个不同的方法实现的方式和原理。
    2018-05-05
  • Javascript实现关闭广告效果

    Javascript实现关闭广告效果

    这篇文章主要为大家详细介绍了Javascript实现关闭广告效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01

最新评论