最新消息:

JavaScript学习--Item29 DOM基础详解

hg0088开户 浏览 评论

来源:程序员人生   发布时间:2016-06-21 08:39:16 阅读次数:882次

看完JavaScript高级程序设计,整理了1下里面的DOM这1块的知识点,比较多,比较碎!DOM在全部页面的地位如图:

这里写图片描述

DOM(文档对象模型)是针对HTML 和XML 文档的1个API(利用程序编程接口)。DOM描,绘了1个层次化的节点树,允许开发人员添加、移除和修改页面的某1部份.

1、节点层次

DOM 可以将任何HTML 或XML 文档描绘成1个由多层节点构成的结构。节点分为几种不同的类型,每种类型分别表示文档中不同的信息及(或)标记。每一个节点都具有各自的特点、数据和方法,另外也与其他节点存在某种关系。节点类型如图:

这里写图片描述

1、节点的公共属和方法

var firstChild = someNode.childNodes[0]; var secondChild = someNode.childNodes.item(1); var count = someNode

var returnedNode = someNode.appendChild(newNode); alert(returnedNode == newNode); //true alert(someNode.lastChild == newNode); //true

  • insertBefore()——在参考节点前添加子节点,接收两个参数,第1个参数表示要添加的节点,第2个参数表示参考节点,返回添加的节点.
  • //插入后成为第1个子节点 var returnedNode = someNode.insertBefore(newNode, someNode.firstChild); alert(returnedNode == newNode); //true

  • replaceChild()——替换子节点,接收两个参数,第1个参数表示要添加的节点,第2个参数表示被替换的节点,返回被替换的节点.
  • //替换第1个子节点 var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);

  • removeChild()—–移除子节点,这个方法接受1个参数,即要移除的节点。被移除的节点将成为方法的返回值
  • //移除第1个子节点
    var formerFirstChild = someNode.removeChild(someNode.firstChild);

  • cloneNode()——克隆节点,接收1个boolean类型的参数,当参数为true时履行深复制,意即复制内容包括其子节点.
  • item 1 item 2 item 3 var deepList = myList.cloneNode(true); alert(deepList.childNodes.length); //3(IE (其他阅读器) ); ); //0

    deepList.childNodes.length 中的差异主要是由于IE8 及更早版本与其他阅读器处理空白字符的方式不1样。IE9 之前的版本不会为空白符创建节点。

    cloneNode()方法不会复制添加到DOM 节点中的JavaScript 属性,例如事件处理程序等。这个方法只复制特性、(在明确指定的情况下也复制)子节点,其他1切都不会复制。IE 在此存在1个bug,即它会复制事件处理程序,所以我们建议在复制之前最好先移除事件处理程序。

    上述节点的nodeName 和 nodeValue对应下图:

    这里写图片描述

    2、Doucment类型

    JavaScript 通过Document 类型表示文档。在阅读器中,document 对象是HTMLDocument(继承自Document 类型)的1个实例,表示全部HTML 页面。而且,document 对象是window 对象的1个属性,因此可以将其作为全局对象来访问

    1、document对象的属性和方法

  • documentElement——获得html节点元素
  • var html = document.documentElement; //获得对<html>的援用 alert(html === document.childNodes[0]); //true alert(html === document.firstChild); //true

  • body——获得body节点元素

  • title——获得title文字节点元素

  • //获得文档标题 var originalTitle = document.title; //设置文档标题 document.title = "New page title";

    //获得完全的URL var url = document.URL; //获得域名 var domain = document.domain; = document.referrer;

    2、DOM的操作

  • getElementById()——通过id属性获得元素

  • getElementsByTagName()——通过元素名获得元素

  • var div = document.getElementById("myDiv"); //获得id='myDiv'元素的援用 var images = document.getElementsByTagName("img"); //获得img元素的援用 var allElements = document.getElementsByTagName("*"); //获得文档中所有的元素

    IE7及较低版本还为此方法添加了1个成心思的“怪癖”:name特性与给定ID匹配的表单元素也会被该方法返回

    3、DOM1致性检测

    hg0088:JavaScript学习--Item29 DOM基础详解

    发表我的评论
    取消评论

    表情

    您的回复是我们的动力!

    • 昵称 (必填)
    • 验证码 点击我更换图片

    网友最新评论