DOM学习笔记（坚持~~~~）

编程入门行业动态更新时间:2024-10-11 17:19:28

DOM<a href=https://www.elefans.com/category/jswz/34/1770117.html style= 学习笔记（坚持~~~~）"/>

DOM学习笔记（坚持~~~~）

1.DOM简介

1.1什么是DOM

文档对象模型简称DOM，W3C组织推荐的处理可扩展标记语言的标准编程接口，通过这些DOM接口可以改变网页的内容，结构和样式。

1.2 DOM树

文档：一个页面就是一个文档，DOM中使用document表示

元素：页面中所有标签都是元素，DOM中使用element表示

节点：网页中所有内容都是节点（标签属性文本注释等），DOM中使用node表示。

Dom把以上内容都看作是对象

2.获取元素

2.1如何获取网页元素

Dom在我们实际开发中主要只用来操作元素

我们如何获取页面中的元素呢？

获取元素可以使用以下几种方法：

根据ID获取
根据标签名获取
通过HTML5新增方法获取
特殊元素获取

2.2根据ID获取

使用getElementById(‘id’)方法获取ID的元素对象。

返回一个匹配特定 ID的元素。由于元素的 ID 在大部分情况下要求是独一无二的，这个方法自然而然地成为了一个高效查找特定元素的方法。

getElementById()返回一个匹配特定 ID的元素。

//语法 var element = document.getElementById(id);

//1.因为文档页面是从上往下加载的，所以先有标签，所以JS写在标签下面

//2.参数id是大小写敏感的字符串

//3.返回但是元素对象

//4.驼峰命名法

2.3根据标签名获取

getElementsByTagName()

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

//1.返回是获取过来的元素对象的集合以伪数组形式存储

console.log(timel);

console.log(timel[0]);

//2.我们想要依次打印里面的元素对象可以采取遍历的形式

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

console.log(timel[i])

}

//3.得到的元素对象是动态的。

//4.如果页面中没有这个元素，返回的是一个空的伪数组。

//5.还可以获取某个父元素内部所有指定标签名的子元素

element.getElementsByTagName('标签名')

var olli = ol.getElementsByTagName('li');//指定ol里面的li元素

console.log(olli);

还可以这样先用ID获取到父元素，然后用标签获取子元素。

var ollist = document.getElementById('yes');

console.log(ollist.getElementsByTagName('li')); //HTMLCollection(4) [li, li, li, li]

2.4H5新增的获取方法

1..根据类名获取某些元素

.getElementsByClassName('类名')

例如：

var box = document.getElementsByClassName('bu');

console.log(box);

2.querySelector（‘ ’）返回指定选择器的第一个元素对象

例如

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

console.log(box1);

var box2 = document.querySelector('#time');

3.querySelectorAll(' ');返回指定选择器的所有元素对象合集

var boxall = document.querySelectorAll('.bu');

console.log(boxall);

var allli = document.querySelectorAll('li');

console.log(allli);

2.5获取特殊元素body html

1.获取body元素

var bodyEle = document.body;

console.log(bodyEle);

2.获取html元素

var htmlEle = document.documentElement;

console.log(htmlEle);

3 事件基础

3.1什么是事件基础

javascript使我们有能力创建动态页面，而时间是可以被Javascript侦测到的行为

简单理解：触发---响应机制

网页中每一个元素都可以产生某些可以触发Javascript的事件。例如用户可以点击某个按钮产生一个事件然后去执行某些操作

3.2事件三部分

事件源，事件类型，事件处理程序，也称作事件三要素

(1)事件源事件被触发的对象

var btn = document.getElementById('btn');//事件源

(2)事件类型如何触发什么事件比如鼠标点击（onclick），还是鼠标经过，还是键盘按下

(3)事件处理过程通过一个函数赋值的方式完成

btn.onclick = function () { //处理过程

alert('点秋香');

}

3.3执行事件步骤

1.获取事件源

2.注册事件（绑定事件）

3.添加事件处理程序（采取函数赋值形式）

var div = document.querySelector('div');

div.onclick = function () { //onclick就是绑定事件

console.log('我被选中了')

}

常见鼠标事件

鼠标常见事件
鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

3.4分析事件三要素

下拉菜单案例分析，鼠标经过文字展示下拉菜单。那么文字就是事件源，鼠标经过就是注册事件，展示下来菜单就是事件处理程序。

注意多看多分析。

4.操作元素

DOM操作可以改变网页内容，结构和样式。我们可以利用DOM操作元素来改变元素里面的内容，属性等。注意一下都是属性。

4.1改变元素内容

1.element. innerText

从起始位置到终止位置的内容，但是它除去html标签，同时空格和换行也会去掉。

element. innerText 是在原来的内容上前面添加内容。

案例：点击按钮，页面显示当前系统的时间

   <body><button>显示当前系统时间</button><div>某个时间</div><p>FDFD<span>123</span></p><script>//获取元素var btn = document.querySelector('button');var div = document.querySelector('div');//注册事件btn.onclick = function () {div.innerText = getDate();}function getDate() {//获得当前的日期，同时展示XXXX年X月x日  星期X。var date = new Date();var years = date.getFullYear();var month = date.getMonth() + 1;var dates = date.getDate();var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]var day = date.getDay();return years + '年' + month + '月' + dates + '日 ' + week[day] + date.getHours() + '时' + date.getMinutes() + '分' + date.getSeconds() + '秒';}//我们元素可以不用添加事件var p = document.querySelector('p');p.innerText = getDate();//页面加载就显示了console.log(p.innerText);//FDFD 123console.log(p.innerHTML);//FDFD   <span>123</span></script></body>

2.element.innerHTML

起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行。识别html标签，W3C标准。这个属性使用比较多。

element.innerHTML 是替换掉原来的内容。

//innerHTML 和innerText 这两个属性是可以读写的，可以获取元素里面的内容。

4.2常见元素的属性操作

修改的时候就是元素.属性=值，元素重新给他一个值就修改完成了。

比如：修改元素属性 src

点击刘德华按钮显示刘德华图片点击张学友显示张学友图片

代码如下;

<body><button id="ldh"> 刘德华</button><button id="zxy">张学友</button> <br><img src="image/liu.jpg" alt="#" title="刘德华"><script>//4.2常见元素的属性操作//修改的时候就是元素.属性=值，元素重新给他一个值就修改完成了。//修改元素属性 src//1.获取元素var ldh = document.getElementById('ldh');var zxy = document.getElementById('zxy');var img = document.querySelector('img');//2.注册事件  处理程序ldh.onclick = function () {img.src = 'image/liu.jpg';img.title = '刘德华';}zxy.onclick = function () {img.src = 'image/zhang.png';img.title = '张学友';}</script>
</body>

案例：分时显示不同图片和问候语

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img {width: 200px;height: 160px;margin-bottom: 10px;}</style>
</head><body><img src="./image/上午.jpg" alt="#"><div>上午好</div><script>//根据系统不同时间判断，需要用到日期内置对象//利用分支语句设置不同图片//修改img元素的src属性//需要一个div显示问候语，跟随时间修改元素内容var div = document.querySelector('div');var img = document.querySelector('img');var date = new Date();var h = date.getHours();if (h < 10) {img.src = './image/上午.jpg';div.innerHTML = '上午好~';} else if (h < 13) {img.src = './image/中午好.png';div.innerHTML = '中午好~';} else if (h < 18) {img.src = './image/下午好.png';div.innerHTML = '下午好~';} else if (h < 24) {img.src = './image/晚上好.gif';div.innerHTML = '晚上好~';}// alert(h);//检查是否获取到时间</script>
</body></html>

4.3表单元素的属性操作

利用DOM可以操作如下表单元素的属性 type,value,checked,selected,disabled。

<body><button>按钮</button><input type="text" value='请输入内容' name="" id=""><script>/* 利用DOM可以操作如下表单元素的属性；type,value,checked,selected,disabled *///1.获取元素var btn = document.querySelector('button');var input = document.querySelector('input');//2.注册事件，处理程序btn.onclick = function () {//innerHTML这个用在普通的盒子比如div标签里面的内容//表单里面的值 文字内容是通过value来修改的。 input.value = '改变了';//如果想某个表单禁用，不能被点击  disabled的值设置为true// btn.disabled = true;this.disabled = true;//this指向的是事件函数的调用者}</script>
</body>

分时显示不同图片和问候语

输入框显示隐藏默认文本

淘宝二维码浮窗案例

4.4使用clasName修改样式属性

1.使用element.style行内样式操作，获得修改元素样式，如果样式比较少或者功能比较简单的情况下使用

2.element.clasName 类名样式操作.可以用CSS来修改元素样式。适合样式较多功能复杂的情况。

3.切记，在clasName赋值的样式名称不要点号。

4.class因为是个保留字，因此使用className来操作。

5.className会直接更改元素类名，会覆盖原先的类名。

6.className赋值的多个类名之间中间空格

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用clasName修改样式属性</title><style>div {width: 100px;height: 100px;background-color: pink;}.change {width: 200px;height: 200px;background-color: blue;color: #fff;}</style>
</head><body><div>文本</div><script>//1.使用element.style行内样式操作，获得修改元素样式，如果样式比较少或者功能比较简单的情况下使用//2.element.clasName 类名样式操作.可以用CSS来修改元素样式。适合样式较多功能复杂的情况。var text = document.querySelector('div');text.onclick = function () {this.className = 'change';//千万不要加.点}</script>
</body></html>

更多推荐

DOM学习笔记（坚持~~~~）

本文发布于:2024-02-06 16:03:09，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1749864.html