JS DOM对象

作者: 壬万er | 来源:发表于2017-05-02 19:55 被阅读5次

1.Dom节点

2.获取节点方法

1.document.getElementById("id名")
通过id属性的值查找,返回满足条件的第一个元素

2.document.getElementsByTagName("标签名")
通过标签名来获取页面中的元素。返回的是多个标签。
并不是真正的数组,但是我们可以想操作数组一样操作他(类数组)

3.document.getElementsByClassName("class名")
通过类名来获取页面中的元素。返回的也是多个标签

4.document.getElementsByName("表单元素name")
通过表单的name属性的值来获取元素

5.document.querySelector("div p a")
匹配指定 CSS 选择器的 第一个元素 。 如果没有找到,返回 null。

6.document.querySelectorAll("div")
获取所有满足条件的元素

7.三个特殊节点

Paste_Image.png

8.childNodes 所有节点。包括各种节点

9.fristChild 获取一个元素的第一个子节点

10.lastChild 获取一个元素的最后一个子节点

11.parentNode 获取一个元素的父节点

12.previousSibling 获取一个元素的上一个兄弟节点

13.nextSibling 获取一个元素的下一个节点

14.children 只获取子元素

15.firstElementChild 获取第一个元素子节点

16.lastElementChild 获取最后一个元素子节点

17.nextElementsibling 获取下一个元素兄弟节点

18.previousElementsibling 获取上一个元素兄弟节点

19.parentElement 获取父元素节点

20.childElementCount 获取子元素的个数

2.创建、添加元素节点方法

1.document.createElement(元素名) 创建一个元素节点

2.document.createTextNode("这是新创建的一段文本") 创建一个文本节点

3.appendChild() 添加元素到容器中

4.insertBefore() 在一个节点前插入新节点

5.removeChild() 删除子节点

6.replaceChild() 替换子节点

7.cloneNode() 克隆节点 传入true则复制所有节点

8.setAttribute() 给元素设置属性
参数1:属性的名
参数2:属性的值
如果属性不存在,则添加;存在,则修改

9.romveAttribute() 删除属性
参数:要删除的属性名

10.getAttribute() 获取属性的值
参数:属性名

11.访问 元素 id 名
box.id

12.访问 元素 class 名
box.className
box.classList 类数组

Paste_Image.png

13.获取标签名
box.tagName
box.nodeName

14.innerHTML属性
innerHTML 属性设置或返回标签的开始和结束标签之间的 HTML。
值为为文本

15.innerText属性

16.outerHTML
跟innerHTML相比多包括了一个它自身

3.css脚本化

1.访问行内(内联)样式表

Paste_Image.png

2.内部样式表和外部样式表的获取
getComputedStyle()
参数1:表示样式表所属的元素
参数2:如果获取的是伪元素的样式,传入伪元素,正常元素传入null 或不传

Paste_Image.png Paste_Image.png

兼容性问题

Paste_Image.png

3.获取元素实际的宽高
offsetWidth 宽
offsetHeight 高

Paste_Image.png

4.获取元素参考父容器的left 和 top
offsetLeft 距离左部
offsetTop 距离上部
offsetParent 查找这个元素的参照父容器


Paste_Image.png

相关文章

  • Virtual DOM

    Virtual DOM 虚拟 DOM 普通 JS 对象描述 DOM 对象 DOM 对象:成员多,成本高 虚拟 DO...

  • 理解virtual dom

    Virtual DOM(虚拟 DOM), 是由普通的 JS 对象来描述 DOM 对象,因为不是真实的 DOM 对象...

  • 虚拟DOM

    Virtual DOM Virtual DOM,是由普通的JS对象来描述DOM对象,因为不是真实的DOM对象,所以...

  • Virtual DOM

    什么是 Virtual DOM Virtual DOM(虚拟 DOM),是由普通的 JS 对象来描述 DOM 对象...

  • DOM

    DOM JS的组成 ECMAScript js的基础语法 DOM 文档对象模型 BOM ...

  • DOM对象跟jQuery对象相互转换

    jQuery的DOM对象与普通的DOM对象普通的DOM对象此处指的是:使用JS操作DOM的方法返回的对象jQuer...

  • jquery原理和核心方法学习笔记

    1、jquery的实现原理 2、jquery对象和js对象互换 dom 对象转为jquery对象 $(dom) j...

  • 虚拟DOM的实现

    [维护状态,更新视图]用js对象表示Dom元素js: 表示dom结构为: Virtual DOM 算法,包括几个步...

  • react性能优化的几个点

    关于react的虚拟DOM 虚拟DOM本质上是一个js对象 ,比较js对象,不耗性能 。但是比较真实的DOM, 特...

  • 虚拟 DOM 和 diff 算法

    虚拟 DOM(Virtual DOM) 通过 JS 对象表示 DOM 结构,虚拟DOM 是对 DOM 的抽象 通常...

网友评论

    本文标题:JS DOM对象

    本文链接:https://www.haomeiwen.com/subject/jmcctxtx.html