首页 > 代码库 > 后端Java工程师常用JavaScript_DOM

后端Java工程师常用JavaScript_DOM

2024-08-29 08:05:48   216人阅读

JavaScript

　　[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


联系
我们