在什么位置编写js代码

一般把js代码写在window.onload方法中 执行该方法时页面已经加载完毕，可以获取到所有的dom元素

------------------------------------------------------------------------------------

-------------------------------------------------------------

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript">//获取元素节点的子节点
        window.onload = function(){var v1=document.getElementsByTagName("li")//根据html文档的标签名称 获得所对应的节点集合alert(v1.length);//页面将会打印8var v2=document.getElementById("city");//根据html文档中的id属性得到对应的节点集合var linode=v2.getElementsByTagName("li");//获取city节点的子节点li的集合alert(linode.length);//将会打印4var v3=document.getElementsByName("username");//根据html文档中的name属性来获取对应的节点集合alert(v3.length);//页面将会打印1
}</script></head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city"><li id="bj" name="BeiJing">北京</li><li>上海</li><li>东京</li><li>首尔</li>
</ul><br><br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li>
</ul><br><br>
name: <input type="text" name="username"id="name" value="atguigu"/>
</body>
</html>

------------------------------------------------------------------

属性节点：某一元素节点中的属性

name: <input type="text" name="username"id="name" value="哎呦不错哦"/>

　window.onload中的代码

            //读写属性节点//1先获取对应的元素节点var v=document.getElementById("name");//2.在读取指定的属性值alert(v.value);//输出 “哎呦不错哦”//3.改变属性值v.value="不错你大爷";

　　运行效果：

单击确定之后

---------------------------------------------------------------------------

读取文本节点：文本节点一定是元素节点的子节点

<p>你喜欢哪个城市?</p>
<ul id="city"><li id="bj" name="BeiJing">北京</li><li>上海</li><li>东京</li><li>首尔</li>
</ul>

　　

            //读写文本节点//1获取文本节点所在的元素节点var v=document.getElementById("bj");//通过firstchild方法定位到文本节点(因为id为bj的节点 为"<li id="bj" name="BeiJing">北京</li>" 而它只有一个子节点就是 北京)var v2= v.firstChild;//定位到文本节点alert(v2);//输出节点的类型
            alert(v2.nodeValue);//通过nodeValue方法输出节点的内容 北京v2.nodeValue="北京2"//改变值

运行效果：

--------------------------------------------------------------

子节点的概念

            var v=document.getElementById("city");//获取#city 下的所有子节点//通过ChildNodes方法可以得到节点的所有子节点var v2=v.childNodes;alert(v2);//打印v2的类型  是一个集合数组  表示该节点下的所有子节点alert(v.childNodes.length);//将会该集合的长度  打印9var v3=v.firstChild;//得到第一个子节点var v4= v.lastChild;//得到最后一个子节点alert(v3);//输出该节点类型alert(v4);

　　

　　运行效果：

思考为什么子节点是9个呢

修改程序：

少了一个文本节点

代码不变：再次执行：

---------------------------------------------------------------------------------------

　

---------------------------------------------------------------

小实验：用户每次单击文本都要在屏幕输出点击文本值

<p>你喜欢哪个城市?</p>
<ul id="city"><li id="bj" name="BeiJing">北京</li><li>上海</li><li>东京</li><li>首尔</li>
</ul><br><br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li>
</ul>

            var vs=document.getElementsByTagName("li");//alert(vs.length);for(var i=0;i<vs.length;i++){// 为每个li节点添加点击事件vs[i].οnclick=function(){//得到当前操作的li节点v1=this.firstChild;//这里不能写vs[i]  只能写this  表示当前的li节点 因为当用户点击的时候i的值每次都是8alert(v1.nodeValue);alert(i);//验证每次单击文本时 i的值  结果是：无论单击那个文本  打印的都是8}}

程序运行结果：

单击北京：

单击魔兽

这就是为什么只能使用this而不能使用数组下标的原因

-------------------------------------------------------------

小实验：单击文本 ，文字信息改变，再次单击，恢复单击之前的效果

<ul id="city"><li id="bj" name="BeiJing">北京</li><li>上海</li><li>东京</li><li>首尔</li>
</ul><br><br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li>
</ul>

            var nodetext=document.getElementsByTagName("li");//得到所有的li节点for(var i=0;i<nodetext.length;i++){//循环遍历 nodetext[i].onclick=function(){//为每个节点设置点击事件var v2=this.firstChild.nodeValue;//得到文本值var zz=/\^\^+/g;//正则表达式if(zz.test(v2)){// alert(v2+"1");v2=v2.replace(zz,"");}else{// alert(v2+"2");v2="^^"+v2;}this.firstChild.nodeValue=v2;//重新设定当前正在操作的元素值}}

运行效果：

单机之前：

逐个单击4个文本：

再次单击3个文本：

----------------------------------------------------------------

 nodeValue,nodeType,nodeName这三个属性的测试

元素节点测试：

<p>你喜欢哪个城市?</p>
<ul id="city"><li id="bj" name="BeiJing">北京</li><li>上海</li><li>东京</li><li>首尔</li>
</ul>

1             //任何一个节点都有 nodeName,nodeType nodeValue这三个属性
2
3             //1.元素节点的这三个属性值测试
4             var v=document.getElementById("bj");//获得元素节点 li
5             alert(v.nodeName);//节点名称：li
6             alert(v.nodeType);//节点类型 元素节点：1
7             alert(v.nodeValue);//元素节点的nodeValue始终为null

运行结果：

-------------------------------------------------------------------

属性节点测试：

元素节点.getAttirbuteNode("属性值")

先看下面的代码：

            var v=document.getElementById("name");//获取id为name的元素节点alert(v.nodeType);//打印1  表示元素节点var v2= v.getAttributeNode("name");//获得该元素节点下的属性节点alert(v2.nodeType);//打印2 表示属性节点//  var v=document.getElementById("name"); var v2= v.getAttributeNode("name") 和下面的等价var v3=document.getElementById("name").getAttributeNode("name");//获得指定的属性节点alert(v3.nodeType);

运行结果：

先获取的是元素节点，所以打印1，后来获取的是元素节点下的属性节点，所以打印2，可以使用连缀的方式 ，所以第三条语句 获取的是属性节点 所以打印3

所以观察下面的代码：

         //任何一个节点都有 nodeName,nodeType nodeValue这三个属性//1.属性节点的这三个属性值测试var v=document.getElementById("name").getAttributeNode("name");//获得指定的属性节点 元素节点中name属性alert(v.nodeName);//属性节点的节点名 该节点表示是哪个属性 name  即通过该属性  获得了元素节点中的该属性节点alert(v.nodeType);//节点类型 是属性节点  所以打印2alert(v.nodeValue);//属性节点name属性中的值：usernamevar v2=document.getElementById("name").getAttributeNode("id");//获得指定的属性节点 元素节点中id属性alert(v2.nodeName);//属性节点的节点名 该节点表示是哪个属性 id  即通过该属性  获得了元素节点中的该属性节点alert(v2.nodeType);//节点类型 是属性节点  所以打印2alert(v2.nodeValue);//属性节点id属性中的值：namevar v3=document.getElementById("name").getAttributeNode("value");//获得指定的属性节点 元素节点中value属性alert(v3.nodeName);//属性节点的节点名 该节点表示是哪个属性 value  即通过该属性  获得了元素节点中的该属性节点alert(v3.nodeType);//节点类型 是属性节点  所以打印2alert(v3.nodeValue);//属性节点value属性中的值：哎呦不错哦var v4=document.getElementById("name").getAttributeNode("type");//获得指定的属性节点 元素节点中type属性alert(v4.nodeName);//属性节点的节点名 该节点表示是哪个属性 type  即通过该属性  获得了元素节点中的该属性节点alert(v4.nodeType);//节点类型 是属性节点  所以打印2alert(v4.nodeValue);//属性节点type属性中的值：text

打印结果：

-------------

-------------

-------------

-------------------------------------------------------------

文本节点测试：

              //任何一个节点都有 nodeName,nodeType nodeValue这三个属性//1.属性节点的这三个属性值测试var v=document.getElementById("bj");//获得元素节点var v2= v.firstChild;//获得文本节点  因为这个节点中只有一个子节点 所以使用lastChild也行//上面两句和var v2=document.getElementById("bj").firstChild;等价alert(v2.nodeName);//#textalert(v2.nodeType);//文本节点类型  打印3alert(v2.nodeValue);//文本值  北京

　运行效果：

----------------------------------------------

nodeType nodeName 是只读的 而nodeValue是可以改变的

            //nodeType nodeName 是只读的 而nodeValue是可以改变的  这三个属性值 只有文本节点使用nodeValue读写值  使用的最多var v=document.getElementById("bj").firstChild;alert(v.nodeValue);v.nodeValue="北京2";//改变值

　　

运行效果：

运行之前：

单击确定之后：

*****************************************************

总结一：

获取元素节点：

window.onload = function(){//获取元素节点的三种方式//1.通过id的名称来获取 getElementById//2.通过标签名称来获取 getElementsByTagName//3.通过标签中的name属性值 getElementsByNamevar v=document.getElementById("bj");alert(v.nodeType);//打印1//该方法会返回一个数组var v2=document.getElementsByTagName("p");//获取文档中的p标签  因为是有两个p表签  所以v2是一个数组的形式(即使只有一个p标签返回的仍然是一个数组)  那么使用v2[0]获得第一个p标签alert("v2是："+v2+"它的长度："+v2.length);v4=v2[0];//这个标签是一个元素标签alert(v4.nodeType);//打印1//这个方法也返回一个数组var v3=document.getElementsByName("username");//input 表签中有name属性  该方法返回一个数组  尽管只有一个input属性 但仍然返回数组  所以 v3[0]即为获得元素标签alert("v3是："+v3+"它的长度："+v3.length);var v5=v3[0];alert(v5.nodeType);//打印1}

运行效果：

----------------------

---------------------

--------------------------------------

获取子节点方式：

-----------------------------------

读写文本节点

---------------------------------------

属性节点：

1             var v=document.getElementsByName("username")[0];//通过属性名称  获得的是一个元素节点的集合 而不是属性节点  因为只有一个元素  所以下标0即为得到的元素节点
2             //直接通过节点.属性名 读写属性值  而文本节点的值 则是先得到元素节点 然后得到文本节点  最后通过nodevalue得到文本值
3             alert(v.value);//打印该元素节点中  value属性中的具体值 “哎呦不错哦”
4             //改变它的值
5             v.value="你好";

运行效果：

单击确定之后：

转载于:https://www.cnblogs.com/Joke-Jay/p/6703412.html

JavaScript(DOM编程一)相关推荐

  1. JavaScript Dom编程艺术

    当我对JavaScript还停留在只认识这几个字母的时候,有一天我突然心血来潮,在网上下了DOM Scripting的样章,照着里面的例子写了我平生第一个能让我知所以然JavaScript,在浏览器运 ...

  2. 高性能JavaScript DOM编程

    我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和 JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间 ...

  3. Javascript——DOM编程

    Javascript--DOM编程 基本概述 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM可以以一种独立于平台和语 ...

  4. 初读JavaScript DOM编程艺术（一）

    JavaScript DOM编程艺术--前三章概念总结 一. 概述 1.什么是JavaScript 2.什么是DOM 二. JavaScript 语法 1. 语句和注释 2. 变量和数组 三. DOM ...

  5. JavaScript DOM编程艺术学习笔记（一）

    嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...

  6. JavaScript DOM编程艺术第一章：JavaScript简史

    本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助, ...

  7. 重读《JavaScript DOM编程艺术》（第一版）

    今天来了雅兴去图书馆看书.把<JavaScript DOM编程艺术>温习了一遍,平时写js的机会不是特别多,很多知识都有些模糊了. 伴随着身边键盘卡啦卡啦的声音,一位手速不是一般的快的程序 ...

  8. JavaScript DOM编程-佟刚-专题视频课程

    JavaScript DOM编程-12198人已学习 课程介绍         本Java视频教程涵盖 JavaScript DOM 编程的全部核心技术.JavaScript DOM 编程是编写 Aj ...

  9. 《JavaScript DOM 编程艺术》读书笔记

    <JavaScript DOM 编程艺术>读书笔记--其一 第二章 1.Javascript代码编写方式: (1)将JavaScript代码放在文档<head>标签中的< ...

  10. JavaScript DOM编程艺术（第二版）

    JavaScript DOM编程艺术简要介绍 第二章: JavaScript语法 语法 语句 注释 变量 数据类型 数组 对象 操作 条件语句 比较操作符 逻辑操作符 循环语句 while循环 for ...

最新文章

  1. 亚马逊：从零售商向科技公司的质变
  2. 中国电子学会发布《新一代人工智能领域十大最具成长性技术展望（2018-2019年）》...
  3. 什么是__pycache__？
  4. pyqt setStyleSheet用法
  5. c++ DirectShow播放任意格式的视频
  6. C语言printf与scanf函数
  7. java类使用其他类的变量_如何将java类中的变量加载到其他类
  8. pytorch adagrad_【学习笔记】Pytorch深度学习—优化器（二）
  9. error:1407742E:SSL routines:SSL23_GET_SERVER_HELLO:tlsv1 alert protocol version
  10. 关于Java基础你不得不会的34个问题
  11. LiveCoding
  12. MasterPage 变化了的 ClientID ctl00_
  13. Egg.js -- 及案列介绍
  14. Customer-exit总结
  15. 第三次个人作业——关于K米(Andorid)的案例分析
  16. 轻松了解python正则表达式 (超详细,附举例)
  17. [WUSTCTF2020]alison_likes_jojo
  18. RTMP、RTSP、m3u8、flv 区别及含义
  19. crm组织服务中的xRM消息
  20. Linux基础第一课——基础知识了解

热门文章

  1. python 单位根检验代码_python时间序列分析
  2. SQL注入之错误注入_基于updatexml()
  3. 唐郑国公魏征金口“斩龙台”梦斩泾河黄龙的传说
  4. centos之mysql安装配置使用
  5. 二叉树的BFS及DFS
  6. 在osx 10.10.3 下安装git总结
  7. centOS下JDK1.8的安装
  8. linux系统上tftp服务器的安装配置
  9. 怎么用shell ssh，然后再exit?
  10. Markdown编辑器中字号、颜色的设置方法及一些好看的颜色示例