JavaScript——BOM、DOM、事件

其他 2020-01-24 10:31:35 阅读次数: 0

JavaScript高级

目录

BOM

跳转到目录

  • BOM: broswer object model 浏览器对象模型
Navigator 浏览器对象

Navigator 对象获取一些浏览器的信息.

Screen 屏幕对象

Screen 对象包含有关客户端显示屏幕的信息。

Location 地址栏对象

Location 对象包含有关当前 URL 的信息。

  • 创建(获取)
  1. window.location
  2. location
  • 方法
    reload(): 重新加载当前文档,刷新操作.
  • 属性
    href: 设置或返回完整的url.
  • Demo
    <body>
<input id="btn" type="button" value="跳转">

<script type="text/javascript">

	// 获取input标签
	var btn = document.getElementById("btn");
	// 设置事件
	btn.onclick = function (){
		location.href = "https://www.baidu.com";
	}

</script>

</body>
  • 相关文档 https://www.w3school.com.cn/jsref/dom_obj_location.asp
History 对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。

  • 创建(获取)
  1. window.history
  2. history
  • 方法
    back() 加载 history 列表中的前一个 URL。
    forward() 加载 history 列表中的下一个 URL。
    go(参数) 加载 history 列表中的某个具体页面。

    参数：
    正数：前进几个历史记录
    负数：后退几个历史记录

  • 属性
    length: 返回当前窗口历史列表中的url数量.
Window 窗口对象

跳转到目录
Window 对象表示浏览器中打开的窗口。

  • 方法
  1. 与弹出框有关的方法
    alert(): 显示带有一段消息和一个确认按钮的警告框.
    confirm(): 显示带有一段消息,以及确认和取消两个按钮的对话框. 若点击确定,该方法返回true, 点击取消,返回false.
    prompt(): 显示可提示用户输入的对话框. 返回值为用户输入的内容.
  2. 与打开关闭有关的方法
    close():关闭浏览器窗口. 谁调用的,就关闭哪个窗口
    open(arg1, arg2, arg3, arg4): 打开一个新的浏览器窗口.
    注意: 这4个参数都是可选的, arg1 传入url, arg3传入窗口的特征(设置宽高等)
    window.open("https://www.baidu.com","","width=100,height=100");
  3. 与定时器有关的方法
    setTimeout(code,millisec): 在指定的毫秒数后调用函数或计算表达式。
    clearTimeout(id_of_settimeout): 取消由 setTimeout() 方法设置的 timeout。传入某个定时器的id用来取消指定的定时器.
    setInterval(code,millisec): 按照指定的周期（以毫秒计）来调用函数或计算表达式。
    clearInterval(id_of_settimeout): 取消由 setInterval() 设置的 timeout。
  • 属性
  1. 获取其他BOM对象
    History
    location
    Navigator
    Screen
  2. 获取DOM对象
    document
  • 特点

    Window对象不需要创建可以直接使用, window.方法名()
    window引用可以省略. 方法名();

DOM

跳转到目录

  • DOM: Document Object Model 文档对象模型

    • 文档: 超文本文档(超文本标记文档) html, xml
    • 对象: 提供了属性和方法.
    • 模型: 使用属性和方法操作超文本标记文档
    • 可以使用js里面的dom里面提供的对象,使用这些对象的属性和方法,对标记型文档进行操作.
    • dom里面已经将html里面的标签,属性,文本内容都封装成了对象.

  • dom解析html文档的过程
    在这里插入图片描述
    根据html的层级结构,在内存中分配一个树形结构, 需要把html中的每部分封装为对象.

    • Document对象: 整个文档
    • Element对象: 标签对象
    • Attribute对象: 首先要获取标签对象
    • Text对象: 首先要获取标签对象
    • Comment对象: 注释对象
    • Node节点对象: 这个对象是上面这些对象的父对象, 如果在对象内找不到想要的方法, 此时可以在Node节点对象中去查找想要的方法.
Document 文档对象

跳转到目录

  • 创建(获取): 在html dom模型中可以使用window对象来获取
    • window.document
    • document
  • 方法
    write() 向页面输出变量/html代码
    document.write("abc");
document.write("<hr>");

    • 获取Element对象
      getElementById() ： 根据id属性值获取元素对象,id属性值一般唯一
      getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
      getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
      getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组

    • 创建其他的DOM对象
      createAttribute(name)
      createComment()
      createElement()
      createTextNode()

Element 元素对象(标签对象)

跳转到目录

  • 创建(获取): 通过document来获取和创建
  • 方法(首先通过document来获取元素,然后通过元素进行操作)
    getAttribute(attributename): 获取指定的属性
    setAttribute(attributename,attributevalue): 给元素添加属性
    removeAttribute(attributename): 移除指定名称的属性
    注意: 不能删除value
  • 获取标签下面的子标签
    childNodes: 这个属性兼容性很差
    getElementsByTagName(标签名): 兼容性好,获取标签下面子标签的唯一有效方法.
Node 节点对象

  • 特点
    所有dom对象都可以被认为是一个节点.

  • 属性
    nodeName:获取节点的名称
    nodeType: 获取节点的类型
    nodeValue: 获取节点的value值
    因为dom在解析html的时候, html里面的标签,属性,文本都是一个节点,所以上面的三个属性对其都是不同的值.

    • 标签节点对应的nodeType为1
    • 属性节点对应的nodeType为2
    • 文本节点对应的nodeType为3

    parentNode: 获取父节点的属性
    childNodes: 得到所有子节点,兼容性差
    firstChild: 获取第一个子节点
    lastChild: 获取最后一个子节点
    nextSibling: 返回一个给定节点的下一个兄弟节点
    previousSibling: 返回一个给定节点的上一个兄弟节点

    <body>
<ul id = "ulid">
	<li id = li1>aaaaaa</li>
	<li id = li2>bbbbbb</li>
	<li id = li3>cccccc</li>
	<li id = li4>dddddd</li>
</ul>
<script>
	// 获取li的父节点
	var li1 = document.getElementById("li1");
	var ul1 = li1.nextSibling;
	alert(ul1.id);
	// 获取ul的第一个子节点
	var ul1 = document.getElementById("ulid");
	var li1 = ul1.lastChild;
	alert(li1.id);
	// 获取li2的上一个节点和下一个节点
	var li2 = document.getElementById("li2");
	var li1 = li2.previousSibling;
	var li3 = li2.nextSibling;
	alert(li1.id);
	alert(li3.id);
</script>
</body>
CRUD_DOM树

跳转到目录

  • 查找节点
    getElementById():通过节点的id属性,查找指定节点.

  • 添加节点
    appendChild()：向节点的子节点列表的结尾添加新的子节点。

  • 插入节点
    insertBefore(newNode, oldNode): 向oldNode节点前插入一个新节点.通过父节点添加

  • 删除节点
    removeChild()：删除（并返回）当前节点的指定子节点。

  • 替换节点
    replaceChild()：用新节点替换一个子节点。通过父节点替换

  • 复制节点
    cloneNode(true): 复制节点

  • innerHTML属性
    作用:

    1. 获取文本内容
    2. 向标签里面设置内容(可以是html代码)

  • Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div#div1 {
            width: 360px;
            height: 150px;
            border: 2px solid red;
        }

        div#div2 {
            width: 360px;
            height: 150px;
            border: 2px solid black;
        }
    </style>
</head>
<body>

<div id="div1">
    <ul id="ul1">
        <li id="li1">one</li>
        <li id="li2">two</li>
        <li id="li3">three</li>
        <li id="li4">four</li>
    </ul>
</div>
<div id="div2"></div>

<input id="input1" type="button" value="添加节点">
<input id="input2" type="button" value="插入节点">
<input id="input3" type="button" value="删除节点">
<input id="input4" type="button" value="替换节点">
<input id="input5" type="button" value="复制节点">

<script type="text/javascript">

    // 添加节点
    /*
    1.获取到ul
    2.获取到div2
    3.把ul添加到div2
    */
    var input1 = document.getElementById("input1");
    input1.onclick = function () {
        var ul = document.getElementById("ul1");
        var div = document.getElementById("div2");
        div.appendChild(ul);
    }

    // 插入节点
    /*
    1.获取到li3标签
    2.创建li
    3.创建文本
    4.把文本添加到li下面
    5.获取到ul
    6.把li添加到ul下面
    */
    var input2 = document.getElementById("input2");
    input2.onclick = function () {
        var li3 = document.getElementById("li3");
        var li = document.createElement("li");
        var text = document.createTextNode("朝阳红");
        li.appendChild(text);
        var ul = document.getElementById("ul1");
        ul.insertBefore(li, li3);
    }

    // 删除节点
    /*
    1.获取到li标签
    2.执行父节点ul标签
    3.执行删除
    */
    var input3 = document.getElementById("input3");
    input3.onclick = function () {
        var li3 = document.getElementById("li3");
        var ul = document.getElementById("ul1");
        ul.removeChild(li3);
    }
    
    // 替换节点
    /*
    1.获取到li标签
    2.创建标签li
    3.创建文本
    4.把文本添加到li下面
    5.获取父节点Ul标签
    6.执行替换
    */
    var input4 = document.getElementById("input4");
    input4.onclick = function () {
        var li3 = document.getElementById("li3");
        var li = document.createElement("li");
        var text = document.createTextNode("HelloWorld");
        li.appendChild(text);
        var ul = document.getElementById("ul1");
        ul.replaceChild(li, li3);
    }

    // 复制节点(把ul列表复制到另一个div中)
    /*
    1.获取到ul
    2.执行复制方法：cloneNode(true)
    3.把复制后的内容放到div2中
        获取div2
        appendChild方法
    */
    var input5 = document.getElementById("input5");
    input5.onclick = function () {
        var ul = document.getElementById("ul1");
        var ulClone = ul.cloneNode(true);
        var div = document.getElementById("div2");
        div.appendChild(ulClone);
    }
</script>
</body>
</html>
控制样式
  • 通过DOM来控制标签的样式
  • 使用style属性来设置
  • 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .sun {
            font-weight: bold;
            font-size: 30px;
            color: skyblue;
            border: 2px dashed #000;
        }
    </style>

</head>
<body>

<div class="zy">桂朝阳</div>
<div class="sun">大太阳</div>


<script type="text/javascript">

    // 获取类名为zy的标签
    var zy = window.document.getElementsByClassName("zy")[0];
    // alert(zy.className);

    // 方式一(自己添加)给类名为zy的div添加样式
    // zy.style.border = "1px solid #ccc";
    // zy.style.fontSize = "20px";

    // 方式二(调用已经写好的)
    zy.className = "sun";
    
</script>
</body>

事件

跳转到目录

事件监听机制
  • 概念: 某些组件被执行了某些操作后，触发某些代码的执行。
    • 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了
    • 事件源：组件。如： 按钮 文本输入框…
    • 监听器：代码。
    • 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。
常见的事件

  • 点击事件：
    onclick：单击事件
    ondblclick：双击事件

  • 焦点事件
    onblur：失去焦点
    * 一般用于表单验证
    onfocus:元素获得焦点。

  • 加载事件：
    onload：一张页面或一幅图像完成加载。

  • 鼠标事件：
    onmousedown 鼠标按钮被按下。
    * 定义方法时，定义一个形参，接受event对象。
    * event对象的button属性可以获取鼠标按钮键被点击了。
    onmouseup 鼠标按键被松开。
    onmousemove 鼠标被移动。
    onmouseover 鼠标移到某元素之上。
    onmouseout 鼠标从某元素移开。

  • 键盘事件：
    onkeydown 某个键盘按键被按下。
    onkeyup 某个键盘按键被松开。
    onkeypress 某个键盘按键被按下并松开。

  • 选择和改变
    onchange 域的内容被改变。
    onselect 文本被选中。

  • 表单事件：
    onsubmit 确认按钮被点击。
    * 可以阻止表单的提交
    * 方法返回false则表单被阻止提交。
    onreset 重置按钮被点击。

White Camel
发布了149 篇原创文章 · 获赞 68 · 访问量 12万+
私信 关注

猜你喜欢

转载自blog.csdn.net/m0_37989980/article/details/103669620
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
周排行
Metasploit文件目录与入侵基本概念
跨域(CORS)请求问题[No 'Access-Control-Allow-Origin' header is present on the requested resource]常见解决方案
CodeIgniter 源码解读之 CodeIgniter.php（二）
SAS入门之（四）改变数据类型
初识元组
[数学建模]数学建模算法和模型（B站视频）（二）
Nginx 服务器源码安装配置流程
C#实现语音视频录制 【基于MCapture + MFile】
开发进度4
下载安装vue的方法网址
每日归档
更多
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022