黑马程序员技术交流社区

标题: day10JavaScript高级 [打印本页]

---

作者: 森111    时间: 2018-12-17 16:04
标题: day10JavaScript高级
一、BOM
二、DOM
1.DOM简单学习
  -功能:控制HTML文档的内容
  -代码:获取页面的标签(元素)对象
    document.getElementById("id值"):通过元素的Id获取元素对象
  -操作Element对象:
    *设置属性值:
   **明确获取的对象是哪一个
   **查看API文档,找其中有哪些属性
   document.getElementById().属性 = 值;
*修改标签体内容:
   **属性:innerHTML
*操作css样式
   **document.getElementById().style.属性 = 值;
2.事件简单学习
    *功能:某些组件被执行了某些操作后去触发某些代码的执行
*如何绑定事件:
   **直接在html标签上,指定事件(属性),事件的值就是js代码
   **通过js获取元素对象,指定事件的属性,设置一个函数
*事件
   onclick --> 单击事件
   
3.BOM****
1)概念:Browser Object Model 浏览器对象模型
  将浏览器的各个组成部分封装成对象
2)浏览器对象概述******面试题
  -Window 窗口对象
  -History 历史记录对象
  -Location 地址栏对象
  -Navigator 浏览器对象
  -Screen 屏幕对象
2)浏览器的对象
  -Window(浏览器窗口对象)***
    *创建:不需要创建
*方法:
   **弹出框相关方法
     alert()   警告框
  confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框,返回布尔值
     例: var flag = confirm("您确定要退出吗")
         if(flag){alert("欢迎再次光临")}
         else{alert("手别抖!")}
  prompt()  显示可提示用户输入的对话框,返回用户输入的值
   **打开/关闭方法
     open("url")  打开一个新的浏览器窗口
  close() 关闭浏览器窗口  谁调用close()谁会被关闭
      **定时器有关的方法
     setTimeout() 在指定的毫秒后调用函数或计算表达式
     参数:JS代码或函数对象,时间
     例:setTimeout("alert('boom~~~')",2000);
  clearTimeout() 取消由setTimeout()方法设置的timeout;
     参数:clearTimeout(setTimeout对象)
  setInterval() 按照指定的周期来调用函数或计算表达式
     参数:JS代码或函数对象,时间
  clearInterval() 取消由setInterval方法设置的Interval
     参数clearInterval(setInterval对象)
*属性
   **获取其他BOM对象
     history
  location
  Navigator
  Screen
*特点:
    Window对象不需要创建可以直接使用 window(小写)使用 window.方法名();
    window可以省略 直接调用方法
  -Location(地址栏对象)**
*创建
    window.location或location
*方法
    reload() 重新加载当前文档.
*属性
    href     设置或返回完整的URL
  -History(历史记录对象)*
    *创建
    window.history 或hidtory
*方法
    back() 加载history列表中的前一个URL
    forward() 加载history列表中的下一个URL
    go() 加载history列表中的某一个具体的页面
       **参数:如果是正数则前进N个,负数则后退N个
*属性
    length: 返回当前窗口历史列表中的URL数量
  -Screen(显示器屏幕对象)
  -Navigator(浏览器对象)
  
4.DOM(DOM其实是BOM的一个特殊对象)
1)概念:Document Object Model
  将标记语言文档(html文档)的各个组成部分,封装为对象,可以使用这些对象对标记语言文档进行CRUD
2)W3C DOM标准被分为3个不同的部分
  -核心 DOM:针对任何结构化文档的标准模型
  -HTML DOM:针对HTML文档的标准模型
  -XML DOM:针对XML文档的标准模型
3)核心DOM模型
  -对象*****记住!!
    Document:文档对象 √  -->整个HTML文档对象
Element:元素对象 √   -->标签
Attribute:属性对象   -->标签的属性
Text:文本对象        -->标签的内容
Comment:注释对象     -->注释
Node:节点对象,其他5个的父对象 √  -->所有DOM对象的父类,相当于Object
  -Document:文档对象
    *创建(获取):在html dom模型中可以使用window来获取
   **window.document / document
*方法
   **获取Element对象
     getElementById():根据id属性值获取元素对象
  getElementsByTagName():通过标签名称获取元素对象们,返回值为数组
  getElementsByClassName():通过Class名称来获取元素对象们,返回值为数组
  getElementsByName():通过Name来获取元素对象们,返回值为数组
                      一般用在表单标签
   **创建其他DOM对象
  createElement("标签名")***
  createTextNode("文本")***
     createAttribute()
  createComment()
*属性:
  -Element:元素对象
    *创建(获取):通过Document.getXXX来获取
*方法:
     removeAttribute("属性名")
  setAttribute("属性名","属性值")
    *属性:
     innerHTML:用于替换标签体内的内容
  -Node:节点对象
    节点可以是元素节点,属性节点,文本节点.
*特点:所有DOM对象都可以被认为是一个节点
*方法:
    [CRUD dom树]
    //添加或删除必须由父节点才能操作
    appendChild(标签对象/文本节点对象):向节点的子节点列表的结尾添加新的子节点
    removeChild(标签对象):删除(并返回)当前节点的指定子节点
    replaceChild():用新节点替换一个子节点
*属性:
    parentNode():获取父节点;
注:如果在<a>标签中的href设置为 href="javascript:void(0)",则不会跳转,可以当做按钮使用.
   -补充******可参见视频
     *在JS中如何输出日志:
       对象:console;
    方法:log方法
    console.log("日志信息")
    打开开发者模式,在console选项卡中获得日志的内容
     *在JS中如何debug
    在觉得出问题的地方加入:debugger;
    自动会呼出开发者模式

   
4)HTML DOM对象模型
   -标签体的获取:innerHTML
     *innerHTML可以简单地添加标签体
   -使用html元素对象的属性
   -控制元素样式
     *属性.style.样式属性 = "样式属性值"
   如:div1.style.border = "1px solid red";
  *先用css写一个类选择器
   通过元素的className属性来设置class属性值
   如:div.classNme="d1";
5)事件:
    *页面加载完成后触发的事件
  window.onload = function{}
    页面加载完以后才执行的逻辑
    *点击事件
   onclick:单击事件
   dblclick:双击事件
*获得焦点事件:光标在文本框中
   onfocus
*失去焦点事件:失去光标
   onblur
*表单事件
   onsubmit:提交事件
   !!!注意:事件属于form而不是表单项
        需要在函数中return false/true来控制是否提交
           行内式:最终结果需提交给form:如-return check()
   例:<form>
          <input type="text" name="username">
    <input type="submit">
      </form>
   
   <script>
      function check{
     var str = document.getElementsByName("username")[0].value;
     if(str=="")
     {
       alert("用户名不能为空")
    retrun false;
     }else{
       return true;
     }
   }
   </script>

5)事件监听机制
    -概念:某些组件被执行了某些操作后,触发某些代码的执行
      事件:如单击,双击,键盘按下了,鼠标移动了
      事件源:组件.如:按钮 文本输入框
      监听器:代码
      注册监听:将事件,事件源,监听器结合在一起.当事件源上发生时间则执行监听器代码
    -点击事件
  *onclick:单击事件
  *ondblclick:双击事件
-焦点事件
  *onfocus:获得焦点
  *onblur:失去焦点
    一般用于表单校验
-加载事件
  *onload:初始化后再执行事件
-鼠标事件
   *onmousedown:鼠标按下
   *onmouseup:鼠标松开
   *onmouseover:鼠标移动到元素之上
   *onmouseout:鼠标移开
   *onmousemove:鼠标移动
-键盘事件
   *onkeydown:键盘被按下
   *onkeyup:键盘松开
   *onkeypress 某个按键被按下并松开
-选择和改变事件
   *onchange:
   *onselect:
-表单事件
   *onsubmit:
  

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2