一、创建节点
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()
当然默认的权重是最低的，实际开发很多时候还是使用三元
React中的DOM也是虚拟DOM（virtual DOM），这点跟我们以前讲的Vue非常类似。只有当它插入文档以后，才会变成真实的DOM。React也是在虚拟DOM发生变化时，进行比对后，只渲染变化的部分，它是React极高性能的主要原因之一。
OK 初始化一下，写个效果是什么呢？就是点击Button的时候，给input添加光标
比较简单不多说，其实我个人在vue中比较喜欢偏向vdom的 *** 作，react还不熟悉！
跪求高手解决啊：现在我的一个项目：需要链接一个别人的页面（不在同一个域），我把这个页面装到我的Iframe里面，但是别人的这个页面是：采用post提交的，我想在我的项目里面监视他的提交，来截取这个post的数据，不通过监视也行，只要获取这个数据就行（jquery的跨域请求只能获取：get方式提交的数据啊，post不行），我把分全部奉上了啊,,
有一定的JS基础后，就可以进入 dom 环节了，dom使得网页的交互效果得到完美呈现，可以说dom真正打开了网页和用户之间的通道桥梁，日常生活中我们点击鼠标，敲击键盘，甚至于无意间触碰到屏幕（触摸屏），都会或多或少或大或小的得到一些躲藏起来的内容。
打开淘宝，在输入框输入商品时，下拉的推荐商品：
或是当打开某个不想再浏览的网页时，右上角的那个×：
这些大部分都存在DOM的身影。
这里的“DOM”，通常来讲，叫做 DOM 文档对象模型 ， 通过 *** 纵DOM，可以随意更改内容，样式，或者增删改查 ，因为网页是在浏览器中显示的，整个浏览器是BOM，所以DOM其实是BOM的一部分，BOM 就是 window对象 ，DOM 就是 document（文档）对象。
如果该元素，是网页的必备元素，而且只能有一个，可以通过document对象直接获取。比如：的src属性：
任由我们怎么去修饰的显示，但它本身的路径属性是独有的，所以我们可以直接获取：
更多的时候，我要需要获取网页中的指定元素，这就需要专门的方法来获取了，这里列举几个方法：
getElementById()方法，根据元素的id属性值来获取指定的元素，因为ID的唯一性，使得该方法需要搭配ID选择器使用，如果网页里ID重复时，它会获取第一个：
getElementsByTagName()方法，根据元素的标签名获取所有该元素，该方法获取的是所有该标签的元素，以伪数组的形式呈现：
getElementsByClassName()方法，根据元素的类选择器名称获取所有该元素，该方法获取的途径是标签的类，也就是class属性，由于拥有该属性的标签可能不只一个，所以该方法获得的也是一个伪数组（还有，可以看方法名，凡是带Elements的大多数都是伪数组）：
getElementsByName()方法，根据元素的name属性值获取所有该元素，相同的性质，有name属性的标签也不少：
querySelector()方法，根据选择器的名称返回元素，如果有多个元素，只返回第一个元素，这个方法就比较常用了，而且IE这个啥也不咋适配的浏览器现在几乎不咋能见到了，可以多多考虑用他了该方法是 ES6新增，无论是ID 还是class都可以选，但是和上面区别的是选ID时前面要加#号，选class时前面要加“”：
区别于Elements，这里是个单数，所以只会获取一个，要是想获取多个相同的，就用querySelectorAll()吧！querySelectorAll()看这个ALL就知道它是用来选全部的：
最后这俩方法更实用，可以选取CSS几乎所有选择器，而且querySelectorAll()得到的数组数据后还可以使用数组的方法。
*** 作DOM的样式 ，有多种方式：
通过style属性直接设置
通过className属性设置类选择器
也可以通过classList属性添加多个类选择器
*** 作DOM的内容：
innerText属性，用于获取 和 *** 作 DOM的文本内容。
innerHTML属性，用于获取 和 *** 作 DOM的HTML内容：
createElement()方法，用于创建DOM元素：
appendChild()方法，用于在当前DOM元素中添加子元素：
自删 remove()方法，是元素删除自己:
通过父级删除子级 removeChild()方法，是删除元素里面指定的子元素:
jquery中获取当前dom元素的子元素的方法有很多，常见的方法是使用children()方法或者fand()方法都是可以获取到某个元素的子元素的,children() 方法返回匹配元素集合中每个元素的子元素，find()方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。
工具原料：jQuery、编辑器、浏览器
一、使用children()方法获得子元素
1、使用该方法获取子元素并设置子元素的字体为蓝色，代码如下：
<!DOCTYPE html><html>
<head>
<script type="text/javascript" src="/jquery/jqueryjs"></script>
<style>
body { font-size:16px; font-weight:bolder; }
p { margin:5px 0; }
</style>
</head>
<body>
<div>
<span>Hello</span>
<p class="selected">Hello Again</p>
<div class="selected">And Again</div>
<p>And One Last Time</p>
</div>
<script>$("div")children("selected")css("color", "blue");</script>
</body>
</html>
2、运行的效果如下图：
二、使用find()方法获取子元素
1、使用fand()方法获取子元素并且进行选择器的筛选，代码如下图：
<!DOCTYPE html><html>
<head>
<script type="text/javascript" src="/jquery/jqueryjs"></script>
</head>
<body>
<p><span>Hello</span>, how are you</p>
<p>Me I'm <span>good</span></p>
<script>
$("p")find("span")css('color','red');
</script>
</body>
</html>
2、运行的结果如下图：
一、问题引入
原项目把一块内容直接写在了模块中（浏览器显示的一整个页面），现在想把它提成一个单独组件，而且把其中使用 documentgetElementById('id') 改为 ref 获取元素的形式。
单独创建一个 vue 组件，通过绑定传值，触发页面变化从而触发 beforeUpdate 。
然后发现 beforeUpdate() 中根本获取不到此元素，用原生js获取也不行。
三、解决
1、 beforeUpdate() 生命周期函数中，在获取元素语句外套用 this$nextTick(function(){}) 。（ mounted 无效，原因待查明）
官方解释：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。即DOM真正加载完成。
##1访问/获取节点
documentgetElementById(id); //返回对拥有指定id的第一个对象进行访问
documentgetElementsByName(name);//返回带有指定名称的节点集合 注意拼写:Elements
documentgetElementsByTagName(tagname);//返回带有指定标签名的对象集合 注意拼写：Elements
documentgetElementsByClassName(classname); //返回带有指定class名称的对象集合 注意拼写：Elements
##2创建节点/属性
documentcreateElement(eName);//创建一个节点
documentcreateAttribute(attrName); //对某个节点创建属性
documentcreateTextNode(text); //创建文本节点
##3添加节点
documentinsertBefore(newNode,referenceNode); //在某个节点前插入节点
parentNodeappendChild(newNode);//给某个节点添加子节点
##4复制节点
cloneNode(true | false);//复制某个节点 参数：是否复制原节点的所有属性
##5删除节点
parentNoderemoveChild(node);//删除某个节点的子节点 node是要删除的节点
注意：为了保证兼容性，要判断元素节点的节点类型(nodeType)，若nodeType==1，再执行删除 *** 作。通过这个方法，就可以在 IE和 Mozilla 完成正确的 *** 作。
nodeType属性可返回节点的类型最重要的节点类型是：
元素类型节点类型
元素element 1
属性attr 2
文本text 3
注释comments 8
文档document 9
##6修改文本节点
方法作用
appendData(data);将data加到文本节点后面
deleteData(start,length);将从start处删除length个字符
insertData(start,data);在start处插入字符,start的开始值是0;
replaceData(start,length,data);在start处用data替换length个字符
splitData(offset);在offset处分割文本节点
substringData(start,length);从start处提取length个字符
##7属性 *** 作
getAttribute(name)//通过属性名称获取某个节点属性的值
setAttribute(name,value); //修改某个节点属性的值
removeAttribute(name); //删除某个属性
##8查找节点
parentObjfirstChild;//如果节点为已知节点的第一个子节点就可以使用这个方法。此方法可以递归进行使用 parentObjfirstChildfirstChild
parentObjlastChild;//获得一个节点的最后一个节点，与firstChild一样也可以进行递归使用 parentObjlastChildlastChild
parentObjchildNodes; //获得节点的所有子节点，然后通过循环和索引找到目标节点
##9获取相邻的节点
curtNodepreviousSibling; //获取已知节点的相邻的上一个节点
curtNodenextSlbling; // 获取已知节点的下一个节点
##10获取父节点
childNodeparentNode;//得到已知节点的父节点
##11替换节点
replace(newNode,oldNode);
在以往的工作当中，通常会遇到需要处理 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 节点。
以上就是关于js *** 作节点的DOM方法全部的内容，包括:js *** 作节点的DOM方法、React（八）—— 获取真实DOM、js怎么获取iframe页面中的dom元素等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）