Javascript的组成部分

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript的组成部分相关的知识,希望对你有一定的参考价值。

一、DOM(Document Object Model):文本对象模型
//通过标签名获取DOM对象。返回的是一个集合,需通过具体下标获取某个具体的DOM对象。
var oDiv=document.getElementsByTagName("div");
//通过ID获取DOM对象。
var oBox=document.getElementById("box");
//通过className来获取DOM对象,返回的是一个集合,需通过具体下标获取某个具体的DOM对象。
var oBox=document.getElementsClassName("box");

1.节点Node

  • children:非标准属性,返回指定元素的所有子元素,是一个HTMLCollection。

    var o=oDiv.children;
  • childNodes:标准属性,返回指定元素的所有子元素和文本节点,是一个NodeList。(折行就有一个文本节点)

    var oo=oDiv.childNodes;//IE6,7,8会出现异常(无闭合,返回text;<a>返回路径。)
  • 节点属性
    (1)节点类型nodeType:console.log(oo[0].nodeType);//返回值:元素节点--1;属性节点--2;文本节点--3;
    (2)节点名称nodeName:console.log(oo[0].nodeName);//即标签名称,文本节点为#text。
    (3)节点内容nodeValue:console.log(oo[0].nodeValue);//node实际上是指针,其本身无值,故该属性的返回值始终为null。

  • 获取节点
    (1)获取所有节点
    var allNode=document.getElementsByTagName("*");

    (2)获取父元素

    oLi.parentNode.style.background="red";
    oDiv.offsetParent;//获取定过位的父元素,若没有则返回body。

    (3)获取第一个孩子

    oUl.firstChild;//适用IE6,7,8
    oUl.firstElementChild;//适用标准浏览器,IE6,7,8不兼容。
    //兼容处理:
    var first=obj.firstChild ? obj.firstChild : obj.firstElementChild ;

    (4)获取最后一个孩子

    oUl.lastChild;
    oUl.lastElementChild;
    //兼容性及兼容处理同上。

    (5)获取兄弟节点

    oLi.nextSibling;
    oLi.nextElementSibling;
    oLi.previousSibling;
    oLi.previousElementSibling;
  • 操作节点
    (1) 添加子节点 appendChild
    var li=document.createElement("li");//创建子节点
    oUl.appendChild(li);//往父元素追加子节点(同一节点只能添加一次)
    var text=document.createTextNode("xxx");//创建文本节点
    li.appendChild(text);//将文本节点追加到元素中。
    //li.innerhtml="xxx";
    //li.nodeValue;//错误。
    //li.childNodes[0].nodeValue;//正确,有返回值。
    li.childNode[0].nodeValue="<p></p>";//不能识别标签,innerHTNML能够识别标签。

    (2) 插入节点 insertBefore

    父元素.insertBefore(newNode,someNode);//someNode表示插入节点的参考位置。
    如果插入一个已有的子元素,会先删除自己原来的,然后插入到指定位置。(appendChild也一样。)

    (3) 删除节点 removeChild

    父元素.removeChild(要删除的子节点);//返回被删除的节点。

    (4) 替换节点 replaceChild

    父元素.replaceChild(newNode,被替换的节点);

    (5) 复制节点(克隆节点)cloneNode

    被克隆节点.cloneNode(false/true);//false:浅复制(只复制标签);true:深复制(整个结构都被复制,包括标签里的内容)。

2.表格Table

tab.tBodies[0].rows[0].cells[0];
tab.tHead.rows[0].cells[0];
tab.tFood.rows[0].cells[0];

3.表单From

  • 表单获取元素
    name可以标识一个元素:from1.nameValue.属性。

  • 表单提交/重置事件
    from1.onsubmit/onreset=function()
       //return true;//提交(默认值)
       //return false;//不提交
    
  • 表单改变事件
    from1.onchange=function()
  • 表单获取/失去焦点事件
    form1.text.onfocus/onblur=function()
  • 表单方法
    from1.submit();
    from1.reset();

二、BOM(Browser Object Model):浏览器对象模型

用于访问浏览器对象,没有规范。其核心是window(窗口)。

1.对话框与窗口

  • 对话框
    alert("输入错误");//提示对话框 
    confirm("是否关闭");//带"确定"、"取消"按钮的对话框 点击"确认"返回true,点击"取消"返回false。
    prompt("请输入一个数字",0);//带输入框的对话框,返回输入的数据。
  • print();//打印(快捷键:ctrl+P)
    <button onclick="print()">打印</button>
  • find(str);//查找(快捷键:ctrl+F)//按回车键继续查找下一个
    <button onclick="find(‘abc‘)">查找</button>
    <p>abcdefghijklmn</p>
    btn.onclick=function()
       var p=prompt("请输入要查找的内容");
       find(p);
    
  • 打开窗口
    open(打开窗口URL,打开方式,打开窗口的样式,新窗口是否取代浏览器记录中当前加载的页面);打开方式默认值为_blank。

    window.open ("http://www.baidu.com","_blank/_self", "width:100px;height:100px;",true/false);//window.可去掉,但在行间就不能去掉。如:
    <button onclick="window.open(‘http://www.baidu.com‘)">
    
    var iNew=window.open("about:blank","_blank");//打开一个空白的页面
    iNew.document.write("abc");
    
    open("1.rar");//如果不能以窗口方式打开的会运行下载。
  • 关闭窗口 close();

  • window.location; //当前窗口的路径(读)
    window.location="http://www.baidu.com";//(写)可利用为刷新

2.相关属性

document.body.scrollTop;//滚动条滑动的距离。
document.body.scrollLeft;//火狐、IE不兼容,取值都为0。

document.documentElement.scrollTop;
document.documentElement.scrollLeft;//火狐、IE适用,但谷歌不兼容。

//兼容处理:
var sTop=document.body.scrollTop==0?document.documentElement.scrollTop:document.body.scrollTop;

box[0].scrollHeight;//滚动条可滑动的高度,即元素的可视高,包括padding,不包括margin、border;
box[0].scrollWidth;//滚动条可滑动的宽度,即元素的可视高,包括padding,不包括margin、border;

oDiv.offsetWidth;//div的占位宽,包括padding,border。
oDiv.offsetHeight;
oDiv.offsetTop;//距页面顶部的距离,若父元素定位,则是与父元素的距离。
oDiv.offsetLeft;

oDiv.clientWidth;//div的可视宽,包括padding。
oDiv.clientHeight;
oDiv.clientTop;//div的上边宽border-top。
oDiv.clientLeft;//div的左边宽border-left。

window.onscroll=function();
window.onresize=function();

document.documentElement.clientHeight;//窗口可视高

以上是关于Javascript的组成部分的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript组成部分——ECMAScriptDOMBOM

JavaScript由哪三部分组成呢?

Javascript的组成部分

javascript 故事书组成部分

javascript组成

重识JavaScript 之 JavaScript的组成