javaScript

javaScript之bom篇

bom：broswer object model: 浏览器对象模型

• 有哪些对象？
  navigator： 获取客户机的信息（浏览器的信息）
  navigator.appName
• screen: 获取屏幕的信息
  document.write(screen.width);
  document.write(screen.height);

• location: 请求url地址
  document.write(location.href);
• 设置url地址
  页面上安置一个按钮，按钮上绑定一个事件，当我点击这个按钮，页面可以跳转到另外一个页面
  location.href = “hello.html”
• history：请求的url的历史记录

• 到访问的上一个页面
  history.back();
  history.go(-1);
• 到访问的下一个页面
  history.forward();
  history.go(1);

• window
  顶层对象（所用的bom对象都是在window里面操作的）
  方法
  window.alert() : 页面弹出一个框，显示内容
  confirm()： 确认框 :var flag = window.confirm(“显示的内容”);
  prompt()： 输入的对话框
  // window.prompt(“在显示的内容”,“输入框里面的默认值”);
  open() :　打开一个新的窗口
  // open(“打开的新窗口的地址url”,"",“窗口特征，比如窗口宽度和高度”)
  close(): 关闭窗口(浏览器兼容性比较差)//window.close();
• 做定时器

• setInterval(“js代码”,毫秒数) 1秒=1000毫秒
  //window.setInterval(“alert(‘123’);”,3000);
• setTimeout(“js代码”,毫秒数)
  - 表示在毫秒数之后执行，但是只会执行一次
  //window.setTimeout(“alert(‘abc’);”,4000);
• clearInterval(): 清除setInterval设置的定时器
  var id1 = setInterval(“alert(‘123’);”,3000);
  //通过setInterval会有一个返回值 //clearInterval(id1);
• clearTimeout() : 清除setTimeout设置的定时器
  // clearTimeout(id2);

javaScript之dom篇

dom：document object model: 文档对象模型

可以使用js里面的dom里面提供的对象，使用这些对象的属性和方法，对标记型文档进行操作

• 解析过程
  根据html的层级结构，在内存中分配一个树形结构，需要把html中的每部分封装成对象，
• document对象：整个文档
• element对象：标签对象
• 属性对象
• 文本对象
• Node节点对象：这个对象是这些对象的父对象
  如果在对象里面找不到想要的方法，这个时候到Node对象里面去找

• DHTML：是很多技术的简称

• html: 封装数据
• css：使用属性和属性值设置样式
• dom：操作html文档（标记型文档）

ducument对象(表示整个的文档)

• 常用方法

• write()方法：向页面输出变量（值）
• getElementById(); 通过id得到元素（标签）
  实例：
  
  //得到标签
  var input1 = document.getElementById(“nameid”);
  //得到input里面的value值
  alert(input1.value);
  //也可以向input里面设置一个值value
  如：input1.value = “bbbbb”;

• getElementsByName();
  返回的是一个集合（数组）
• getElementsByTagName(“标签名称”);
  //传递的参数，是标签名称
  var inputs1 = document.getElementsByTagName(“input”);
• 注意地方
  只有一个标签，这个标签只能使用name获取到，使用getElementsByName返回的是一个数组，
  但是现在只有一个元素，这个时候不需要遍历，而是可以直接通过数组的下标获取到值
  var inputs2 = document.getElementsByName(“name11”)[0];
  alert(inputs2.value);
  window.opener:属性，获取创建当前窗口的窗口

javaScript之终极篇

在末尾添加节点

• 第一步：获取到ul标签
  document.getElementById(“ulid”)
  第二步：创建li标签
  document.createElement(“标签名称”)
  第三步：创建文本
  document.createTextNode(“文本内容”);
  第四步：把文本添加到li下面
  使用 appendChild方法
  第五步：把里添加到ul末尾
  使用 appendChild方法

元素对象（element对象）

• 要操作Element对象，首先必须要获取到element， 使用document里面相应的方法获取
• 方法

• 获取属性里面的值
  getAttribute(“属性名称”)
  var input1 = document.getElementById(“inputid”);
  alert(input1.getAttribute(“value”));
• 设置属性的值
  input1.setAttribute(“class”,“haha”);
• 删除属性
  input1.removeAttribute(“name”)? 不能删除value)

• 想要获取标签下面的子标签的唯一有效办法，使用
  var ul11 = document.getElementById(“ulid”);
  //获取ul下面的子标签
  var lis = ul11.getElementsByTagName(“li”);

Node对象属性

• 使用dom解析html时候，需要html里面的标签，属性和文本都封装成对象

• 标签节点对应的值
  nodeType： 1
• 属性节点对应的值
  nodeType： 2
• 文本节点对应的值
  nodeType： 3
• firstChild：获取第一个子节点
• lastChild：获取最后一个子节点
• 同辈节点
  nextSibling: 返回一个给定节点的下一个兄弟节点。
  previousSibling：返回一个给定节点的上一个兄弟节点。

操作dom树

• appendChild方法（类似于剪切黏贴的效果）
• insertBefore(newNode,oldNode)方法)(不存在 insertAfter()方法)
• removeChild方法：通过父节点删除，不能自己删除自己
• replaceChild(newNode,oldNode)方法: 替换节点
  不能自己替换自己，通过父节点替换

操作dom总结

• 获取节点使用方法
  getElementById()：通过节点的id属性，查找对应节点。
  getElementsByName()：通过节点的name属性，查找对应节点。
  getElementsByTagName()：通过节点名称，查找对应节点
• 插入节点的方法
  insertBefore(newNode,oldNode)方法：在某个节点之前插入
  appendChild方法：在末尾添加，剪切黏贴
• 删除节点方法
  removeChild方法：通过父节点删除
• 替换节点方法
  replaceChild(newNode,oldNode)方法：通过父节点替换

innerHTML属性

• 这个属性不是dom的组成部分，但是大多数浏览器都支持的属性

• 获取文本内容
  var span1 = document.getElementById(“sid”);
  alert(span1.innerHTML);

• 向标签里面设置内容（可以是html代码也可以使简单字符串）
  var div11 = document.getElementById(“div11”);
  div11.innerHTML = "<h1>AAAAA</h1>";

动态显示时间

function getD1() {
var date = new Date();
var d1 = date.toLocaleString();
var div1 = document.getElementById(“times”);
div1.innerHTML = d1;
}