Dom属性方法
一、javascript的三大核心
1.ECMAScript js的语法标准
2.DOM Document object Model 文档对象模型,提供的方法可以让js操作html标签
3.BOM Browser Object Model 浏览器对象模型,提供的方法让js可以操作浏览器
注意:1. js里最大的boss是window,document只是window下的一个对象
document.documentElement 这个东西可以拿到html
document(在文档里,document是老大)
|
html
/ \
/ \
/ \
body head
/ / | \
/ / | \
/ / | \
/ | \ meta title style...
/ | \
/ | \
div p ul...
/
/
a
二、DOM的属性
js ---> DOM --> html
js通过DOM去操作html标签
childNodes 返回当前对象下的所有子节点对象,会返回文本节点
注意: 在ie8下只会返回元素节点
nodeType 返回节点类型,元素节点返回1 文本节点返回3 注释节点返回8
children 返回对象下所有子元素节点,并且没有兼容问题
firstChild 返回第一个子节点,在IE8跟childNodes一样的表现
lastChild 返回最后一个子节点 同上
firstElementChild 返回最后一个元素节点,不兼容IE8
nextSibling 下一个兄弟节点 在主流的浏览器,可能会拿到除了元素节点以外的节点,在IE8里,只会返回元素节点,如果没有就返回null
previousSibling 上一个兄弟节点 同上
nextElementSibling 下一个兄弟元素节点 如果没有返回null 不兼容IE678
previousElementSibling 上一个 同上
parentNode * 返回父节点 没有兼容性
offsetParent 返回定位父级,如果都没有找到,最后返回body上,没有兼容问题
13.nodeName 返回标签的构造器 标签名大写字母
三、DOM的一些方法
createElement(‘p’)
这个里面是标签
新建元素节点,需要接受一个参数,参数就是需要新建的标签。
createTextNode()
新建文本节点
createComment()
新建注释节点
节点操作
添加元素节点
1. 父级.appendChild(子节点)
把子节点添加到父节点里去 往父级的所有子元素节点后 追加一个节点
2. 父级.insertBefore(子节点, 指定的子节点)
添加到指定的节点前面
父级.removeChild(需要删除的节点)
1.克隆节点 cloneNode
克隆节点, 克隆母体.cloneNode()
函数接收一个参数,这个参数是一个布尔值,默认false,浅复制, true深度复制
浅复制:只复制标签
深度复制:把跟这个标签对象相关的一些标签的行内的信息一起复制,不会复制js里的自定义属性。
这是我对dom学习的笔记,如果能够帮助到你,我会非常高兴。
Dom属性方法的更多相关文章
- jquery获取dom属性方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- DOM – (w3school)1.DOM 方法 + 2.DOM属性 + 3.DOM 元素
1.DOM 方法 一些 DOM 对象方法 这里提供一些您将在本教程中学到的常用方法: 方法 描述 getElementById() 返回带有指定 ID 的元素. getElementsByTa ...
- JavaScript 节点操作Dom属性和方法(转)
JavaScript 节点操作Dom属性和方法 一些常用的dom属性和方法,列出来作为手册用. 属性: 1.Attributes 存储节点的属性列表(只读) 2.childNodes 存储 ...
- JavaScript中易混淆的DOM属性及方法对比
JavaScript中易混淆的DOM属性及方法对比 ParentNode.children VS Node.prototype.childNodes ParentNode.children:该属性继承 ...
- DOM的方法和属性
HTML DOM 方法是我们可以在节点(HTML 元素)上执行的动作. HTML DOM 属性是我们可以在节点(HTML 元素)设置和修改的值. 编程接口 可通过 JavaScript (以及其他编程 ...
- HTML DOM 对象 - 方法和属性
一些常用的 HTML DOM 方法: getElementById(id) - 获取带有指定 id 的节点(元素) appendChild(node) - 插入新的子节点(元素) removeChil ...
- Js位置与大小(1)——正确理解和运用与尺寸大小相关的DOM属性
在web开发中,不可避免遇到要计算元素大小以及位置的问题,解决这类问题的方法是利用DOM提供的一些API结合兼容性处理来,所有内容大概分3篇左右的文章的来说明.本文作为第一篇,介绍DOM提供的与尺寸大 ...
- HTML DOM 属性 对象
HTML DOM 属性 对象 HTML DOM 节点 在 HTML DOM (Document Object Model) 中, 所有的都是 节点: 文档是文档节点 所有 HTML 元素是元素节点 所 ...
- JS1 js获取dom元素方法
js获取dom元素方法 1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId") 其 ...
随机推荐
- Linux显示内存统计最大和最小的详情
Linux显示内存统计最大和最小的详情 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ free -l total used free shared buffe ...
- Flex中的DataGrid报错(一)
1.错误描述 此行的多个标记: -holeNum -1105: 赋值的目标必须是引用值. 2.错误原因 detailWindow.holeNum.toString() = &q ...
- Hibernate【与Spring整合】
前言 前面已经学习了如何使用Spring与Struts2进行整合,本博文主要讲解如何使用Spring对Hibernate进行整合 Spring和Hibernate整合的关键点: SessionFact ...
- Python Web-第四周-Programs that Surf the Web(Using Python to Access Web Data)
1.Understanding HTML 1.最简单的爬虫 import urllib fhand=urllib.urlopen('http://www.dr-chuck.com/page1.htm' ...
- jquery的各种插件调用(有些已经过时,以备注,其他的一些可以闲的时候用作拆解)
jquery的valiteDate验证插件应用 <!DOCTYPE html> <html> < head> < meta ...
- java继承属性相关介绍
这个只需要记住一点,父类的任何属性(变量可以看做属性),子类均可继承并覆盖,allType(father)-->changeAnyType(son)-->AnyType 这是父类的所有代表 ...
- 【BZOJ4009】接水果(整体二分,扫描线)
[BZOJ4009]接水果(整体二分,扫描线) 题面 为什么这都是权限题???,洛谷真良心 题解 看到这道题,感觉就是主席树/整体二分之类的东西 (因为要求第\(k\)大) 但是,读完题目之后,我们发 ...
- 【BZOJ3993】星际战争(网络流,二分答案)
[BZOJ3993]星际战争(网络流,二分答案) 题面 Description 3333年,在银河系的某星球上,X军团和Y军团正在激烈地作战.在战斗的某一阶段,Y军团一共派遣了N个巨型机器人进攻X军团 ...
- Luogu 睡觉困难综合征 ([NOI2014]起床困难综合症)
一.[NOI2014]起床困难综合症 题目描述 网址:https://daniu.luogu.org/problemnew/show/2114 大意: 有一条链,链上每一个节点包含一个位运算f 与 一 ...
- Bzoj2442:修剪草坪
Sol 一个很显然的暴力,设\(f[i]\)表示选到\(i\)的最优效率 每次枚举一段不与前面连续的长度小于\(k\)的区间转移来 # include <bits/stdc++.h> # ...