JS初级知识三(基础的DOM和BOM操作)

  ·   JavaScript     浏览量:

基础DOM操作(增删改查)

DOM,Document Object Model,文档对象模型,HTML DOM 定义了访问和操作 HTML 文档的标准方法。
DOM 节点有三个重要的属性 :

  1. nodeName : 节点的名称
  2. nodeValue :节点的值
  3. nodeType :节点的类型

增(创造节点)

```js
ar oP = document.createElement("p");
var oT = document.createTextNode("写入的文本");
oP.appendChild(oT);
document.body.appendChild(oP);
```

查(查找结点)

```js
document.getElementById();//id
document.getElementsByTagName();//标签名;Elements加了S,选出来是类数组;
document.getElementsByName();//name属性,部分标签可以;Elements加了S,选出来是类数组;
document.getElementsByClassName();//class;Elements加了S,选出来是类数组;H5新街口,IE9以下不支持;
parentNode //父级元素,顶级父级元素为document;
childNodes //子节点们
firstChild //第一个子节点
lastChild //最后一个子节点
nextSibling //后一个兄弟节点
previousSiling //前一个兄弟节点
```

删(删除节点)

```js
var oNewP = document.getElementsByTagName("p")[0];
oNewP.parentNode.removeChild(oNewP);
```

改(修改节点)

```js
var oNewP = document.getElementsByTagName("p")[0];
var oNewDiv = document.createElement("div");
oNewDiv.innerHTML = "<p>文字</p>";
oNewP.parentNode.replaceChild(oNewDiv,oNewP);
```

基础BOM操作

BOM,浏览器对象模型(Browser Object Model,简称 BOM),可以对浏览器窗口进行访问和操作

1.window对象:当前浏览器窗体

属性:

  • opener:即谁打开我的,若在A用open打开B则B的opener就是A
  • closed:判断子窗体是否关闭

方法:

  • alert() 弹出框
  • confirm() 带确认,取消弹出框
  • setInterval() 每隔多少秒调用一次
  • clearInterval() 清除setInterval
  • setTimeout() 隔多少秒调用一次
  • cleartimeout() 清除setTimeout
  • open() 打开一个新的窗口window.open("other.html","_blank","width=200,height=300,top=300");
    console:console.log()浏览器控制台打印

2.子对象:doument loation history screen ……

  • doument dom操作
  • loation 跳转位置window.location.href="popl.html";
  • history 历史
    history.back()//返回到前一页 等于history.go(-1) 参数负几就是返回前几步
  • screen //屏幕
    screen.availHeight //屏幕实际高度
    screen.availWidth //屏幕实际宽度
    screen.height //屏幕高度
    screen.width //屏幕宽度 
    1


收起 >>
JS初级知识三(基础的DOM和BOM操作)