[做特效, 学JS] -- 12 加餐-DOM扩展

猫哥的技术博客
562 阅读2分钟

什么是DOM

  • 文档对象模型(document object model)
  • 网页里面的各个元素都是树形结构

js操作网页

  • 找对象

    • document.getElementById() 通过id来找对象
    • document.getElementsByTagName() 通过标签名来找对象, 返回的是一个数组, 即便只有一个元素
    • document.querySelector() 通过css选择器来找对象, 只找第一个
    • document.querySelectorAll() 通过css选择器来找对象, 找到所有对象, 返回"数组"
    • document.getElementsByClassName() 通过类名来找对象, 返回的是一个"数组"

  • 操作对象

    • 改内容, object.innerHTML, object.innerText
    • 改属性, 对象.属性名 = 属性值
    document.getElementById("image").src="landscape.jpg";
    • 改样式, 对象.style.样式名 = 样式值
    • css怎么写, js就怎么写, 但是如果有-, 需要改成驼峰命名
    document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";

    dom事件

    • onclick 鼠标点击触发

    • onmouseover 鼠标移入触发

    • onmouseout 鼠标移出触发

    • 追加的方式

      • 对象.onclick = function(){}

    • onfocus, input框获取焦点时触发

    • 事件监听 addEventListener

    • 以下两行, 效果一样

    document.getElementById("myBtn").addEventListener("click", displayDate);
document.getElementById("myBtn").onclick = displayDate;
    • 还有onmouseover, onmouseout
    element.addEventListener("mouseover", myFunction);
element.addEventListener("mouseout", myThirdFunction);
    • 移除监听事件
    • removeEventListener()
    element.removeEventListener("mousemove", myFunction);

    节点操作

    • appendChild() 追加一个子元素到最后
    • insertBefore(a,b) 把子元素, 插入到某个特定的子元素之前, 把a插到b之前
    • 删除子元素parentNode.removeChild(子元素对象), 需要父元素来调用
    • 替换子元素parentNode.replaceChild(a,b), 用a把b换掉, a和b都是子元素
    var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);

    以上三行, 相当于创建<p>这是一个新的段落。</p>

    • document.createTextNode, 创建一个文本节点
    • 注意一点, document.getElementsByTagName(), 可以用下标来获取值, 但是, 不是一个数组.

    引荐一位前端大神阮一峰

专栏地图

avatar
文章
阅读
粉丝