01js学习笔记

一、DOM :

1、HTML DOM 的全称为: HTML Document Object Model, 意思是: 文档对象模型. 我们常说的DOM, 就是HTML DOM. DOM是对HTML文档里所有的一个统称, 一个规范.

HTML DOM 定义了访问和操作 HTML 文档的标准方法。

DOM 将 HTML 文档表达为树结构。

二、DOM 节点

1、根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点

每个 HTML 元素是元素节点

HTML 元素内的文本是文本节点

每个 HTML 属性是属性节点

注释是注释节点 
2、HTML DOM对象一共包含: 
1. DOM Document对象(文档对象) 
2. DOM Element对象(元素对象) 
3. DOM Attribute对象(属性对象) 
4. DOM Event对象(事件对象)

input.value = "1111"; // 这样写是以Attribute对象的方式去设置属性.
input.setAttribute("value", "1111"); // 这样就是用Element对象的方式去设置属性.

 获取元素节点时，一定要注意：获取节点的语句，必须在DOM渲染完成之后执行。

 可以有两种方式实现： 

① 将JS代码写在body之后； ② 将代码写到window.onload函数之中；

 后面三个getElements，取到的是数组格式。不能直接添加各种属性，而应该取出数组的每一个单独操作。 

例如：getElementsByName("name")[0].onclick = function

3、修改DOM节点样式:

             ①使用.style设置单个属性，注意属性名要是用驼峰命名法：
   div.style.backgroundColor = "red";

 

            ②、 使用.style 或 .style.cssText 设置多个样式属性：

div.style = "background-color:red; color:yellow;"
div.style.cssText = "background-color:red; color:yellow;
document.getElementById("p1").innerHTML="New text!";

4、查看设置文本节点
   .innerText: 取到或设置节点 里面文字内容；
   .innerHTML: 取到或设置节点里面的HTML代码；
  .tagName: 取到当前节点的标签名。 标签名全部大写显示。
   

5、根据层次获取节点：
 1  .childNodes： 获取元素的所有子节点。包括回车等文本节点。
    .children:   获取当前元素的所有元素节点(只获取标签)。
 
 2  .firstChild: 获取元素的第一个子节点。包括回车等文本节点。
    .firstElementChild: 获取元素的第一个子节点。不包括回车等文本节点。
   .lastChild: 获取元素的最后一个子节点。包括回车等文本节点。
    .lastElementChild:
 
 3  .parentNode: 获取当前节点的父节点。
 
 4  .previousSibling: 获取当前节点的前一个兄弟节点；包括回车等文本节点。
    .previousEl
a924
ementSibling:
 
 5  .nextSibling: 获取当前节点的后一个兄弟节点；包括回车等文本节点。
    .nextElementSibling: 
 
 6  .getAttributes: 获取当前节点的属性节点。



6.常见事件

1)点击事件:onclick()

2)页面加载事件：onload()和onunload()

3)内容改变事件：change()

4)聚焦事件：onfocus()

5)鼠标事件：onmouseover()、onmouseout()、onmousedown()、onmouseup()