使用层次关系访问节点

parentNode:返回节点的父节点

childNodes:返回子节点集合,childNodes[i]

firstChild:返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点

firstElementChild:返回节点的第一个元素节点

lastChild:返回节点的最后一个子节点

lastElementChild:返回节点的最后一个子节点的元素节点

nextSibling:下一个节点

previousSibling:上一个节点

setAttribute()设置某个节点的属性值

  节点对象.setAttribute("属性名","属性值")

getAttribute()获取某个节点的属性值

  节点对象.getAttribute("属性名")

例如:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>node节点</title>
</head>
<script>
  onload=function(){
    var node1=document.getElementsByTagName("ul")[0];
    //console.log(node1.childNodes);
    node1.setAttribute("xxyy","1122")
    console.log(node1.firstElementChild.getAttribute("xxyy"));
  }
</script>

<body>
  <ul>
    <li id="a" xxyy="ooxx">asdf</li>
    <li id="b"></li>
    <li id="c"></li>
  </ul>
</body>
</html>

javascript 操作节点的属性的更多相关文章

  1. 第四章 JavaScript操作DOM对象

    第四章   JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...

  2. JQuery制作网页—— 第三章 JavaScript操作DOM对象

    1. DOM:Document Object Model(文档对象模型):          DOM操作:                   ●DOM是Document Object Model的缩 ...

  3. 使用jQuery快速高效制作网页交互特效-----JavaScript操作DOM对象

    一.DOM操作分类 使用JavaScript操作DOM时通常分为三类:DOM    Core.HTMl--DOM和CSS-DOM 二.访问节点 节点属性 三.节点信息 四.操作节点的属性 语法: ge ...

  4. 第三章 JavaScript操作Dom对象

    常用的方法: 1.访问节点: 通过Document.getElementByXXX()获得一个指定节点-->再通过以下属性节点访问节点:第一部分:节点属性a:parentNode 返回节点的父节 ...

  5. 【转】JavaScript 节点操作 以及DOMDocument属性和方法

    最近发现DOMDocument对象很重要,还有XMLHTTP也很重要 注意大小写一定不能弄错. 属性: 1Attributes 存储节点的属性列表(只读) 2childNodes 存储节点的子节点列表 ...

  6. 初探JavaScript(一)——也谈元素节点、属性节点、文本节点

    Javascript大行其道的时候,怎么能少了我来凑凑热闹^_^ 基本上自己对于js的知识储备很少,先前有用过JQuery实现一些简单功能,要论起JS的前世今生,来龙去脉,我就一小白.抱起一本< ...

  7. 使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)

    getElementById(id)这是通过id来访问某一元素,最常用的之一,例:<html><body><div id="myid">test ...

  8. javascript操作DOM的方法与属性

    文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构. 将HTML代码分解为DOM节点层次图: ...

  9. JavaScript的DOM操作(节点操作)

    创建节点createElement()var node = document.createElement(“div”);没什么可说的,创建一个元素节点,但注意,这个节点不会被自动添加到文档(docum ...

随机推荐

  1. R语言最优化(多维)

    线性搜索的最速上升法 #### max.search <- function(f, x, y, tol=1e-9, a.max = 2^5){ if(sum(abs(y)) == 0) retu ...

  2. 浅谈Vector、ArrayList、LinkedList

    下图是Collection的类继承图 从图中可以看出:Vector.ArrayList.LinkedList这三者都实现了List 接口.所有使用方式也很相似,主要区别在于实现方式的不同,所以对不同的 ...

  3. Excel汉字转换拼音首字母缩写的函数

    打开Excel->工具->宏->Viaual Basic编辑器在弹出来的窗口中对着VBAproject点右键->插入->模块下面会出现一个名为"模块1" ...

  4. GridControl 主从模式(Master-detail)子表格获取行数据

    今天遇到一个问题,gridcontrol使用主从表的时候,在子表中获取子表的行数据时居然获取不到,郁闷了很久.然后在网上找到方法(出处在这里:https://q.cnblogs.com/q/83412 ...

  5. Android 问题列表

    25. Touch 事件传递机制 26. 点击事件设置监听的几种方式 27. Hander 的原理 28. Thread 和HandThread 的区别 29. AsyncTask 简介 30. As ...

  6. LAD 线性判别分析

    线性判别分析,简称LDA,是一种线性学习方法. 常用来降维,是一种有监督的降维方法,是基于最佳分类效果的降维方法. 核心思想 给定训练样本,带label,设法将样本投影到一条直线上,使得同类样例的投影 ...

  7. my first homepage

    <!DOCTYPE html><html><head><style type="text/css">p{ text-indent:2 ...

  8. .net下的缓存技术

    1.为什么要缓存?缓存能解决的问题 1.1稳定性 同一个应用中,对同一数据.逻辑功能和用户界面的多次请求时经常发生的.当用户基数很大时,如果每次请求都进行处理,消耗的资源是很大的浪费,也同时造成系统的 ...

  9. Oracle CONNECT by 简单用法

    Oracle查询层级的  一个表里 通过一个parentid连接 select * FROM A_MERIATILA start with id=520 CONNECT by prior id=PAR ...

  10. c++单链表冒泡排序(交换结点),链表增删改查,运算符重载

    #include <iostream> #include <stdlib.h> #include <time.h> #include <fstream> ...