BOM、DOM预习

最新推荐文章于 2024-07-31 16:33:32 发布

啊哦357

最新推荐文章于 2024-07-31 16:33:32 发布

阅读量97

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_63844356/article/details/125008225

版权

DOM

1. DOM 概念

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言的标准编程接口。

1. DOM 树

在这里插入图片描述
DOM 又称为文档树模型

（1）文档：一个网页可以称为文档，DOM中使用 document 表示

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

（3）元素：网页中的标签，DOM中使用 element 表示

DOM获取页面元素

通过javascript对HTML DOM进行访问。
HTML DOM将html元素定义为对象，API以对象方法和对象属性的形式实现。
可直接调用DOM实现的方法，进行DOM操作，例如：
1、getElementById()
返回带有指定 ID 的元素。
2、getElementsByTagName()
返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
3、getElementsByClassName()
返回包含带有指定类名的所有元素的节点列表。
4、调用 document 对象的 querySelector 方法，通过 css 中的选择器去选取第一个符合条件的标签元素。
5、调用 document 对象的 querySelectorAll 方法，通过 css 中的选择器去选取所有符合条件的标签元素集合（伪数组）
6、获取 body 元素document.body
获取 html 元素document.documentElement

DOM事件

事件

事件组成三要素：
事件源：给谁绑定事件
事件类型：绑定什么类型的事件
事件函数：事件发生后执行什么内容，写在函数内部

常见鼠标事件

onclick → 鼠标左键单击触发
ondbclick → 鼠标左键双击触发
onmousedown → 鼠标按键按下触发
onmouseup → 鼠标按键放开时触发
onmousemove → 鼠标在元素上移动触发
onmouseover → 鼠标移动到元素上触
onmouseout → 鼠标移出元素边界触发
onfocus → 获得鼠标焦点触发
onblur → 失去鼠标焦点触发

操作元素

改变元素内容

1、innerHTML属性，在获取标签内部内容时，如果包含标签，获取的内容会包含标签，获取的内容包括空白换行等。

2、innerText属性，在获取标签内部内容时，如果包含标签，获取的内容会过滤标签，获取的内容会去掉换行和缩进等空白。

属性修改

调用方式：元素对象打点调用属性名，例如 obj.href。
更换图片

<body>
    <input type="button" value="点击" id="btn" /><br />
    <img src="images/a.jpg" id="pic" width="400" height="300" />
    <script>
      var btn = document.getElementById("btn");
      var pic = document.getElementById("pic");
      // 通过一个变量作为判断条件，变量值为 1，认为加载的是 a图片，如果是 2，认为加载的是 b 图片
      var num = 1;
      btn.onclick = function () {
        if (num === 1) {
          pic.src = "images/b.jpg";
          // 数字要对应发生变化
          num = 2;
        } else {
          pic.src = "images/a.jpg";
          num = 1;
        }
      };
    </script>
</body>

隐藏图标

/* CSS 代码 */
* {
  margin: 0;
  padding: 0;
}
div {
  width: 200px;
  height: 200px;
  background-color: pink;
}
.hide {
  display: none;
}
.show {
  display: block;
}

<!-- html 和 JavaScript 代码 -->
<body>
    <input type="button" value="点击隐藏" id="button" />
    <div id="box"></div>
    <script>
      var btn = document.getElementById("button");
      var box = document.getElementById("box");
      btn.onclick = function () {
        // 根据 btn 的 value 值进行条件判断
        // 在事件函数内部有一个 this，指向事件源
        if (this.value === "点击隐藏") {
          box.className = "hide";
          this.value = "点击显示";
        } else {
          box.className = "show";
          this.value = "点击隐藏";
        }
      };
    </script>
</body>

表单修改

<button>按钮</button>
<input type="text" value="请输入">
<script>
	var btn=document.querySelector(‘button’）；
	var input=document.querySelector('input');
	btn.onclick=function(){
		input.value='被点击了';
	}
</script>

其他操作同上

样式属性操作

element.style 属性的值，是所有行内样式组成的一个样式对象
类似 background-color 这种复合属性的单一属性写法，是由多个单词组成的，要修改为驼峰命名方式书backgroundColor。

className 样式属性操作

1、修改元素的 className 属性相当于直接修改标签的类名。
2、如果需要修改多条 css 样式，可以提前将修改后的样式设置到一个类选择器中，后续通过修改类名的方式，批量修改 css 样式

排他思想

若有同一组元素，我们想要某一个元素实现某种样式，其他不需要，则用到循环的排他思想算法

所有元素全部清除样式
给当前元素设置样式
注意顺序不能颠倒，首先 for 循环排除所有，再设置自己

自定义属性

getAttribute(name) → 获取标签行内属性
setAttribute(name，value) → 设置标签行内属性
removeAttribute(name) → 移除标签行内属性

节点

父节点parentNode

var erweima = document.querySelector('.erweima');
console.log(erweima.parentNode);

子节点childNodes

var ul = document.querySelector('ul');
console.log(ul.childNode);

1、parentNode.firstchild获取第一个子元素
2、parentNode.lastchild获取最后一个子元素
3、parentNode.firstElementchild获取第一个子元素
4、parentNode.lastElementchild获取最后一个子元素

兄弟节点

1、node.nextSibling 下一个兄弟关系的节点
2、node.previousSibling 上一个兄弟关系的节点
3、node.nextElementSibling 下一个兄弟关系的元素节点
4、node.previousElementSibling 上一个兄弟关系的元素节点

创建、添加、删除、复制节点

document.createElement(‘标签名’);
node.appendChild(child);
node.insertBefore(child,指定元素);
parent.removeChild(child);
parent.cloneNode();

BOM

window对象

它是JS访问浏览器窗口的一个接口
是全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法

窗口加载事件

window.οnlοad=function(){}或window.addEventListener(‘load’,function(){})
1.有了window.onload 就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数。
2.weindow.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准。
3.DOMContentLoaded 事件触发时,仅当DOM加载完成，不包括样式表，图片，flash等。IE9以上才支持。

调整窗口大小事件

window.οnresize=function(){}
window.addEventListener(‘resize’,function(){})
1.只要窗口大小发生像素变化,就会触发这个事件。
2我们经常利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度。

定时器

setTimeout()

window在调用时可以省略
这个调用函数可以直接写函数，还可以写函数名，还可以写’函数名()’
页面中可能有很多的定时器，我们可以给定时器加标识符

停止setTimeout()定时器

clearTimeout() 方法停止执行 setTimeout() 中规定的函数。

setInterval()

可以反复调用
window.setInterval(调用函数，延时时间)；

停止setInterval()定时器

window.clearInterval();

location 对象

		location.assign('');//可跳转页面
        location.replace('');//替换当前页面，但不记录历史，不可后退location对象属性		返回值
location.href			获取或设置整个URL
location.host			返回主机名（域名）www.baidu.com
location.port			返回端口号 如果未写返回 空字符串
location.pathname	返回路径
location.search		返回参数
location.hash			返回片段 #后面的内容 常见于链接锚点

navigator 对象

if(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPad|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|webOS|Symbin|windows Phone)/i)){
	window.location.href='';//手机
}else{
	window.location.href='';//电脑
}

history对象

history对象方法作用
back() 可以后退功能
forward() 前进功能
go(参数) 前进后退功能参数如果是1前进一个页面如
果是-1后退1个页面

啊哦357

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BOM、DOM预习

这里写目录标题DOM1. DOM 概念1. DOM 树DOM获取页面元素DOM事件事件常见鼠标事件操作元素改变元素内容属性修改表单修改样式属性操作className 样式属性操作排他思想自定义属性节点父节点parentNode子节点childNodes兄弟节点创建、添加、删除、复制节点BOMwindow对象窗口加载事件调整窗口大小事件定时器setTimeout()停止setTimeout()定时器setInterval()停止setInterval()定时器location 对象navigator 对象hi
复制链接

扫一扫