DOM(Document Object Modle) 操作文档的编程接口
DOM定义了表示和修改文档的方法,不能修改css样式表,在js中使用DOM方法改变元素的css样式,实质上是在元素上添加行间样式。
DOM对象就是宿主对象,用来操作HTML和xml功能对象的集合。 xml——>xhtml——>html4.0——>html5
HTML和xml的区别:除了xml可以自定义标签外基本上没区别,xml被json替代了。

document,单独写的时候,它代表整个文档,隐式的写在html标签的上一层,html只是文档中的根标签。

注意点:BOM、DOM成组的东西都是类数组,而不是数组。

获取元素的方法:
getElementById();
在IE8以下的浏览器不区分id值得大小写,并且匹配元素的name的属性值。由于后台会修改id值,所以尽量不用或少用id。
getElementsByTagName();标签名,所有浏览器都支持
getElementsByClassName(); IE8及其以下得浏览器不支持

getElementsByName(); 在旧版本中,只有能提交请求的标签的name才生效(form、表单元素、img、iframe)
document.querySelector(); css选择器,IE7及以下不兼容,并且不具有实时性。
document.querySelectAll();

节点类型:
元素节点 1
属性节点 2
文本(text)节点 3 // 文本、空格、回车等都是文本节点
注释(comment)节点 8
document节点 9
documentfragment 11

遍历节点数:
parentNode 子节点的父节点,最终的parentNode节点是document节点。
childNodes 父节点的所有子节点,元素节点、注释节点、文本节点
firstChild 第一个子节点
lastChild 最后一个子节点
nextSibling 下一个兄弟节点
previousSibling 前一个兄弟节点

遍历元素节点数:(除了children节点,其他的都是IE9及以下不兼容)
parentElement 元素的父元素节点,最终的父元素节点是html元素,document是自成节点。
children 父元素下的元素子节点。
node.childElementCount === node.children.length 当前子节点的元素子节点个数。用children.length。
firstElementChild 第一个元素子节点
lastElementChild 最后一个元素子节点
nextElementSibling、previousElemnetSibling

节点的四个属性:
nodeName 除了元素节点,返回的结果前面都有一个‘#’,而元素节点返回大写形式的标签名,类型都为只读。
nodeValue 只用于文本节点和注释节点,可读写。
nodeType 返回数字,该数字代表对应的节点类型。只读
attributes 元素节点的属性集合。
node.hasChildNodes()方法,判断父节点里面是否有子节点,返回结果为布尔值。

DOM简介及节点、属性、查找节点的方法的更多相关文章

  1. python 3 属性查找与绑定方法

    1.属性查找 类有两种属性:数据属性和函数属性 (1)类的数据属性是所有对象共享的 #类的数据属性是所有对象共享的,id都一样 class OldboyStudent: school='oldboy' ...

  2. python面向编程:类继承、继承案例、单继承下属性查找、super方法

    一.类的继承 二.基于继承解决类与类的代码冗余问题 三.在单继承背景下属性的查找 四.super的方法 一.类的继承 1.什么是继承? 在程序中继承是一种新建子类的方法的方式,新创建的类成为子类\派生 ...

  3. js 创建节点 以及 节点属性 删除节点

    case 'copy': var B1 = document.getElementById("B1"); //获得B1下的html文本 var copy_dom = documen ...

  4. JS获取节点属性个数及值得方法

    var ex = node; ; for (var j in ex) { alert("" + myIndex + ".(<font color='blue'> ...

  5. (一)DOM 常用操作 —— “查找”节点

    在 DOM 树中,如果想要操作一个节点,那么首先要"查找"到这个节点.查找节点的方法由 Document 接口定义,而该接口由 JavaScript 中的 document 对象实 ...

  6. 使用DOM解析XML文件,、读取xml文件、保存xml、增加节点、修改节点属性、删除节点

    使用的xml文件 <?xml version="1.0" encoding="GB2312" ?> <PhoneInfo> <Br ...

  7. Selenium 查找节点

    Selenium 可以驱动浏览器完成各种操作,比如填充表单.模拟点击等.比如,我们想要完成向某个输入框输入文字的操作,总需要知道这个输入框在哪里吧?而 Selenium 提供了一系列查找节点的方法,我 ...

  8. python描述符和属性查找

    python描述符 定义 一般说来,描述符是一种访问对象属性时候的绑定行为,如果这个对象属性定义了__get__(),__set__(), and __delete__()一种或者几种,那么就称之为描 ...

  9. DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。

    DOM操作 --如何添加.移除.移动.复制.创建和查找节点等. (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个 ...

随机推荐

  1. 使用7zip压解各种文件的经常使用命令

    7zip简单介绍 格式支持 压缩解压缩 仅支持解压缩 安装 Debian Ubuntu ArchLinux 使用 打包 解压 列出文件的信息列表 检查包的完整性 更新压缩包 删除包里的文件 7zip简 ...

  2. UVA 1400 1400 - &quot;Ray, Pass me the dishes!&quot;(线段树)

    UVA 1400 - "Ray, Pass me the dishes!" option=com_onlinejudge&Itemid=8&page=show_pr ...

  3. 纯JS写的一款记录事项的单页应用

    要点: 1.使用localStorage存储 2._change_record_progress函数以字符串作为参数,用eval执行这个参数 3.使用了jQuery自定义事件,便于数据改变时实时更新显 ...

  4. Orange's_1_win7下搭建环境

    工欲善其事,必先利其器. 由于公司电脑工作环境是win7,为了学习于渊的Orange,所以就在windows下配置环境:   1.nasm: nasm汇编 http://www.nasm.us/    ...

  5. npm, webpack, vue-cli, vue-x, axios

    1,什么是node.js,以及npm 简单的来说Node.js就是运行在服务端的JavaScript,是基于Chrome V8引擎的.npm是Node.js包的管理工具. 2,npm的安装和更新 No ...

  6. java语法基础(一)

    这个是自己前两年做java视频教程时候的课件.感兴趣的同学可以参考下. 这里是纯粹的语法行总结. editplus的使用 选择项目目录 打开editplus 左侧目录导航栏 可以打开盘符,文件夹 可以 ...

  7. 唯一性校验 impl 和 action

    IMPL方法实现 //  这个方法是通过ID修改数据 如果得到结果大于0 表明结果有重复 如果得到结果小于0 表明结果正确 @Override public boolean checkVersion( ...

  8. Java简单的加密解密算法,使用异或运算

    package cn.std.util; import java.nio.charset.Charset; public class DeEnCode { private static final S ...

  9. 查看html元素绑定的事件与方法 visual Event 插件

    WEB标准提倡结构.表现和行为相 分离,现在越来越多采用这种表现和行为的方式,但它也为我们开发调试带来一些问题,网页载入一堆JavaScript,,我们很难搞清楚最后在哪些元素的哪个动作绑定了事件,尤 ...

  10. bzoj 3028: 食物【生成函数】

    承德汉堡:\( 1+x^2+x^4+...=\frac{1}{1-x^2} \) 可乐:\(1+x \) 鸡腿:\( 1+x+x^2=\frac{x^3-1}{x-1} \) 蜜桃多:\( x+x^3 ...