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

后端Java工程师常用JavaScript_DOM

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