JavaScript快速入门（四）

时间：2022-08-27 12:58:20

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
标签：

相关文章