JavaScript快速入门（四）

JavaScript快速入门（四）

---

网页中的交互

• console.log 控制台输出
• alert 网页弹窗
• prompt 弹出输入框
• document.write 在网页上显示内容
• confirm：确认框，返回true或false

获取网页中的元素

是document的方法
- getElementById：通过id获取，返回单个
- getElementsByTagName：通过标签名称获取，返回数组
- getElementsByName：通过name属性的值获取，返回数组

获取和设置元素的属性

是元素的方法
getAttribute('attr')：获取属性值
setAttribute('attr', 'value')：设置属性值

DOM

DOM（Document Object Model）即文档对象模型，在此模型中定义了访问和处理 HTML 文档的标准方法。我们可以将整个 document 页面看作树型结构，每一个元素都视为一个节点，每个节点都有自身属性，可以通过这些属性改变节点的内容和样式。同时，每个节点都有一系列树型结构的属性与方法，如父子、同辈节点的遍历、节点的创建、添加、删除、替换等。

节点的属性及操作

• nodeName：节点名称
• nodeValue：节点值
• nodeType：节点类型
• innerHTML： 属性用于获取或替换元素的内容，标签内的所有元素。
• innerText： 属性用于获取或替换元素的文本内容，只有文本内容，没有其它 HTML 标签。
• className：属性可以设置或返回元素的 class 属性。
• style：控制节点元素的样式，可以改变width,height,color等样式属性值。

var oh = document.getElementById("ih");
oh.style.color = "red";
oh.style.width = "300px";
oh.style.backgroundColor = "#CCC";
oh.style.display = "none";//隐藏
oh.style.display = "block";

节点关系

• childNodes：孩子结点，返回数组
• parentNode：父亲节点
• firstChild：第一个孩子节点
• lastChild：最后一个孩子结点
• previousSiBling：前一个兄弟节点
• nextSiBling：后一个兄弟节点

节点操作

• createElement('tagName')：创建节点。
• createTextNode('text')： 创建文本节点。
• appendChild(o)：在父节点末尾附加子节点 ，其中 o 为节点对象。
• removeChild(oP)：删除节点。
• insertBefore：这个方法的使用主体也是父节点，但他可以指定新节点插入的位置。
• replaceChild：替换节点

事件

鼠标事件

• onclick：点击
• onmouseover：鼠标悬停
• onmouseout：移出
• onmouseup：鼠标按下
• onmousedown：抬起

输入框事件

• onfocus：聚焦
• onblur：失焦
• onselect：选中内容
• onchange：改变内容

事件与方法绑定

nodename.event = funcname