webgl学习笔记3_javascript的HTML DOM

简介: webgl学习笔记3_javascript的HTML DOM

HTML DOM 方法

  1. HTML DOM 方法是您能够(在 HTML 元素上)执行的动作。
  2. HTML DOM 属性是您能够设置或改变的 HTML 元素的值。

HTML DOM 能够通过 JavaScript 进行访问(也可以通过其他编程语言)。

在 DOM 中,所有 HTML 元素都被定义为对象。

编程界面是每个对象的属性和方法。

属性是您能够获取或设置的值(就比如改变 HTML 元素的内容)。

方法是您能够完成的动作(比如添加或删除 HTML 元素)。

<html>
<body>
//改变p元素内容
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>

getElementById方法

  • 访问 HTML 元素最常用的方法是使用元素的 id

innerHTML属性

  • 用于获取或替换 HTML 元素的内容

HTML DOM Document 对象

查找 HTML 元素

方法 描述
document.getElementById(id) 通过元素 id 来查找元素
document.getElementsByTagName(name) 通过标签名来查找元素
document.getElementsByClassName(name) 通过类名来查找元素

改变 HTML 元素

方法 描述
element.innerHTML = new html content 改变元素的 inner HTML
element.attribute = new value 改变 HTML 元素的属性值
element.setAttribute(attribute, value) 改变 HTML 元素的属性值
element.style.property = new style 改变 HTML 元素的样式

添加和删除元素

方法 描述
document.createElement(element) 创建 HTML 元素
document.removeChild(element) 删除 HTML 元素
document.appendChild(element) 添加 HTML 元素
document.replaceChild(element) 替换 HTML 元素
document.write(text) 写入 HTML 输出流

添加事件处理程序

方法 描述
document.getElementById(id).onclick = function(){code} 向 onclick 事件添加事件处理程序

查找 HTML 对象

属性 描述 DOM
document.anchors 返回拥有 name 属性的所有 <a> 元素 1
document.applets 返回所有 <applet> 元素(HTML5 不建议使用) 1
document.baseURI 返回文档的绝对基准 URI 3
document.body 返回 <body> 元素 1
document.cookie 返回文档的 cookie 1
document.doctype 返回文档的 doctype 3
document.documentElement 返回 <html> 元素 3
document.documentMode 返回浏览器使用的模式 3
document.documentURI 返回文档的 URI 3
document.domain 返回文档服务器的域名 1
document.domConfig 废弃。返回 DOM 配置 3
document.embeds 返回所有 <embed> 元素 3
document.forms 返回所有 <form> 元素 1
document.head 返回 <head> 元素 3
document.images 返回所有 <img> 元素 1
document.implementation 返回 DOM 实现 3
document.inputEncoding 返回文档的编码(字符集) 3
document.lastModified 返回文档更新的日期和时间 3
document.links 返回拥有 href 属性的所有 <area><a> 元素 1
document.readyState 返回文档的(加载)状态 3
document.referrer 返回引用的 URI(链接文档) 1
document.scripts 返回所有 <script> 元素 3
document.strictErrorChecking 返回是否强制执行错误检查 3
document.title 返回 <title> 元素 1
document.URL 返回文档的完整 URL 1

JavaScript HTML DOM 动画

JavaScript 动画是通过对元素样式进行渐进式变化编程完成的

案例

<!DOCTYPE html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
</style>
<body>
<p><button onclick="myMove()">单击我</button></p> 
<div id ="container">
  <div id ="animate"></div>
</div>
<script>
function myMove() {
  var elem = document.getElementById("animate");   
  var pos = 0;
  var id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++; //线性匀速沿对角线移动,先运动水平方向与垂直方向(力的分解)
      elem.style.top = pos + "px"; //水平方向
      elem.style.left = pos + "px"; //垂直方向
    }
  }
}
</script>
</body>
</html>

JavaScript HTML DOM 事件

button 元素分配 onclick 事件

onload 和 onunload 事件

当用户进入后及离开页面时,会触发 onload 和 onunload 事件。

onload 和 onunload 事件可用于处理 cookie。

onchange 事件

onchange 事件经常与输入字段验证结合使用

<!DOCTYPE html>
<html>
<head>
<script>
//当用户改变输入字段内容时,会调用 upperCase() 函数
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 事件可用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数

onmousedown, onmouseup 以及 onclick 事件构成了完整的鼠标点击事件

  1. 当鼠标按钮被点击时,onmousedown 事件被触发;
  2. 当鼠标按钮被释放时,onmouseup 事件被触发;
  3. 当鼠标点击完成后,onclick 事件被触发。
<!DOCTYPE html>
<html>
<body>
<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
点击鼠标</div>
<script>
function mDown(obj) {
  obj.style.backgroundColor = "#1ec5e5";
  obj.innerHTML = "松开鼠标";
}
function mUp(obj) {
  obj.style.backgroundColor="#D94A38";
  obj.innerHTML="谢谢您";
}
</script>
</body>
</html>

JavaScript HTML DOM 事件监听器

  • addEventListener() 方法为指定元素指定事件处理程序。
  • addEventListener() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。
  • 您能够通过使用 removeEventListener() 方法轻松地删除事件监听器。
    语法
element.addEventListener(event, function, useCapture);
//第一个参数是事件的类型(比如 "click" 或 "mousedown")。
//第二个参数是当事件发生时我们需要调用的函数。
//第三个参数是布尔值,指定使用事件冒泡还是事件捕获。此参数是可选的。
element.removeEventListener("mousemove", myFunction);
//删除已通过 addEventListener() 方法附加的事件处理程序

案例:

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
  background-color: coral;
  border: 1px solid;
  padding: 50px;
  color: white;
  font-size: 20px;
}
</style>
</head>
<body>
<h1>JavaScript removeEventListener()</h1>
<div id="myDIV">
  <p>这个 div 元素有一个 onmousemove 事件处理程序,每次在这个橙色字段中移动鼠标时都会显示一个随机数。</p>
  <p>单击按钮以删除 div 的事件处理程序。</p>
  <button onclick="removeHandler()" id="myBtn">删除</button>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
  document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>
</body>
</html>

饮水思源,点击去W3school

目录
相关文章
|
1月前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
3天前
|
JavaScript 前端开发 安全
【JavaScript 】DOM操作快速入门
【JavaScript 】DOM操作快速入门
6 2
|
4天前
|
JavaScript 前端开发 UED
JavaScript基础-DOM操作:查找、创建、修改
【6月更文挑战第12天】本文介绍了DOM基础,包括查找元素(getElementById、getElementsByClassName等)、创建新节点(createElement、createTextNode)和修改节点(innerText、innerHTML、setAttribute等)。强调了易错点,如ID唯一性、性能考量和安全问题,并提供了代码示例。熟练掌握DOM操作对前端开发至关重要,但应注意性能优化,适时使用框架或库。
JavaScript基础-DOM操作:查找、创建、修改
|
18天前
|
XML JavaScript 前端开发
web学习笔记(二十二)DOM开始
web学习笔记(二十二)DOM开始
12 0
|
23天前
|
XML JavaScript 前端开发
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
16 2
|
23天前
|
JavaScript Java
JavaSE精选-JS&DOM
JavaSE精选-JS&DOM
20 1
|
24天前
|
JavaScript Java
JS&DOM技术文章
JS&DOM技术文章
|
24天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
28 1
|
24天前
|
JavaScript 前端开发 开发者
HTML DOM
【5月更文挑战第23天】HTML DOM
18 1
|
1月前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
20 2