DOM是JS中专门操作HTML页面内容的

他的三种基本使用方法是:

1.  document.getElementById('');  ——>选取html页面中带有Id的属性名;

2.document.getElementsByClassName(''); ——>选取html页面中属性名为class的内容;

3.document.getElementsByTagName(''"); ——>选取html页面中特指的标签属性。

在HTML中的每一个元素:元素,属性,文本都是一个节点对象(node),document对象是整棵树的根节点。

节点父子关系:

1.  node.ParentNode :获得节点的父节点;

   node.ChildNode :获得node的所有子节点;

node.firstChild:获得node下最后一个子节点。

节点兄弟关系:

2.  node.PreivousSibling :返回当前节点的前一个兄弟节点;

   node.nextSibling :返回当前节点的下一个兄弟节点;

*网页中的一切都是节点,包括换行和空字符

元素树之间的关系:仅包含元素节点的树结构(仅是节点数的子集)

 1.父子关系:

  elem.parentElement:返回一个父元素对象;

  elem.child(IE8支持)返回一个子元素对象集合;

  elem.firstElementChild 返回第一个子元素对象;

  elem.lastElementChild 返回最后一个子元素。

  2.兄弟关系:

  elem.preivousElementSibling: 返回当前节点的前一个兄弟元素;

  elem.nextElementSibling : 返回当前节点的下一个兄弟元素。

  

选择器查找:查找一些条件复杂的元素,既可以找一个元素,也可以找多个元素,Selector可以写css的选择器

  语法:var elem=parent.querySelector("seletor");单个 

     var elem=parent.querySelectorAll("seletor");多个

  返回非动态集合:实际存储的数据,不会返回访问DOM树

getxx和SeletorAPIde差别:

  1.返回值:get返回动态集合;selectorAPI返回非动态集合

  2.效率:get首次 查找效率高;selectorAPI首次查找效率低

  3.易用性selector更简单,get更繁琐

推荐:

  一个条件能找到的元素就用 get;

  若条件过多时就用selector

获取或修改HTML内容:

elem.innerHTML

获取或修改元素

elem.classname="标签"

追加到DOM树,只有添加到DOM树中,才能显示在网页中

1.在父元素的结尾添加新元素

  Parent.appendChild(elem)

2.插入:在现有子元素插入新元素

  Parent.insertBefore(elem,oldElem);

3.替换:替换现有子元素

  Parent.replaceChild(elem,oldelem)

option :获得select下的所有option对象

.option.length

.length 也可以直接获得option的个数

.value:

  1.如果选中的option有value属性,则返回value属性;

  2.如果选中的option没有value属性,则返回对标签中的内容

.selectedIndex  : 获得当前

DOM树节点关系的更多相关文章

  1. 深入解析浏览器的幕后工作原理(三) 呈现树和 DOM 树的关系

    呈现树和 DOM 树的关系 呈现器是和 DOM 元素相对应的,但并非一一对应.非可视化的 DOM 元素不会插入呈现树中,例如"head"元素.如果元素的 display 属性值为& ...

  2. DOM树节点和事件

    一.前言:DOM树节点是JS的基础语句.通过节点,能够取到HTML代码中的任意标签,从而对其进行修改和添加各种视觉效果. 二.DOM树节点    DOM节点分为三大类: 元素节点,属性节点,文本节点  ...

  3. 【浏览器渲染原理】渲染树构建之渲染树和DOM树的关系(转载 学习中。。。)

    在DOM树构建的同时,浏览器会构建渲染树(render tree).渲染树的节点(渲染器),在Gecko中称为frame,而在webkit中称为renderer.渲染器是在文档解析和创建DOM节点后创 ...

  4. 通过Ztree生成页面html元素Dom树,以及拖拽改变元素的位置

    zTree 是一款依靠 jQuery 实现的多功能 "树插件",http://www.treejs.cn/v3/main.php#_zTreeInfo,功能强大,不多赘述. 下面我 ...

  5. JS的Dom树小结

    一[DOM树节点]  DOM节点分为三大类:元素节点.文本节点.属性节点 文本节点.属性节点,为元素节点的两个子节点:  通过getElement系列方法,可以去到元素节点.     二[查看节点] ...

  6. 深入理解DOM节点关系

    × 目录 [1]父级属性 [2]子级属性 [3]同级属性[4]包含方法[5]关系方法 前面的话 DOM可以将任何HTML描绘成一个由多层节点构成的结构.节点分为12种不同类型,每种类型分别表示文档中不 ...

  7. DOM节点关系,节点关系

    DOM节点关系 定义 节点中的各种关系可以用传统的家族关系来描述,相当于把文档树比喻成家谱. 属性 [nodeType.nodeName.nodeValue] 每个节点都有这三个属性,且节点类型不同, ...

  8. jacascript DOM节点——节点关系与操作

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 节点关系 DOM可以将任何HTML描绘成一个由多层节点构成的结构.每个节点都拥有各自的特点.数据和方法,也 ...

  9. DOM树操作

    DOM 操作 访问与树关系(节点) 绘制 DOM 树: childNodes, attributes 从一个中心元素访问其所有的直系亲属元素 访问父节点: parentNode 访问上一个兄弟节点: ...

随机推荐

  1. 优雅编写Python3 的62个小贴士

    iterable技巧 ▍1.创建一个数字序列(从0到10,间隔为2)   >>> range(0,10,2)[0, 2, 4, 6, 8] ▍2.对一串数字求和(从0到10,间隔为2 ...

  2. MySQL数据库备份之mysqldump

    创建用户备份的用户 MariaDB [mysql]> create user 'backdata'@'localhost' identified by 'test@123456';Query O ...

  3. 123456---com.twoapp.xiaoxiaofeixingyuan---小小飞行员

    com.twoapp.xiaoxiaofeixingyuan---小小飞行员

  4. C++: Unresolved external symbol __imp__fscanf

    VS2019中遇到错误error LNK2001: unresolved external symbol __imp__fscanf 解决办法:链接legacy_stdio_definitions.l ...

  5. Golang 开发框架 gin 项目时笔记

    1.模板引入时报错: func main() { router := gin.Default() router.LoadHTMLGlob("templates/**/*") rou ...

  6. mysql新建数据库(database)设置为utf8

    CREATE DATABASE IF NOT EXISTS yourdbname DEFAULT CHARSET utf8 COLLATE utf8_general_ci;

  7. LODOP在页面让客户选择打印机

    获取打印机列表可以放在onload事件里,如过当前是使用的c-lodop,由于websoket链接需要时间,一进入页面可能会报错,被准备好或网页没下载完成等,也可以在点击事件里让用户获取打印机.之前写 ...

  8. 【Leetcode_easy】724. Find Pivot Index

    problem 724. Find Pivot Index 题意:先求出数组的总和,然后维护一个当前数组之和curSum,然后对于遍历到的位置,用总和减去当前数字,看得到的结果是否是curSum的两倍 ...

  9. Fakes中Shim的2种方法

    Fakes自动生成的Shim代码,有两种可能:(目前尚不清楚生成规律) //属性型 public static FakesDelegates.Func<string, bool, string& ...

  10. 【数据库开发】MySQL命令大全

    1.连接Mysql 格式: mysql -h主机地址 -u用户名 -p用户密码1.连接到本机上的MYSQL. 首先打开DOS窗口,然后进入目录mysql\bin,再键入命令mysql -u root ...