一、DOM
0. js的三大组成部分的关系
- ECMAScript规定,如何在BOM中操作DOM
1. 介绍
-
DOM文档对象模型,对象:document
- DOM(W3C机构)不属于BOM(浏览器厂商)
- window对象身上有提供document对象
- DOM,主要控制页面(html文件),所有的页面操作都需要通过DOM
- DOM的结构:html的结构:树形结构,包含结构,家族结构(父子级,兄弟级)
- html根元素:head,body
- DOM树形结构,的每个组成部分,都叫节点(元素,属性,注释,文本)
- 所有节点,都是对象
- js做交互,行为,页面(DOM),哪个元素,选择器,属性,内容,样式,元素等等
-
选择器
-
元素节点选择器(只有元素节点)
-
直接选择器
- id选择器:document.getElementById(“id名”)
- class选择器:document.getElementsByClassName(“class名”)
- tag选择器:document.getElementsByTagName(“tag名”)
- name选择器:document.getElementsByName(“name名”)
- ES5新增选择器:
- querySelector选择器:document.querySelector(“css选择器”)
- querySelectorAll选择器:document.querySelectorAll(“css选择器”)
- 总结:
- 返回单个元素:
- id,querySelector
- 返回数组:
- class,tag,name,querySelectorAll
- 返回单个元素:
-
关系选择器:先有基准元素
- 父子关系(母女关系)
- 父选子:先拿到父
// 父选子:先拿到父 var olist = document.querySelector(".list"); // var olist = document.getElementsByClassName("list")[0]; console.log(olist); // 第一个子: console.log(olist.firstElementChild); // 最后一个子: console.log(olist.lastElementChild); // 所有子: console.log(olist.children); // 其他的子: // console.log(olist.children[索引]);
- 子选父:先拿到子
// var oEm = document.querySelector("em"); var oEm = document.getElementsByTagName("em")[0]; // 子选父:一个!直接的父级! console.log(oEm.parentNode); console.log(oEm.parentNode.parentNode);
- 父选子:先拿到父
- 兄弟关系(姐妹关系)
// 先选择当前 var olist = document.querySelector(".list");
- 哥:谁的哥(上一个兄弟)
// 上一个(哥): console.log(olist.previousElementSibling);
- 弟:谁的弟(下一个兄弟)
// 下一个(弟): console.log(olist.nextElementSibling);
- 父子关系(母女关系)
-
-
节点选择器(元素,属性,注释,文本)
-
元素,注释,文本,参与了父子或兄弟关系
- 利用关系选择
- 父元素节点.childNodes
- 当前元素.previousSibling
- 当前元素.nextSibling
- 节点的过滤属性:见1.3
-
属性,没有参与这种家族关系,更像是元素身上的衣服
- 单独选择器
- 当前元素.attributes
- 节点的过滤属性:见1.3
-
节点选择器和节点的过滤属性,一般只用来做选择或过滤,不用来做修改等操作,有单独的操作方法
-
-
-
节点的过滤属性
nodeType | nodeName | nodeValue | |
---|---|---|---|
元素 | 1 | 大写标签名 | null |
文本 | 3 | #text | 文本内容 |
注释 | 8 | #comment | 注释内容 |
属性 | 2 | 属性名 | 属性值 |
根document | 9 | document | null |
- 操作:增删改查
-
属性操作
-
可见属性
-
内置:只要是系统提供的,在标签身上直接写的,还具有功能,就是内置的可见属性
- 对象操作:1点语法;2中括号语法
- 也可以使用:getAttribute、setAttribute、removeAttribute
- 特殊的属性:
- class:要使用className操作
- style:样式,值是个对象
-
非内置:在标签身上直接写的,但是不具有默认功能,就是自定义的可见属性
- 元素.getAttribute(“要获取的属性名”)
- 元素.setAttribute(“要设置的属性名”,“属性值”)
- 元素.removeAttribute(“要删除的属性名”)
-
内置的可见属性,有很多,其实就是html属性,不一一列出了(见9html属性介绍.html),只要记住如何操作即可
-
-
不可见属性
- 内置:不用写在标签身上,系统提供,具有功能
- 对象操作:1点语法;2中括号语法
- 非内置:放飞自我,看不见的自定义属性,其实就是将元素,作为一个对象数据,进行操作
- 元素是个对象,对象可以用来存储数据,多存储一些
- 对象操作
- 注意:小心点,别和内置的重复了
- 内置:不用写在标签身上,系统提供,具有功能
-
-
样式操作
-
元素操作
-