JavaScript中DOM：document（网页

JavaScript中DOM：document（网页）

.1 DOM: document=网页

在JS中，浏览器已经为我们提供了document对象

document对象代表整个网页，该对象由浏览器提供，可以直接使用

<body>

<button id="btn">我是一个按钮</button>

<script>

// 在JS中，浏览器已经为我们提供了document对象

// document对象代表整个网页，该对象由浏览器提供，可以直接使用

// getElementById()是document的方法，通过方法可以根据元素的id属性获取一个元素

var btn=document.getElementById('btn');

// 修改btn的innerHTML属性

btn.innerHTML="I'm Button";

// alert(btn.innerHTML);

// alert(btn);

// 通过JS来修改button中的文字

</script>

</body>

对象的分类:

JS中，可以将对象分为“内部对象”、“宿主对象”和“自定义对象”三种。

1，内部对象

js中的内部对象包括Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、String以及各种错误类对象，包括Error、EvalError、RangeError、ReferenceError、SyntaxError和TypeError。

其中Global和Math这两个对象又被称为“内置对象”，这两个对象在脚本程序初始化时被创建，不必实例化这两个对象。

2.宿主对象

宿主对象就是执行JS脚本的环境提供的对象。对于嵌入到网页中的JS来说，其宿主对象就是浏览器提供的对象，所以又称为浏览器对象，如IE、Firefox等浏览器提供的对象。不同的浏览器提供的宿主对象可能不同，即使提供的对象相同，其实现方式也大相径庭！这会带来浏览器兼容问题，增加开发难度。

浏览器对象有很多，如Window和Document，Element，form，image，等等。

3.自定义对象

顾名思义，就是开发人员自己定义的对象。JS允许使用自定义对象，使JS应用及功能得到扩充

1.2 事件（event）

事件（event）

- 事件指用户和浏览器的交互瞬间

- 在网页中，像点击鼠标、缩放窗口、点击键盘、移动鼠标...

- 可以在事件时来对事件做一些处理，对其进行响应

<body>

<!-- 设置事件响应的方式一:

- 可以通过在元素的事件属性中设置js代码的形式来响应事件

https://developer.mozilla.org/zh-CN/docs/Web/Events -->

<!--<button id="btn" onmouseenter="alert('你点我干嘛！');">点我一下</button>-->

<button id="btn">点我一下</button>

<script>


/*设置事件响应的方式二:

- 可以在script标签来设置事件的响应*/

// 获取要设置事件的对象

var btn=document.getElementById('btn');

// 可以为元素对应的事件属性设置响应函数形式来处理事件

btn.onclick=function () {

alert('哈哈哈');

};

</script>

</body>

1.3网页加载window.onload:

网页的加载是按照自上向下的顺序一行一行加载的

Window.onload 函数只能绑定一个!

如果将script标签写在网页的上方，它会优先于body加载

编写DOM相关的代码时，有两个编写位置：

1.编写在body标签的最后

2.编写在window.onload=function(){}的响应函数中

// 希望还是将代码写在网页上边

// 希望这些代码，可以在网页加载完毕之后在执行

// load事件表示资源加载，当资源加载完毕后事件会触发

window.onload=function () {

// window的load事件，会在网页加载完毕后触发

// 可以将希望在网页加载完才执行的代码，统一设置在load事件的响应函数中

// 这样即可确保代码在网页加载完成后才执行

//获取id为btn的元素

var btn=document.getElementById('btn');

//为btn绑定单击响应函数

btn.onclick=function () {

alert('哈哈哈哈');

};

};

1.4 DOM 查询:

<script>

//定义一个函数，用来解决绑定代码重复的问题

/*

参数：

id 要绑定单击事件的按钮的id

callback 事件的响应函数

*/

function myClick(id, callback){

var btn=document.getElementById(id);

btn.onclick=callback;

}

window.onload=function () {

//为id为btn01的按钮绑定一个单击响应函数

//获取按钮对象

var btn01=document.getElementById('btn01');

// 为其绑定单击响应函数

btn01.onclick=function () {

// getElementById()用来根据id属性来获取一个元素

// 查找#bj节点

var bj=document.getElementById('bj');

// innerHTML 可以用来查看和设置元素内部的html代码

alert(bj.innerHTML);

};

// 为btn02绑定一个单击响应函数

var btn02=document.getElementById('btn02');

btn02.onclick=function () {

// 查找所有li节点

// getElementsByTagName() 用于根据标签名来获取一组元素节点对象

// 返回是一个类数组对象，所有符合条件的元素都会一起返回

var lis=document.getElementsByTagName('li');

// 遍历数组

for(var i=0; i<lis.length; i++){

alert(lis[i].innerHTML);

}

};

//为id为btn03的按钮绑定一个单击响应函数

var btn03=document.getElementById('btn03');

btn03.onclick=function () {

// 查找name=gender的所有节点

// getElementsByName() 根据元素的name属性来获取一组元素节点对象

var inps=document.getElementsByName('gender');

// 遍历inps

for(var i=0; i<inps.length; i++){

// 获取自结束标签的innerHTML，会返回空串

// alert(inps[i].innerHTML);

/*

读取一个元素的属性：

元素.属性名

例子：

name属性 元素.name

value属性 元素.value

id属性 元素.id

特殊：

class属性 元素.className

修改属性：

元素.属性名=属性值

*/

// alert(inps[i].className);

alert(inps[i].value);

}

};

//为btn04绑定一个单级响应函数

var btn04=document.getElementById('btn04');

btn04.onclick=function () {

// 获取id为city的节点

var city=document.getElementById('city');

// 查找#city下所有li节点

var li=city.getElementsByTagName('li');

// li=document.querySelectorAll('#city li');

alert(li.length);

};

// 为btn05绑定一个单击响应函数

var btn05=document.getElementById('btn05');

btn05.onclick=function () {

// 获取id为city的元素

var city=document.getElementById('city');

// 返回#city的所有子节点

// childNodes 是元素的属性，可以用来获取当前元素的所有子节点

// childNodes会返回当前元素的所有子节点（包括元素和文本）

// IE8以下的浏览器不会将空白的文本节点当成子节点

var cns=city.childNodes;

//遍历cns

// for(var i=0; i<cns.length; i++){

// alert(cns[i]);

// }

// alert(cns.length);

/*

children 是元素的属性，用来获取当前元素的子元素

*/

var cr=city.children;

alert(cr.length);

};

// 为id为btn06的按钮绑定一个单击响应函数

myClick('btn06', function () {

// 获取id为phone的元素

var phone=document.getElementById('phone');

// 返回#phone的第一个子节点

// firstChild用于获取元素的第一个子节点（包括空白的文本节点）

// lastChild 用于获取当前元素的最后一个子节点

// firstElementChild 用来获取当前元素的第一个子元素

// lastElementChild 用来获取当前元素的最后一个子元素

var fc=phone.firstChild;

var fec=phone.firstElementChild;

alert(fec);

});

myClick('btn07',function () {

//获取id为北京元素

var bj=document.getElementById('bj');

// 返回#bj的父节点

// parentNode 用来获取一个元素的父节点

var pn=bj.parentNode;

// innerText用来获取标签内部的文本内容，会自动去除html标签

alert(pn.innerText);

});

myClick('btn08',function () {

// 获取id为android的元素

var and=document.getElementById('android');

// 返回#android的前一个兄弟节点

// previousSibling 用来获取当前元素的前一个兄弟节点

// previousElementSibling 用来获取当前元素的前一个兄弟元素

// nextSibling 获取当前元素的下一个兄弟节点

// nextElementSibling 获取当前元素的下一个兄弟元素

var prev=and.previousSibling;

prev=and.previousElementSibling;

// and.nextElementSibling

alert(prev);

});

// 返回#username的value属性值

myClick('btn09',function () {

// 获取id为username的元素

var um=document.getElementById('username');

alert(um.value);

});

// 设置#username的value属性值

myClick('btn10',function () {

var um=document.getElementById('username');

um.value="老弟可真帅啊！";

});

// 返回#bj的文本值

myClick('btn11',function () {

// 获取id为bj的元素

var bj=document.getElementById('bj');

// alert(bj.innerHTML);

// alert(bj.innerText);

// bj.innerHTML='深圳';

// 获取bj的第一个子节点

// var fc=bj.firstChild;

// 文本节点的nodeValue，表示的是文本节点中的文字

// alert(fc.nodeValue);

alert(bj.firstChild.nodeValue);

});

};

</script>

</head>

<body>

<div id="total">

<div class="inner">

<p>

你喜欢哪个城市?

</p>

<ul id="city">

<li id="bj">北京</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 />

<p>

你手机的操作系统是?

</p>

<ul id="phone">

<li>IOS</li>

<li id="android">Android</li><li>Windows Phone</li></ul>

</div>

<div class="inner">

gender:

<input class="haha" type="radio" name="gender" value="male" >

Male

<input class="haha" type="radio" name="gender" value="female">

Female

<br>

<br>

name:

<input type="text" name="name" id="username" value="abcde">

</div>

</div>

<div id="btnList">

<div><button id="btn01">查找#bj节点</button></div>

<div><button id="btn02">查找所有li节点</button></div>

<div><button id="btn03">查找name=gender的所有节点</button></div>

<div><button id="btn04">查找#city下所有li节点</button></div>

<div><button id="btn05">返回#city的所有子节点</button></div>

<div><button id="btn06">返回#phone的第一个子节点</button></div>

<div><button id="btn07">返回#bj的父节点</button></div>

<div><button id="btn08">返回#android的前一个兄弟节点</button></div>

<div><button id="btn09">返回#username的value属性值</button></div>

<div><button id="btn10">设置#username的value属性值</button></div>

<div><button id="btn11">返回#bj的文本值</button></div>

</div>

</body>

1.5Dom练习切换图片:

<style>

#outer{

width: 520px;

background-color: #bfa;

margin: 50px auto;

text-align: center;

}

img{

vertical-align: bottom;

margin: 10px;

}

</style>

<script>

window.onload=function () {

// 点击按钮切换图片，点击上一张切换到上一张，点击下一张切换到下一张

// 获取图片标签

var img=document.getElementsByTagName('img')[0];

// 切换图片实际上就是修改img的src属性

// img.src="img/3.jpg";

// 创建一个数组，用来存储图片的路径

var imgPath=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];

//创建一个变量用来存储当前显示的图片的索引

var current=0;

// 设置图片的信息

var info=document.getElementById('info');

info.innerHTML='一共 '+imgPath.length+' 张图片，当前第 '+(current+1)+' 张';

//为两个按钮绑定单击响应函数

var prev=document.getElementById('prev');

var next=document.getElementById('next');

// 如何做到在五张图片之间切换？

prev.onclick=function () {

// 上一张

// 索引自减

current--;

//判断current是否小于0

if(current < 0){

current=imgPath.length - 1;

}

// 修改img的src来切换图片

img.src=imgPath[current];

// 图片切换完毕，修改信息

info.innerHTML='一共 '+imgPath.length+' 张图片，当前第 '+(current+1)+' 张';

};

next.onclick=function () {

// 下一张

// 索引自增

current++;

//判断current是否大于4

if(current > imgPath.length - 1){

current=0;

}

img.src=imgPath[current];

info.innerHTML='一共 '+imgPath.length+' 张图片，当前第 '+(current+1)+' 张';

};

};

</script>

</head>

<body>

<div id="outer">

<p id="info">一共 5 张图片，当前第 1 张</p>

<img src="img/1.jpg" alt="冰棍">

<button id="prev">上一张</button>

<button id="next">下一张</button>

</div>

</body>

1.6DOM 其它查询方法:

getElementsByName()它返回的是一个实时更新的数组所有的getElementsXxx的方法都是这个特点==页面代码加载完成后才更新添加

querySelector()- 可以根据选择器的字符串去页面中查询元素

- 会返回满足选择器的第一个元素

querySelectorAll() //两种都是静态获取

- 根据选择器获取一组元素节点对象

<script>

//getElementsByName()它返回的是一个实时更新的数组 所有的getElementsXxx的方法都是这个特点==页面代码加载完成后才更新添加

// 如果在网页中添加新的符合条件的元素，它会自动被添加到数组中

window.onload=function () {

// getElementsByClassName() 用于根据元素的class属性值来获取一组元素节点对象

var box1=document.getElementsByClassName('box1');

// alert(box1.length);

// for(var i=0; i<box1.length; i++){

// box1[i].innerHTML='哈哈哈哈哈哈';

// }

/*

querySelector()- 可以根据选择器的字符串去页面中查询元素

- 会返回满足选择器的第一个元素

querySelectorAll() //两种都是静态获取

- 根据选择器获取一组元素节点对象

*/

var result=document.querySelector('.box1');

result=document.querySelectorAll('.box1');

result=document.querySelector('[class=box1]');

result=document.querySelector('div');

result=document.querySelector('div:nth-child(2)');

// alert(result.innerHTML);

/*

document.all 是一个过时的属性

它表示页面中的所有元素

可以使用 document.getElementsByTagName('*') 来代替

document.body 获取页面中的body元素

document.documentElement 获取页面的根元素html

*/

// alert(document.all.length);

// var all=document.getElementsByTagName('*');

// alert(all.length);

// alert(document.body);

// alert(document.getElementsByTagName('body')[0]);

alert(document.documentElement);

};

</script>

</head>

<body>

<div class="box1">1</div>

<div class="box1">2</div>

<div class="box1">3</div>

<div class="box1">4</div>

</body>

欢迎关注我的原创文章：小伙伴们！我是一名热衷于前端开发的作者，致力于分享我的知识和经验，帮助其他学习前端的小伙伴们。在我的文章中，你将会找到大量关于前端开发的精彩内容。

学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师，还是仅仅对前端开发感兴趣，我的文章将能为你提供宝贵的指导和知识。

在我的文章中，你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识，并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者，我的文章都能够满足你的学习需求。

此外，我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展，新的框架和工具层出不穷。通过我的文章，你将会了解到最新的前端技术趋势，并了解如何应对这些变化。

我深知学习前端不易，因此我将尽力以简洁明了的方式解释复杂的概念，并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发，并提升你的技能。

如果你想了解更多关于前端开发的内容，不妨关注我的原创文章。我会不定期更新，为你带来最新的前端技术和知识。感谢你的关注和支持，我们一起探讨交流技术共同进步，期待与你一同探索前端开发的奇妙世界！

#2023年度创作挑战#

错，是我，你没有走错片场，从今天开始，打算在自己公众号里写一些自己学习HTML、CSS、JS过程中的一些心得和代码。

今天算是第一天吧，是照着别人的视频一边抄一边写的。时间有点仓促，没来得及做注释。虽然代码各种不规范，但是好歹运行成功了（封面图和下图为证）。以此纪念吧！

<!DOCTYPE html>

<html>

<head>

margin: 0;

padding: 0;

}

@font-face{

font-family: "qingshu";

src:url("MFQingShu_Noncommercial-Regular.ttf");//本地字体

}

#pp{

font-family: "qingshu";

margin: 0；

padding:0;

width: 600px;

height: 600px;

background: orange;

line-height: 600px;

font-size: 100px;

text-align: center;

text-shadow: 5px 5px blue;

transform: scale(0.5) translate(200px,50px);

transform: scale(0.5) rotate(180deg);

box-shadow: 10px;

}

h3{

margin-left: 200px;

}

</style>

window.onload=function Time(){

var time=new Date;

var hour=time.getHours();

var min=time.getMinutes();

var sec=time.getSeconds();

document.getElementById("pp").innerHTML="时间："+hour+":"+min+":"+sec;

setTimeout(window.onload,1000)

}

</script>

</head>

<body>

<h3>

2018年11月8日练习

</h3>

</body>

</html>

最后，希望看完的各位，不要取关。。。

为了开原创，加上了，昨晚上写的废话。。。

人也许只有选对了路，才会觉得努力不会白费。即便路上挣扎和苦闷，但是，你做的事情如果真的是自己想做的事情，这些困难都不事儿。

一直觉得，人最可怕的莫过于自己都不知道自己喜欢啥。。。

追逐梦想并不是最累的，寻找到真正属于自己的道路才是最辛苦的。因为期间，你将经历无数次选择以及伴随而来的内心的情绪起伏和失望。

发现自己很多时候，内心对很多人很多事都是充满敬畏感的。但是自己的外在表现却又是对大多人和事不屑一顾。。。这也许就是传说中的心口不一吧！

也许你觉得领导交代给你的工作，是信任你，帮你提高个人能力，或者说是给你锻炼和学习的机会。

然而，事实并不是这样的。领导只是面对要解决的问题，只是在寻找合适去做这件事情或者其他人不愿意做的人。至于领导口中的锻炼和学习，只是嘴里的漂亮话而已。

还有，领导总喜欢拿一些非常基础的工作来测试你的工作态度。

这个做法尤其喜欢用在新来的员工身上，这些工作还要求新来的不能投机取巧，要用最笨方法去做，名曰磨练和考验。

这些做法看似没啥问题，可是人做很多事都会有惯性。这些“新来的”也许半年后还在做这些基础工作。

而对于一些比较牛的技术人员，对于这些工作，大多数会选择拒绝，他们可以找到更高层级的工作，而不是每天被这些琐事所累！

对于这些人，他们甚至直接出钱把这些琐事交给闲人去做。

这种境界，也只有到了这个高度的人才能体会到。

然而，如今的一些小公司，大多数领导和员工的能力都不强，于是只能交代给你最基础的工作，工资当然也是最基础的。

对于这些琐事，你也并不爱做，但却不得不做。因为你已经会做而且已经做的烂熟于心了。

而寻找其本质，你只不过是帮领导干活的一个劳动工具而已。谈那么多的理想，都是扯淡。

最近觉得，自己的状态一直是被公司的工作所绑架了，其中包括时间和精力。

我这人吧，心不狠，又不会拒绝别人。自己的工作也可能会因为时间有限或者业务不精干的一塌糊涂。所以，我这人一直活得太累。

人能活在这个世界上，都不容易。每个人都是在辛苦的过着日子。也许你擅长人际关系，你去搞销售，搞管理。

你擅长做事情或者琢磨东西，那就去做技术或者研发。

那些看似被你成为成长的工作大部分是在利用和浪费你的时间而已，因为，你真的不一定能从中学到东西。你也无法面面俱到，全都做好。

所以，我觉得人这一辈子，还是找到自己擅长的事情，并把它变成自己喜欢去做也愿意做好的事情。

总之，面对自己完全不感兴趣的工作，给自己的生活和心灵留点时间和空间吧！进而寻找到自己的一技之长，这样才能在社会中立足。

最后，路终归是自己走的，开心与否，只有自己知道，与他人无关。。。

2018年11月9日 00：15

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

改变 HTML 输出流

JavaScript 能够创建动态的 HTML 内容：

今天的日期是： Thu Aug 25 2016 09:23:24 GMT+0800 (中国标准时间)

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

实例

<!DOCTYPE html>

<html>

<body>

document.write(Date());

</script>

</body>

</html>

	绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档。

改变 HTML 内容

修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=新的 HTML

本例改变了 <p>元素的内容：

实例

<html>

<body>

<p id="p1">Hello World!</p>

document.getElementById("p1").innerHTML="新文本!";

</script>

</body>

</html>

本例改变了 <h1> 元素的内容：

实例

<!DOCTYPE html>

<html>

<body>

<h1 id="header">Old Header</h1>

var element=document.getElementById("header");

element.innerHTML="新标题";

</script>

</body>

</html>

实例讲解：

上面的 HTML 文档含有 id="header" 的 <h1> 元素
我们使用 HTML DOM 来获得 id="header" 的元素
JavaScript 更改此元素的内容 (innerHTML)

改变 HTML 属性

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=新属性值

本例改变了 <img> 元素的 src 属性：

实例

<!DOCTYPE html>

<html>

<body>

document.getElementById("image").src="landscape.jpg";

</script>

</body>

</html>

实例讲解：

上面的 HTML 文档含有 id="image" 的 <img> 元素
我们使用 HTML DOM 来获得 id="image" 的元素
JavaScript 更改此元素的属性（把 "smiley.gif" 改为 "landscape.jpg"）

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

在线咨询

上一篇：2022年上海公安学院本科招生网上登记即将开始！
下一篇：css实现网站通用头部

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JavaScript中DOM：document（网页

.1 DOM: document=网页

对象的分类:

1.2 事件（event）

1.3网页加载window.onload:

1.4 DOM 查询:

1.5Dom练习切换图片:

1.6DOM 其它查询方法:

您的项目需求