为了获取真实的dom节点，文本输入框必须有一个 ref 属性，然后 thisrefs[refName] 就会返回这个真实的 DOM 节点。
var MyComponent = ReactcreateClass({
handleClick: function() {
thisrefsmyTextInputfocus();
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the text input" onClick={thishandleClick} />
</div>
);
}
});
ReactDOMrender(
<MyComponent />,
documentgetElementById('example')
);
1nodenodeName：查看节点名称（元素节点返回标签名（大写），文本节点返回 #text）
2nodenodeType：查看节点类型（元素节点返回1，属性节点返回2，文本节点返回3）
3nodenodeValue：查看节点的值（元素节点返回null，文本节点返回文本值）
DOM对象集合了HTML标签中能被解析的属性（标准属性）作为DOM对象的属性
查询到的input节点包含了type、name、value等属性，其他未设置值的属性也包含在节点对象中
1nodeoffsetLeft：元素在页面中的水平坐标值
2nodeoffsetTop：元素在页面中的垂直坐标值
3nodeclientWidth：元素在页面视口区域占据的宽度(不含边框)
4nodeclientHeight：元素在页面视口区域占据的高度(不含边框)
5nodeoffsetWidth：元素在页面区域占据的宽度(含边框)
6offsetHeight：元素在页面区域占据的高度(含边框)
7scrollLeft：窗口或者容器内容水平滚动的距离
8scrollTop：窗口或者容器内容垂直滚动的距离
融在第三点最后了
1方法名innerHTML（包含了此方法对应的对象内所有空白文本以及标签在内的所有内容）
2方法名innerText（包含了此方法对应的对象内文本内容且空白文本除外）
1nodegetAttribute()：读取节点的属性值
2nodesetAttribute（）：设置节点属性值
3noderemoveAttribute（）：删除节点的属性
4nodehasAttribute（）：检测节点是否存在某属性
1方法名querySelector（选择器）：按CSS样式查询，返回第一个节点
2nodequerySelectorAll(选择器)：按CSS样式查询，返回所有节点集合
3nodegetElementsByTagName(tname)：查询node下面所有标签名为tname的元素集合
4nodegetElementsByClassName(cname)：查询node下面所有类名为cname的元素集合
1往父节点插入子节点并指定所有元素的后面
父级方法名appendChild（插入的元素）
2往父节点插入子节点并指定在某个子元素的前面
父级方法名insertBefore（插入的元素，插入的元素后的一个元素名）
注意：在dom中插入节点都是基于父节点来完成的
1 父级方法名removeChild（子级元素）：删除父级元素中的子级节点
1父级方法名replaceChild（new，old）：将父级元素中的old节点替换成一个新的new节点
1浅复制：nodecloneNode()：只复制此元素不包含子元素
2深复制：nodecloneNode(true)：复制此元素且包含子元素
1父级元素hasChildNodes() ：检测节点是否含有子节点，包括空白节点
1nodeparentNode：node的父节点
2nodechildNodes ：node所有子节点
3nodechildren：node所有子元素
4nodefirstChild：node的第一个子节点
5nodefirstElementChild：node的第一个子元素
6nodelastChild ：node的最后一个节点
7nodelastElementChild：的最后一个元素
8nodenextSibling：node的下一个兄弟节点
9nodenextElementSibling：node的下一个兄弟元素
10nodepreviousSibling：node的前一个兄弟节点
11nodepreviousElementSibling：node前一个兄弟元素
十四、节点样式 *** 作
1html标签中集合了style的标准属性因此可以使用 DOMstyle访问样式， 注意 它只能访问使用style定义的内联样式，而不能访问内部和外链样式，且访问样式需要使用驼峰替代" - "
2当CSS样式较多时，可以使用DOMcssText来重置。
3windowgetComputedStyle()：返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后，报告元素的所有CSS属性的值
其实和客户端查找某元素的节点是差不多的,只是这里面的代码写在PHP中。
在JS中，如果只是获取class='aaa'的DIV元素，那么只要遍历文档树中的DIV元素，如果要获取class='aaa'的元素，不单是DIV，那么就要遍历整个文档树。我这里就只遍历DIV元素，取出class为'aaa'的DIV元素。且看下面的代码：
-------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" ">
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()
课程目标
理解react的框架使用中，真实dom存在的意义。
使用真实dom和使用虚拟dom的场景。
灵活掌握并能够合理使用 *** 作真实dom的方法。
知识点
react中提供了ref这个属性来获取原生的dom节点，使用方式：在虚拟dom中添加ref属性，即可在组件实例的refs属性中获取该真实dom节点。由于组件实例化的时候，真实dom节点是在最后才生成的。所以，我们获取真实dom节点应该是在componentDidMount这个生命周期中。
class HelloWorld extends Component{
render(){
return <div>
<h1 ref="h">hello world</h1>
</div>
}
componentDidMount(){
consolelog(thisrefsh); // 打印的是h1这个dom节点。
}
}
ref也可以使用在组件标签上使用，此时获取的是该组件标签的组件实例。如下：
class Button extends Component{
render(){
return <button>确定</button>
}
}
let btn = ReactcreateElement()
propsref function
propsref(btn)
class HelloWrold extends Component{
getBtnThis = btn => {
consolelog(btn) // Button组件的第二个组件实例
}
render(){
return <div>
<Button ref="btn"></Button>
/
let btn = new Button()
btnref === typeof function
btnref(btn)
}
findDomNode这个方法可以根据组件实例（每个组件实例都对应的有一段dom节点获取该组）件实例所对应的真实dom节点。该方法的使用如下
/
context 一个组件的组件实例
dom 该组件实例所对应的真实dom节点。
/
const dom = ReactfindDomNode(context);
unmountComponentAtNode该方法的作用是：从 DOM 中移除已经挂载的 React 组件，清除相应的事件处理器和 state。如果在 container 内没有组件挂载，这个函数将什么都不做。如果组件成功移除，则返回 true；如果没有组件被移除1，则返回 false。
const result = ReactunmountComponentAtNode(DOMElement container)
掌握在什么情况下需要真实的dom节点；react的虚拟dom不能实现的原生dom的api的情况，比如：文本框自动聚焦，音频视频相关的api，获取元素的宽高和位置等。基本原则是：能不用真实dom节点尽量不用，实在不能用虚拟dom的时候，才使用真实dom节点。再一种情况是，现有的一些库是针对dom *** 作而构建的，那么想要把这些库和react结合在一起，就必须要使用真实dom节点，比如swiper betterScroll echarts等等。
授课思路
1HTML
知识要点：web工作原理、HTML4及HTML5、常见标签、相对路径与绝对路径、HTML5标签
2CSS+布局
知识要点：CSS基本语法、基本选择器、复合选择器、背景、盒子模型、精灵图、常见网页布局、浮动定位、Flex布局、响应式布局、移动端适配、网页动画、CSS3新特性、Less预处理器
3ECMA基础
知识要点：ECMA基本语法、数据类型、运算符、分支结构、循环结构、函数、常见内置对象的属性和方法、Array、Math、Date、String
4DOM
知识要点：DOM模型、节点类型、节点的基本 *** 作、JS *** 作样式表、克隆节点、获取坐标位置、获取元素尺寸、节点的各种属性和方法。
5BOM+jQuery
知识要点：History、Location、Navigate、定时器、线程、事件循环、web工作原理、性能优化、事件对象、正则表达式、jQuery框架
6vue框架基本语法
知识要点：vue基本语法、双向绑定、组件传值、条件渲染、列表渲染、事件处理、表单绑定、自定义事件、插槽、过渡、动画、动态路由、嵌套路由、编程式导航、导航守卫、路由懒加载、脚手架、生命周期、vuex、axios、ts、vue3
7vue案例
知识要点：将知识点融会贯通到案例中。
8react基本语法
知识要点：react简介、jsx语法、元素渲染、组件和props、state、生命周期、表单、条件渲染、组合继承、hooks、性能优化、redux
9react案例
知识要点：将知识点融会贯通到案例中
新增内容：微信小程序及uni-app框架
知识要点：
小程序框架（配置/程序与页面注册/路由），开发者工具
小程序框架组件学习（基础/视图/表单/地图/媒体/导航/开发能力）
小程序框架组件学习（地图/媒体/导航/开发能力）
小程序API（基础/路由/界面/网络/数据缓存/位置服务）
小程序API（设备/媒体/开放接口/授权/登录/支付）
10Node服务器与数据库及框架
Node原生模块、跨域、安全校验、数据加密、数据库基本 *** 作、express框架、koa框架
以上就是关于react怎么获取dom节点距离文档的top值全部的内容，包括:react怎么获取dom节点距离文档的top值、Dom对象-节点对象、php中怎么利用dom查找到某元素的节点（<div class='aaa')并修改其元素内容等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）