BOM(浏览器相关)

◇navigator对象(了解即可)

navigator.appName          // Web浏览器全称
navigator.appVersion          // Web浏览器厂商和版本的详细字符串
navigator.userAgent          // 客户端绝大部分信息
navigator.platform           // 浏览器运行所在的操作系统

◇screen对象(了解即可)

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

◇history对象(了解即可)

history.forward()          // 前进一页
history.back()             // 后退一页    

◇location对象

location.href        获取当前URL            // 属性
location.href        指定URL,并跳转        // 属性
location.reload()    重新加载当前页面        // 方法

◇弹出框

alert()     警告框
confirm()    确定框
prompt()    提示框

◇计时相关

延迟执行(一次)

设置: var t = setTimeout("JS语句",时间间隔) // 时间间隔以 毫秒 为单位
清除: clearTimeout(t)

// 在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout设置
clearTimeout(timer);

定时执行(重复)

设置: var t = setIntervar("JS语句",时间间隔) // 时间间隔以 毫秒 为单位
清除: clearIntervar()

// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);
JavaScript进阶-BOM和DOMJavaScript进阶-BOM和DOM
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>定时器</title>
  <script>
    var intervalId;

    function f() {
      var timeStr = (new Date()).toLocaleString();
      var inputEle = document.getElementById("i1");
      inputEle.value = timeStr;
    }

    function start() {
      f();
      if (intervalId === undefined) {
        intervalId = setInterval(f, 1000);
      }
    }
    function end() {
      clearInterval(intervalId);
      intervalId = undefined;
    }

  </script>
</head>
<body>

<input type="text" id="i1">
<input type="button" value="开始" id="start" οnclick="start();">
<input type="button" value="结束" id="end" οnclick="end();">
</body>
</html>

定时器示例
定时器示例

DOM(文档相关)

◇dom树

JavaScript进阶-BOM和DOM

DOM标准规定:

  • 文档节点(document对象):  代表整个文档
  • 元素节点(element 对象):    代表一个元素(标签)
  • 文本节点(text对象):       代表元素(标签)中的文本
  • 属性节点(attribute对象):         代表一个属性,元素(标签)才有属性
  • 注释是注释节点(comment对象) 

JS通过DOM创建动态的 HTML:

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

◇查找标签

直接查找

  直接查找是直接在文档节点上查找

document.getElementById("id名")               根据ID获取一个标签
document.getElementsByClassName("类名")       根据class样式获取    
document.getElementsByTagName("标签名")         根据标签名获取标签合集

 

间接查找

  简介查找是在元素节点上查找

objEle = document.getElementById("id1");    // 先找到一个元素节点

objEle.parentElement            父节点标签元素
objEle.children                 所有子标签
objEle.firstElementChild        第一个子标签元素
objEle.lastElementChild         最后一个子标签元素
objEle.nextElementSibling       下一个兄弟标签元素
objEle.previousElementSibling   上一个兄弟标签元素

◇元素节点操作

创建元素节点

语法:
createElement(标签名)

示例:

var divEle = document.createElement("div");

添加元素节点

语法:
1 追加一个子节点(作为内部最后的子节点)
  somenode.appendChild(newnode);

示例

var d2Ele = document.getElementById("id2");        // 父标签
var imgEle = document.createElement("img");        // 新创建的img标签
d2Ele.appendChild(imgEle)                        // 在d2Ele内部的追后添加imgEle

2 把增加的节点放到内部某个节点的前边。
  somenode.insertBefore(newnode,某个节点);

示例

var d2Ele = document.getElementById("id2");        // 父标签
var imgEle = document.createElement("img");        // 新创建的img标签
var d1Ele = document.getElementById("id1");        // 父标签里的子标签
d2Ele.insertBefore(imgEle,d1Ele);                // 在d2Ele内部的d1Ele前面插入imgEle

删除元素节点

语法:
获得要删除的元素,通过父元素调用删除。
removeChild(要删除的节点)

示例

d2Ele = document.getElementById("id2");
d1Ele = document.getElementById("id1");
d2Ele.removeChild(d1Ele);    // 从d2Ele内部把d1Ele删掉

替换元素节点

语法:
somenode.replaceChild(newnode, oldnode);

示例

var d2Ele = document.getElementById("id2");        // 父标签
var imgEle = document.createElement("img");        // 新创建的img标签
var d1Ele = document.getElementById("id1");        // 父标签里的子标签
d2Ele.replaceChild(imgEle,d1Ele);                // 在d2Ele内部用imgEle替换d1Ele 

◇属性节点操作

获取文本节点的值

var divEle = document.getElementById("d1")
divEle.innerText        // 只获取文本
divEle.innerHTML        // 获取标签元素和文本

设置文本节点的值

var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"

属性的attribute操作

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")                // 设置
divEle.getAttribute("age")                    // 获取
divEle.removeAttribute("age")                // 删除

// 自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src="..."

◇获取form表单的值(value)

语法:
  elementNode.value

适用于以下标签:

  • .input
  • .select
  • .textarea

示例

var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

◇CSS样式操作

objEle = document.getElementById("i1");        // 首先要有一个HTML(DOM)对象

objEle.className                      获取所有样式类名(字符串)

objEle.classList.remove(cls)          删除指定类
objEle.classList.add(cls)              添加类
objEle.classList.contains(cls)      存在返回true,否则返回false    // 包含不包含
objEle.classList.toggle(cls)          存在就删除,否则添加    

◇CSS属性操作

objEle = document.getElementById("i1");        // 首先要有一个HTML(DOM)对象
objEle.style.backgroundColor="red"    指定CSS属性 

JS操作CSS属性的规律:
1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如:

objEle.style.margin
objEle.style.width
objEle.style.left
objEle.style.position

2.对含有中横线的CSS属性,将中横线后面的第一个字母换成大写即可。如:

objEle.style.marginTop
objEle.style.borderLeftWidth
objEle.style.zIndex
objEle.style.fontFamily

◇事件

常用事件

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               // 练习:输入框
onblur         元素失去焦点。               应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景:通常用于表单元素,当元素内容被改变时触发.(select联动)

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击,使用的对象是form。

绑定方式

1 在标签里绑定事件

<div id="d1" οnclick="changeColor(this);">点我</div>
<script>
  function changeColor(ths) {
    ths.style.backgroundColor="green";
  }
</script>

2 在JS里绑定事件

<div id="d2">点我</div>
<script>
  var divEle2 = document.getElementById("d2");
  divEle2.onclick=function () {
    this.innerText="呵呵";
  }
</script>

注意:
this是实参,表示触发事件的当前元素。
函数定义过程中的ths为形参。

 

分类:

技术点:

相关文章: