JS DOM对象

1documentgetElementById("id名")

通过id属性的值查找，返回满足条件的第一个元素

2documentgetElementsByTagName("标签名")

通过标签名来获取页面中的元素。返回的是多个标签。

并不是真正的数组，但是我们可以想 *** 作数组一样 *** 作他（类数组）

3documentgetElementsByClassName("class名")

通过类名来获取页面中的元素。返回的也是多个标签

4documentgetElementsByName("表单元素name")

通过表单的name属性的值来获取元素

5documentquerySelector("div p a")

匹配指定 CSS 选择器的 第一个元素 。 如果没有找到，返回 null。

6documentquerySelectorAll("div")

获取所有满足条件的元素

7三个特殊节点

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

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

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

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

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

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

14children 只获取子元素

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

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

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

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

19parentElement 获取父元素节点

20childElementCount 获取子元素的个数

1documentcreateElement(元素名) 创建一个元素节点

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

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

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

5removeChild() 删除子节点

6replaceChild() 替换子节点

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

8setAttribute() 给元素设置属性

参数1：属性的名

参数2：属性的值

如果属性不存在，则添加；存在，则修改

9romveAttribute() 删除属性

参数：要删除的属性名

10getAttribute() 获取属性的值

参数：属性名

11访问 元素 id 名

boxid

12访问 元素 class 名

boxclassName

boxclassList 类数组

13获取标签名

boxtagName

boxnodeName

14innerHTML属性

innerHTML 属性设置或返回标签的开始和结束标签之间的 HTML。

值为为文本

15innerText属性

16outerHTML

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

1访问行内（内联）样式表

2内部样式表和外部样式表的获取

getComputedStyle()

参数1：表示样式表所属的元素

参数2：如果获取的是伪元素的样式，传入伪元素，正常元素传入null 或不传

兼容性问题

3获取元素实际的宽高

offsetWidth 宽

offsetHeight 高

4获取元素参考父容器的left 和 top

offsetLeft 距离左部

offsetTop 距离上部

offsetParent 查找这个元素的参照父容器

下面是几个适合使用 refs 的情况：

管理焦点，文本选择或媒体播放。--- *** 作DOM

触发强制动画。

集成第三方 DOM 库。

1 thisrefs 字符串—已废弃—依然可以用

2 ReactcreateRef() 推荐使用-React163

import React, { Component } from 'react'

export default class App extends Component {

  constructor(){

    super();

    thismyInput=ReactcreateRef();

  }

  handdleClick=()=>{

    consoledir(thismyInputcurrent);

    thismyInputcurrentfocus();

  }

  render() {

    return (

      <div>

        <input type="text" ref={thismyInput} />

        点击让文本框获得焦点

      </div>

    )

  }

}

3 回调函数 ref={回调函数}

import React from 'react'

//孙子

function GrandCihld(props) {

  return (

      <div>

);

}

//儿子

function Child(props) {

return (

  <div> My input: <GrandCihld inputRef={propsinputRef} /></div>

);

}

//父亲

class App extends ReactComponent {

  handdleClick=()=>{

    consolelog("thisinputElement",thisinputElement);

    thisinputElementfocus();

  }

render() {

  return (

    <div>

      <Child inputRef={el => {

                thisinputElement = el;

                consolelog("匿名函数被调用了");

              }} />

      点击获取焦点

    </div>

  );

}

}

export default App;

js *** 作节点的DOM方法

一、创建节点

createElement

createTextNode

二、添加、删除、替换、克隆元素

1、appendChild

2、insertBefore

3、如果appendChild、insertBefore追加的是已经存在的子元素，实际上就会将子元素位置移动

4、删除节点remove removeChild

remove()

removeChild

5替换节点

replaceChild

6、克隆节点

cloneNode()

三、 *** 作元素属性的方法

1获取属性 元素属性名

2设置属性 元素属性名 = 属性值

1、2方法只能获取和设置元素自带的属性

3 *** 作属性的万能方法

getAttribute()

setAttribute()

在以往的工作当中，通常会遇到需要处理 DOM 的时候， DOM *** 作属于一个常规的范畴，我们可能需要通过它绑定一个事件、调整滚动条的位置、管理焦点、文本选择、媒体播放等等。

基于工程页面、逻辑复杂性、复用性等等因素可以选择合适的方案方便我们 *** 作 DOM 。

在页面比较简单和逻辑并不复杂的时候，我们可以根据实际情况选择比较简单的选择器方案；当工程逻辑较复杂的时候，我们要考虑组件的复用性、多人协作的不可控性等多种因素，选择方案的时候往往要考虑更多可能的场景。

如上所述，如果我们的使用场景单一，不需要复用的话，我们可以保证获取的 DOM 一致性的时候，可以考虑使用选择器获取 DOM 。

可以使用 documentgetElementXX 开头的方法：

可使用方法如下：

实际使用场景：

页面逻辑复杂的时候会有复用性的问题，如果使用 id 或者选择器就容易引发问题，这时我们可以选择使用 ref 。

ref 可以获取到相应的 DOM 节点，而且也可以得到详细信息，它得到的一个对象，包括 props，state 等。

React 会在组件挂载时给 current 属性传入 DOM 元素，并在组件卸载时传入 null 值。 ref 会在 componentDidMount 或 componentDidUpdate 生命周期钩子触发前更新。

ref 的值根据节点的类型而有所不同：

React 也支持另一种设置 refs 的方式，称为“回调 refs”。

不同于传递 createRef() 创建的 ref 属性，你会传递一个函数。这个函数中接受 React 组件实例或 HTML DOM 元素作为参数，以使它们能在其他地方被存储和访问。

React 将在组件挂载时，会调用 ref 回调函数并传入 DOM 元素，当卸载时调用它并传入 null。在 componentDidMount 或 componentDidUpdate 触发前，React 会保证 refs 一定是最新的。

父组件想要 *** 作子组件且没有控制权的时候可以选择使用 findDOMNode 。

findDOMNode 只在已挂载的组件上可用（即：已经存在 DOM 中的组件）。如果尝试调用未挂载的组件将会引发异常。

findDOMNode 不能用于函数组件。

如果组件已经被挂载到 DOM 上，此方法会返回浏览器中相应的原生 DOM 元素。此方法对于从 DOM 中读取值很有用，例如获取表单字段的值或者执行 DOM 检测。

当组件渲染的内容为 null 或 false 时，findDOMNode 也会返回 null。当组件渲染的是字符串时，findDOMNode 返回的是字符串对应的 DOM 节点。从 React 16 开始，组件可能会返回有多个子节点的 fragment，在这种情况下，findDOMNode 会返回第一个非空子节点对应的 DOM 节点。

这周做一个页面时，有一个人物排序，可以手动拖动更改排序位置的功能。在经过查找之后，找到了

sortablejs ,它可以用来实现这个拖拽的功能。

在查看 sortablejs 官方文档时，看到里面中有一个 onUpdate 事件，拖拽改变位置后，其中的返回值中，就有着起始index值和改变后的index值，通过这个，就可以更改数组的内容，来达到拖拽后改变位置的功能。

这里获取的节点是需要拖拽列表的父节点

因为在做的过程中，发现如果用 *** 作dom节点的位置去修改item的顺序时，会产生bug，所以经过查找资料，终于在 Vue中使用Sortable 找到了问题所在，因此在修改item顺序前，应先修改其对于的节点。

先删除移动的节点，在将移动的节点插入到原有的节点中

注意：因为当从下向上拖动时，节点会增加一个，所以原有的索引值会少一位，所在当 newIndex < oldIndex 时，因使用 oldLi 节点的下一个节点

删除原有数组，并且存储数据

将数据添加到停留的数组索引值上

可以做一个设想，如果dom节点的删除不通过父节点来寻找字节点，那么就需要每一个dom元素都有一个id，这样才能找到这个节点。

如果真的每一个元素都有一个id，那么每次删除元素都要遍历整个文档以搜寻到这个id所对应的元素。

而就目前的dom结构，指定了父元素之后，遍历的范围就会限制在父元素所包含的范围内，速度无疑更快。

在react中，我们已经知道，组件并不是真实的DOM节点，而是通过虚拟DOM渲染出来的节点，只有当它被插入到文档后，才成为了真实的DOM。

要从组件中获取真实的DOM节点，则可在jsx标签中加入ref属性

<script type="text/babel">

var Hello=ReactcreateClass({

showThis:function(){

//通过thisrefsusername拿取到了ref为username的元素节点

consolelog(thisrefsusernamevalue)

},

render:function(){

return (

<div>

<input type="text" ref="username" onChange={thisshowThis}/>

</div>

)

}

});

ReactDOMrender(

<Hello />,

documentgetElementById("box")

)

</script>

以上就是关于JS DOM对象全部的内容，包括:JS DOM对象、react获取真实DOM节点:、js *** 作节点的DOM方法等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！