JS--DOM(文档对象模型)-低调大师

JS--DOM(文档对象模型)

2018-04-23 716

含义

DOM（文档对象模型）是针对 HTML 和 XML 文档的一个 API，通过 DOM 可以去改变文档。
简单的说，一个 web 网页就是一个文档，使用 DOM 改变文档就是使用 DOM 定义的一些方法操作具体的节点。比如用getElementById 来根据元素 id 来查找元素节点。
当浏览器载入HTML时，会生成相应的 DOM 树，大概长这样

image.png

转化为代码就是如下：

<html>
<head>
    <title>我是title</title>
</head>
<body>
    <a herf="">我是超链接</a>
    <p id="test">我是p标签</p>
</body>
</html>

对DOM的定义

对于一个 HTML 来说，文档节点 Document （是看不到的）就是它的根节点，这个根节点对应的对象就是 document ，我们可以通过根节点来访问它的子节点(Element 、Text)。

Document 类型

刚才说到 Document 是整个文档的根节点，我们想要访问某个节点的时候都必须通过 document 这个实例对象。

document 对象的常用属性：

document.documentElement   //可以直接拿到html的节点的引用
document.title                          //直接获取title节点的文本 即 我是title
document.url                           //获取url

doucument常用方法

2018-04-24 10-26-44屏幕截图.png

document.getElementById()      //docment.getElementById('test') 可以获取到属性 id 为 ‘myId’ 的节点，在上面的代码中获取的也就是 p 节点
document.getElementsByTagName //docment.getElementByTagName('p') 可以获取到节点为 p 的所有节点集
document.documentElement       // 全部文档
document.body                             //文档的主体

以上的方法就使我们根据 document 对象中的方法获取到 HTML 中任意节点了

Element 类型

通常我们在使用 document 对象来获取节点时，返回的节点类型就是 Element 类型，所以我们想要对获取的节点进行操作，我们只需要使用 Element 包含的属性和方法即可。

常用的属性

var myNode = document.getElementById('myId');
myNode.id // 获取该节点的 id ，即 ‘myId‘
myNode.tagName // 获取该节点的节点名，即 'P'，大部分浏览器返回的标签名都是大写
myNode.className //获取该节点的 class

操作节点属性的常用方法

//假如我们有一个 input，我们想要获取 input 的 type 属性，并对 type 属性进行操作
<input type='text' id='input'/>
  
var myNode = document.getElementById('input')
myNode.getAttribute('type') // 获取属性值，即 ‘text’
myNode.setAttribute('type','password') // 将 type 属性值改为 password 类型
myNode.removeAttribute('type') // 移除 type 属性

实例

对事件做出反应

要求：
当事件发生时，可以执行 JavaScript，比如当用户点击一个 HTML 元素时。
如需在用户点击某个元素时执行代码，请把 JavaScript 代码添加到 HTML 事件属性中：
onclick=JavaScript

html事件的例子

当用户点击鼠标时
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户触发按键时

<!DOCTYPE html>
<html>
<body>
    <h1 onclick="this.innerHTML='hello!'">请点击这段文本!</h1>
</body>
</html>
// **相当于点击按钮时给h1进行赋值**

从事件处理程序中调用函数：

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="hello!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">请点击这段文本!</h1>
</body>
</html>

HTML 事件属性

如需向 HTML 元素分配事件，您可以使用事件属性。
向 button 元素分配一个 onclick 事件：

<!DOCTYPE html>
<html>
<body>

    <p>点击按钮来执行 <b>displayDate()</b> 函数。</p>

    <button onclick="displayDate()">试一试</button>

<script>
      function displayDate()
      {
           document.getElementById("demo").innerHTML=Date();
      }
</script>

    <p id="demo"></p>

</body>
</html>

使用 HTML DOM 来分配事件

HTML DOM 允许您使用 JavaScript 向 HTML 元素分配事件：
为 button 元素分配 onclick 事件：

<!DOCTYPE html>
<html>
<dody>
  <p>点击按钮来执行<b>displayDate()</b></p>
  <button id="myBtn">点击试一试</button>
<script>
    document.getElementById("myBtn").onclik = function(){displayDate()}
    function displayDate(){
        document.getElementById('demo').innerHTML = Date();
    }
</script>
    <p id=""demo></p>
</body>
</html>

在上面的例子中，名为 displayDate 的函数被分配给了 id=myButn" 的 HTML 元素。
当按钮被点击时，将执行函数。

onload 和 onunload 事件

当用户进入或离开页面时，会触发 onload 和 onunload 事件。
onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。
onload 和 onunload 事件可用于处理 cookies。

<!DOCTYPE html>
<html>
<body onload="checkCookies()">

<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
    {
    alert("Cookies are enabled")
    }
else
    {
    alert("Cookies are not enabled")
    }
}
</script>

<p>弹出的提示框会告诉你浏览器是否已启用 cookie。</p>
</body>
</html>

onchange 事件

onchange 事件常用于输入字段的验证。
下面的例子展示了如何使用 onchange。当用户改变输入字段的内容时，将调用 upperCase() 函数。

<!DOCTYPE html>
<html>
<head>
<script>
  function myFunction(){
    var x = document.getElementById("fname");
    x.value = x.value.toUpperCase();
  }
</script>
</head>
<body>

请输入你的英文名：<input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框时，被触发的函数会把你输入的文本转换为大写字母。</p>

</body>
</html>

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数

<!DOCTYPE html>
<html>
<body>

<div 
onmouseover="mOver(this)" 
onmouseout="mOut(this)" 
style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
Mouse Over Me
</div>

<script>
function mOver(obj)
{
obj.innerHTML="谢谢你"
}

function mOut(obj)
{
obj.innerHTML="把鼠标指针移动到上面"
}
</script>

</body>
</html>

onmousedown、onmouseup 以及 onclick 事件

onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时，触发 onmousedown 事件，然后，当鼠标按钮被松开时，会触发 onmouseup 事件，最后，当鼠标点击完成时，触发 onclick 事件。

<!DOCTYPE html>
<html>
<body>

<div 
onmousedown="mDown(this)" 
onmouseup="mUp(this)" 
style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
点击这里
</div>

<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="松开鼠标"
}

function mUp(obj)
{
obj.style.backgroundColor="#D94A38";
obj.innerHTML="谢谢你"
}
</script>

</body>
</html>

微信关注我们

原文链接：https://yq.aliyun.com/articles/665889

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

有这5小段代码在手，轻松实现数据可视化（Python+Matplotlib）

数据可视化是数据科学家工作的一项主要任务。在项目早期阶段，通常会进行探索性数据分析（EDA）以获取对数据的理解和洞察，尤其对于大型高维的数据集，数据可视化着实有助于使数据关系更清晰易懂。同时在项目结束时，以清晰、简洁和引人注目的方式展示最终结果也是非常重要的，因为受众往往是非技术性客户，只有这样，他们才更容易去理解。 Matplotlib是个很流行的Python库，可以轻松实现数据可视化。但是，每次执行新项目的绘图时，设置数据、参数、图形的过程都非常的繁琐。在本文中，我们将着眼于5种数据可视化方法，用Python的Matplotlib库实现一些快速而简单的功能。首先，请大家看看这张大的地图，它能指引你根据不同情况，选择正确的可视化方法：根据情况选择适当的数据可视化技术散点图散点图非常适合展现两个变量间关系，因为，图中可以直接看出数

2018-04-23

666

Python当然能让你上天！没试过？别担心，我来教你。和Python里的其他东西一样，它非常简单。你只需要敲入下面这行反重力代码 import antigravity 这是啥？这是个彩蛋。import antigravity将打开一个指向经典XKCD漫画的网页(source:https://xkcd.com/353/)，里面提到了Python。你知道吗，开发者并没有止步于此，彩蛋里还有一个彩蛋。如果你查看代码(source:https://github.com/python/cpython/blob/master/Lib/antigravity.py#L7-L17)，你会看到一个函数定义用来实现XKCD’s的geohashing算法(source:https://xkcd.com/426/)。还有类似的彩蛋吗？当然！我在网上找到了更多

2018-04-23

676

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。