1.html 文档编写 js 代码的位置：

window.onload事件在整个html文档被完全加载完再执行，
    所以可以获取html文档的任何节点

js-window-onload.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. <script type="text/javascript">
  7.     //window.onload事件在整个html文档被完全加载完再执行
  8.     //所以可以获取html文档的任何节点
  9.     window.onload = function() {
  10.  
  11.     };
  12. </script>
  13. </head>
  14. <body>
  15.     <button>Click</button>
  16. </body>
  17. </html>

2.获取元素节点方式

①. document.getElementById:

根据 id 属性获取对应的单个节点

②. document.getElementsByTagName:
                     根据标签名获取指定节点名字的数组, 数组对象 length 属性可以获取数组的长度

③. document.getElementsByName:
                     根据节点的 name 属性获取符合条件的节点数组,
                     但 ie 的实现方式和 W3C 标准有差别:
                     在 html 文档中若某节点(li)没有 name 属性,　
                     则 ie 使用 getElementsByName 不能获取到节点数组, 但火狐可以.

dom-getNode.html

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Untitled Document</title>
  6.  
  7. <script type="text/javascript">
  8.     //获取指定的元素节点.
  9.     window.onload = function() {
  10.         //1.获取id为bj的节点，编写文档时确保 id属性值是唯一的，该方法为document对象的方法
  11.         var bjNode = document.getElementById("bj");
  12.         alert(bjNode);
  13.  
  14.         //2.获取所有li节点，使用 标签名 获取节点的集合，该方法为Node接口的方法， 任何一个节点都有这个方法
  15.         var liNodes = document.getElementsByTagName("li");
  16.         alert(liNodes.length);
  17.  
  18.         var cityNode = document.getElementById("city");
  19.         var cityLiNode = cityNode.getElementsByTagName("li");
  20.         alert(cityLiNode.length);
  21.  
  22.         // 3.根据html文档元素的name属性名来获取指定的节点的集合
  23.         var genderNodes = document.getElementsByName("gender");
  24.         alert(genderNodes.length)
  25.  
  26.         //若html元素自身没有定义name属性，则getElementsByName(),此方法对于IE无效，所以使用该谨慎
  27.         var bjNode2 = document.getElementsByName("BeiJing");
  28.         alert(bjNode2.length)
  29.     }
  30. </script>
  31.  
  32. </head>
  33. <body>
  34.     <p>你喜欢哪个城市?</p>
  35.     <ul id="city">
  36.         <li id="bj" name="BeiJing">北京</li>
  37.         <li>上海</li>
  38.         <li>东京</li>
  39.         <li>首尔</li>
  40.     </ul>
  41.  
  42.     <br>
  43.     <br>
  44.     <p>你喜欢哪款单机游戏?</p>
  45.     <ul id="game">
  46.         <li id="rl">红警</li>
  47.         <li>实况</li>
  48.         <li>极品飞车</li>
  49.         <li>魔兽</li>
  50.     </ul>
  51.  
  52.     <br>
  53.     <br> gender:
  54.     <input type="radio" name="gender" value="male" />Male
  55.     <input type="radio" name="gender" value="female" />Female
  56. </body>
  57. </html>

3. 获取属性节点:
          ①可以直接通过 cityNode.id 这样的方式来获取和设置属性节点的值

②通过元素节点的 getAttributeNode 方法来获取属性节点,
              然后在通过 nodeValue 来读写属性值

dom-getNode2.html

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Untitled Document</title>
  6.  
  7. <script type="text/javascript">
  8.     //读写属性节点
  9.     window.onload = function() {
  10.         // 属性节点即为某一指定元素节点的属性
  11.         //1.先获取指定那个元素的节点
  12.         var nameNode = document.getElementById("name");
  13.  
  14.         //2.读取指定属性的值
  15.         alert(nameNode.value);
  16.  
  17.         //3.设置指定属性的值
  18.         nameNode.value = "李静"
  19.  
  20.     }
  21. </script>
  22.  
  23. </head>
  24. <body>
  25.     <p>你喜欢哪个城市?</p>
  26.     <ul id="city">
  27.         <li id="bj" name="BeiJing">北京</li>
  28.         <li>上海</li>
  29.         <li>东京</li>
  30.         <li>首尔</li>
  31.     </ul>
  32.  
  33.     <br>
  34.     <br>
  35.     <p>你喜欢哪款单机游戏?</p>
  36.     <ul id="game">
  37.         <li id="rl">红警</li>
  38.         <li>实况</li>
  39.         <li>极品飞车</li>
  40.         <li>魔兽</li>
  41.     </ul>
  42.  
  43.     <br>
  44.     <br> name：
  45.     <input type="text" name="username" id="name" value="xiaoxiaolin">
  46. </body>
  47. </html>

获取元素节点 & 操作属性节点的更多相关文章

  1. jacascript DOM节点——元素节点、属性节点、文本节点

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! DOM节点的三个种类:元素节点.文本节点.属性节点: 元素节点 元素节点就是 HTML 标签元素,元素节点 ...

  2. 初探JavaScript（一）——也谈元素节点、属性节点、文本节点

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

  3. HTMLDOM中三种元素节点、属性节点、文本节点的测试案例

    HTML dom中常用的三种节点分别是元素节点.属性节点.文本节点. 具体指的内容可参考下图: 以下为测试用例: <!DOCTYPE html> <html> <head ...

  4. DOM中元素节点、属性节点、文本节点

    DOM中有12中节点,但最常用到的是元素节点,属性节点,文本节点. 元素节点的节点类型(nodeType)是1: 属性节点的节点类型(nodeType)是2: 文本节点的节点类型(nodeType)是 ...

  5. DOM中元素节点、属性节点、文本节点的理解

    DOM中元素节点.属性节点.文本节点的理解 节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是:nodeName(节点名称) nodeValue(节点值) nodeType(节点类型)  ...

  6. DOM中元素节点、属性节点、文本节点的理解13.3

    节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是:nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) nodeType nodeType 属性可返 ...

  7. DOM中元素节点，属性节点，文本节点的理解

    节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是: nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) nodeType nodeType 属性可 ...

  8. js原生获取元素的css属性

    习惯了用jQuery的css()的方法获取元素的css属性,突然不用jquery了,当要获得元素的css时候,我瞬间停顿了一下,咦?咋获取元素的css值?比如获取元素的width.是这样么?docum ...

  9. 利用getComputedStyle方法获取元素css的属性值

    在平时的工作中有时候会碰到需要获取元素当前样式的问题,查了一下可以用getComputedStyle这个方法来获取元素计算后的样式(有些我们在css里面没有写的,浏览器默认的样式也可以获得) getC ...

随机推荐

  1. Python基础03 id

    id id(x)对应变量x所引用对象的内存地址.可以把id(x)看成变量x的身份标识. is 有时在编程中需要与变量的身份标识打交道,但不是通过 id 函数,而是 is 操作符. The operat ...

  2. 拒绝老土！暗黑风格半透平面化主题—InfinityFreedom正式发布

    经常听到“路由器界面土点就土点吧,凑合能用就成.” 诚然,路由器重要的是功能,但为什么要辣眼睛呢? 拯救喜欢折腾的你,抢救干涩的眼球,原创OpenWrt主题Infinity Freedom正式发布! ...

  3. linux centos7搭建redis-5.0.5

    1. 下载redis 1.1 下载地址 http://download.redis.io/releases/ 1.2 安装版本 redis-5.0.5.tar.gz 2. 安装redis 2.1 前置 ...

  4. ApplicationInsights迁移国内躺的坑

    由于之前有段时间访问国际版的Application Insights实在是慢,而且又不是每个人都有梯子,然后国内版大概在去年(2019)六七月左右已经上线,想着也有一段时日了,要么就迁了吧. 然后实际 ...

  5. Python自动生成100以内加减乘除混合运算题

    import random from random import choice ops = ('+','-','×','÷') ans = [] i=0 while i < 100 : op1 ...

  6. 黑马程序员_毕向东_Java基础视频教程——java语言组成部分（随笔）

    java语言组成部分 Java是一种强类型语言,所谓强类型语言就是对具体的数据进行不同的定义.对类型的划分的十分细致,对内存中分配了不同大小的内u你空间 关键字 标识符 注释 变量和常量 运算符 语句 ...

  7. python之Linux（Ubuntu）系统安装Python

    Linux 系统是为编程而生的,因此绝大多数的 Linux 发行版(Ubuntu.CentOS 等)都默认自带了 Python.有的 Linux 发行版甚至还会自带两个版本的 Python,例如最新版 ...

  8. React:Composition

    在日常的UI构建中,经常会遇到一种情况:组件本身更多是作为一个容器,它所包含的内容可能是动态的.未预先定义的.这时候它的内容取决另一个组件或外部的输入.比如弹层. props.children: Re ...

  9. DPDK IP分片及重组库（学习笔记）

    1 前置知识学习 1.1 MTU MTU是最大传输单元( Maximum Transmission Unit)的缩写,指一个接口无需分片所能发送的数据包的最大字节数.  MTU范围在46 ~ 1500 ...

  10. ES[7.6.x]学习笔记（九）搜索

    搜索是ES最最核心的内容,没有之一.前面章节的内容,索引.动态映射.分词器等都是铺垫,最重要的就是最后点击搜索这一下.下面我们就看看点击搜索这一下的背后,都做了哪些事情. 分数(score) ES的搜 ...