后端Java工程师常用JavaScript_DOM
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了后端Java工程师常用JavaScript_DOM相关的知识，希望对你有一定的参考价值。
[1]事件
①用户操作网页或者浏览器所发生的交互行为称为事件。比如：点击按钮，最小化窗口，修改文本框内容等。
②JS为我们定义许多浏览器中的事件。比如：单击(onclick)、双击(ondblclick)、移动(onmousemove) 等。
③我们可以通过为事件设置一个响应函数来对事件进行响应：
1 <body> 2 <button id="btn">按钮</button> 3 </body> 4 5 <script type="text/javascript"> 6 //获取到按钮的对象 7 var btn = document.getElementById("btn"); 8 //为btn绑定一个单击响应函数 9 btn.onclick = function(){ 10 alert("hello World!"); 11 }; 12 </script> 13
[2]加载方式
①浏览器加载网页代码时是由上到下依次加载的。
②如果我们在浏览器还尚未加载网页中的元素，那么将无法确定，控制台将会报错，解决该问题有两种方式：
1) 将JS代码编写到body标签的下边。但是我们习惯上将JS、CSS等代码都写在head标签中。这种形式不符合使用习惯。
2) 将js代码编写到window.onload = function(){}中。推荐的使用方式。（ps:在编写js代码的时候最好开始的时候就将window.onload = function(){}写上）。
[3]DOM编程
DOM全称：Document Object Model。
DOM主要是通过JavaScript来控制网页中的各种元素，从而达到使网页可以和用户进行动态交互的作用。
DOM的操作主要分四部分增、删、改、查。
节点类型：
- 元素节点
- 文本节点
- 属性节点
①DOM查询
1) 通过document对象查询：
document.getElementById(id); ---> 通过id获取一个元素节点对象.
document.getElementsByTagName(标签名); ---> 通过标签名获取一组元素节点对象.
document.getElementsByName(name属性); --->通过name属性获取一组元素节点对象，一般用来获取表单项.
2) 通过具体的元素对象查询:
element.getElementsByTagName(标签名); --->查找当前元素节点内指定标签名的子节点
element.childNodes; --->获取当前节点的所有子节点.
element.parentNode; --->获取当前节点的父节点.
3) 获取元素的属性:
获取 : 元素.属性名
设置 ： 元素.属性名 = 属性值;
4)this:
this指向的是当前函数的所属对象。
DOM的增删改：
1) 创建元素节点：document.createElement(标签名);
2) 创建文本节点: document.createTextNode(文本值);
3) 添加子节点: 父节点.appendChild(子节点);
4) 插入节点: 父节点.insertBefore(新节点,旧节点);
5) 替换节点: 父节点.replaceChild(新节点,旧节点);
6) 删除节点: 父节点.removeChild(子节点); / 子节点.parentNode.removeChild(子节点) *****
7) 读写元素内部html代码
读取: 元素.innerHTML
设置: 元素.innerHTML = 新值
以上是关于后端Java工程师常用JavaScript_DOM的主要内容，如果未能解决你的问题，请参考以下文章