javascript学习笔记DOM(2)

DOM

DOM元素的类型

节点类型          节点名称        节点值

nodeType      nodeName      nodeValue

           元素节点        文本节点          注释节点      document
nodeType              1        3         8       9
nodeName       大写的标签名      #text         #comment    #document
nodeValue     null             文本内容          注释内容          null

1)IE6~8不会将空格和Enter当作节点,但是其他浏览器会把他当作文本节点
2)HTML中元素节点的nodeName是大写标签名,但是在XHTML或者XML中,我们的标签名写的是大写他就是大写,写的是小写他就是小写

DOM节点的关系

通过DOM节点的关系可以准确的找到想要的元素

(比如想要找你的爷爷直接找到你的爸爸的爸爸就可以了。想要找你的堂弟可以找到你爸爸然后找到你爸爸的兄弟,再找他的儿子)。

1、childNodes 获取所有的子节点 (节点:元素)
2、children 获取所有的元素子节点
3、parentNode 获取父亲节点
4、previousSibling 获取哥哥节点
5、nextSibling 获取弟弟节点
6、firstChild 获取第一个子节点
7、lastChild 获取最后一个子节点

DOM的操作

1、创建DOM元素

  document.createElement("标签");

  用于创建一个新的DOM元素,接收一个标签名。来创建这个类型的DOM元素

2、在元素最后添加DOM元素

  appendChild

  将一个元素对象添加到指定的区域内,并且在最后面的位置

  语法:父亲元素.appendChild(要添加的元素对象)

3、在某元素之前添加DOM元素

  insertBefore

  将一个元素对象(新对象)放在指定对象(已有对象)前面

  语法:已有对象.parentNode.insertBefore(新对象,已有对象);

4、替换元素

  replaceChild

  用一个新的元素把旧的元素替换掉

  语法:旧元素.parentNode.replaceChild(新元素,旧元素);

5、复制元素

  cloneNode

  把已有的元素复制一个。

  语法:要复制的元素.cloneNode(TRUE/FALSE);

  需要一个boolen类型的参数。 true:包括所有的子元素都一同复制 false,只复制当前的元素没有子元素

6、删除元素

  删除指定的元素

  语法:要删除的元素.parentNode.removeChild(要删除的元素);

动态创建DOM节点耗性能,我们尽量少用

设置自定义属性

setAttribute

setAttribute有两种使用方法。

1)如果传两个参数的话是直接设置自定义属性的值。

2)如果传的参数只有一个,则获取这个属性上绑定的值。

setAttribute 设置class的属性,IE6~8不兼容

removeAttribute 删除属性

removeAttribute ("属性名");

时间: 2024-10-13 04:12:46

javascript学习笔记DOM(2)的相关文章

JavaScript学习笔记——DOM基础 2.1

一.DOM 1.DOM的基本概念 DOM是Document Object Model的缩写,意思是文本对象模型,也就是说,如果没有Document,DOM也就无从谈起.我们可以把创建的网页当作是一个Document对象. JavaScript的对象可以分为三种类型:由用户自定义的对象,由JavaScript本身提供的内建对象,以及由浏览器提供的宿主对象. 顺便提一下BOM(Browser Object Model)和WOM(Window Object Model),其实这两个说的是一种东西,但大

JavaScript学习笔记——DOM基础 2.6

一.CSS-DOM 1.清楚一个概念 HTML负责的是结构,CSS负责的是样式,JavaScript负责的是动作(行为). 2.style属性 语法:element.style 返回:object style相对于element是一个属性,而style本身是一个对象,它包含了诸多元素的样式. 关于这一点,可以根据后面的例子去理解. 3.获取样式 例子:element.style.fontFamily 返回:style对应属性的值,如fontFamily,返回“Microsoft yahei” 注

JavaScript学习笔记——DOM基础 2.5

一.document.write方法 document对象write()方法,常用来向网页中输出字符串,圆括号中可以是要输出的字符串, document.write('这是我的个人博客'); 也可以是字符串变量, var myText = '这是我的个人博客'; document.write(myText); 还有一种,就是通过字符串和变量组合的方式进行输出. var myText = '这是我的'; document.write(myText + '个人博客'); document.write

JavaScript学习笔记——DOM对象

javascript-document对象详解 DOM document(html xml) object modledocument对象(DOM核心对象) 作用: 1.内容 innerHTML 2.属性 3.样式 document对象 一.属性 title 返回或设置当前文档的标题 URL 返回当前文档的url bgColor 设置文档的背景色 fgColor 设置文档的前景色(设置文字颜色) 二.方法 getElementById(idname) 返回拥有指定id的(第一个)对象的引用 ge

javascript学习笔记DOM(1)

DOM DOM我个人理解就是网页中的每一个元素,如果把每一个节点和子节点以树形结构表示出来很像家里的族谱图,如下图. 所以DOM关系也可以看成是描述网页元素关系的“族谱图”,只要知道其中一个人就可以找到任何一个跟他有直接或者间接关系的人,(例如:你想找你的二大爷,可以找到你爸爸的二哥就可以了,要是指向的是隔壁老王的二哥就出事儿了.).DOM关系也是一样,知道其中一个就可以根据他们的关系来找到任何一个DOM元素. 获取元素的方法有哪些? 1.document.getElementById("Id&

JavaScript高级程序设计学习笔记--DOM

DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序接口). Document类型 文档的子节点 虽然DOM标准规定Document节点的子节点可以是DocumentType,Element,ProcessingInstruction或Comment,但还有两个内置的访问其子节点的快捷方式.第一个就是documnetElement属性,该属性始终指向HTML页面中的<html>元素.另一个就是通过childNodes列表访问文档元素,但通过documentElement属性则

javascript学习笔记——如何修改&lt;a href=&quot;#&quot;&gt;url name&lt;/a&gt;

0.前言 使用了一段时间javascript,再花了点时间学习了jquery,但是总是感觉自己很"迷糊",例如<a href="#">url name</a>中,如果修改href中的"#"应如何编写代码,如果修改url name应如何编写代码.再加上javascript和jquery操作方法略有不同,所以我就更"迷糊"了. [说明] 曾经使用关键词--"innerHTML和value区别&qu

Java程序猿的JavaScript学习笔记(12——jQuery-扩展选择器)

计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript学习笔记(3--this/call/apply) Java程序猿的JavaScript学习笔记(4--this/闭包/getter/setter) Java程序猿的JavaScript学习笔记(5--prototype) Java程序猿的JavaScript学习笔记(6--面向对象模拟) Java程

html学习笔记-DOM

html学习笔记-DOM Table of Contents 1. 什么是 DOM? 2. DOM 节点 3. DOM 方法 4. DOM 属性 5. DOM 访问 6. DOM 修改 7. DOM 事件 1 什么是 DOM? DOM 是 W3C (万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准: “W3C 文档对象模型 ( DOM ) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构和样式. ” W3C DOM 标准被分为 3 个不同的部分