javascript学习笔记DOM(1)

DOM

DOM我个人理解就是网页中的每一个元素,如果把每一个节点和子节点以树形结构表示出来很像家里的族谱图,如下图。

所以DOM关系也可以看成是描述网页元素关系的“族谱图”,只要知道其中一个人就可以找到任何一个跟他有直接或者间接关系的人,(例如:你想找你的二大爷,可以找到你爸爸的二哥就可以了,要是指向的是隔壁老王的二哥就出事儿了。)。DOM关系也是一样,知道其中一个就可以根据他们的关系来找到任何一个DOM元素。

获取元素的方法有哪些?

1、document.getElementById("Id");

  在整个文档中通过元素的ID获取一个元素

  1)如果ID重复了,我们只能获取第一个
  2)IE6 7下不区分ID的大小写
  3)IE6 7下会把表单元素的name属性当作ID来用
  4)可以直接用ID当作对象来用 (内嵌式),项目中不建议这样使用,有很严重的兼容性。

2、document.getElementsByTagName("标签");

  根据标签获取元素可以指定上下文。上下文是要查找的范围。

  在整个文档上通过元素的标签名称获取一组元素 返回值是一个类数组元素。保存所有根据标签查询出来的元素。

3、document.getElementsByName("元素的name属性");

  在整个文档上通过元素的name属性获取一组元素(类数组)

  在IE浏览器下只对表单元素起作用

4、document.body

  获取整个body

5、document.documentElement

  获取整个HTML

6、document.getElementsByClassName("类样式名")

  在整个文档上通过元素的样式名称获取一组元素(类数组)
  这个不兼容IE6~8

样式选择器(不兼容IE6~8 移动端经常使用)

7、document.querySelector("");

  可以根据id class 标签等选择DOM元素。

  获取一个 如果有多个也只获取第一个

8、document.querySelectorAll("");

  获取多个(类数组)
  

时间: 2024-10-06 12:32:24

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

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(2)

DOM DOM元素的类型 节点类型          节点名称        节点值 nodeType      nodeName      nodeValue    元素节点        文本节点          注释节点      documentnodeType              1    3  8  9 nodeName       大写的标签名      #text         #comment    #document nodeValue    null      

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

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 个不同的部分