JavaScript如何获取按钮所在的div元素

这要分两种情况：

1、按钮在div中。

我们可以通过：

var btn = documentgetElementById("btn");//获取按钮节点

var div = btnparentNode;//获取di元素，当然不一定div就是按钮的父元素，可以通过parentNode向上查找，最好还是给div加一个id2、按钮不在div中

我们可以通过：

//以上这种情况最好给div加一个id,通过以下方式获得

var div = documentgetElementById("div")

//如果不想加的话，以下方式

var divs = documentgetElementsByTagName("DIV");

var div = divsitem(n);//n表示要取的div,从0开始

之所以会造成卡顿，是因为该组件是一次性将所有数据全部渲染，dom数量过于庞大，并且在展开树 *** 作的时候，用了大量递归循环语句，性能受到严重影响，造成卡顿。

我想到的解决方式有两种：

一：分页，让后端添加分页查询，以节点数统计数据条数进行展示。（但实际需求中较少，一般树形表格都是不分页）。

二：将请求到的树形数组数据备份（tableDataCopy），初始化仅仅展示指定层级（如第一层树）的数据，将第一层下面的所有的children全部置为null，并记录存在children的节点，设置hasChild的状态，判断是否存在子节点。这样就不会在初始化页面时展示完所有数据，实现按需加载。

        以上仅仅能满足展示功能，当存在 *** 作节点上移下移/删除/编辑等 *** 作的情况下，展示的节点就不能同步刷新（因为备份数据不能双向数据绑定了）。处理办法：更新节点（两种方式，第一种使用render()来实现，第二种是给表格绑定key（利用diff算法），只要 *** 作了数据，就改变key就能实现节点更新）。

请求数据和展开代码如下：

// 获取树形列表

getList(active) {

thisloading = true;

let data = Objectassign({}, thissearchForm);

APIgetDepartmentListAll(data)

then((res) => {

// thistableData = resdata;

thisexpandRowpush(resdata[0]id); //默认展开

thistableDataCopy = resdata || [] // 备份的全量数据

if (active) { //是否是 *** 作按钮点击的数据

thistableData = thiscommonJsmapNewTableData(resdata,thisexpandRow); //展开已展开的数据

} else {

thistableData = thiscommonJsmapNewTableData(resdata,resdata[0]id); //默认展开第一层

}

thiscomponentKey += 1; //销毁更新dom

})finally(() => {

thisloading = false;

thisgetTableHeight();

})

},

// 展开按钮

getChildrens(tree, treeNode, resolve) {

let data = Objectassign({}, thissearchForm, {

deptId: treeid

});

APIgetDepartmentListAll(data) //传入展开按钮层级节点的id，获取子节点

then((res) => {

thistableDatas = JSONparse(JSONstringify(resdatachildren))map(item => { // 展示数据

// hasChildren 表示需要展示一个箭头图标

itemhasChildren = itemchildren && itemchildrenlength > 0

// 只展示一层也可以配置tree-props里面的children为其他字段

itemchildren = null

// 记住层级关系

itemidList = [itemid]

return item

})

resolve(thistableDatas)

})

},

登录后复制

当存在 *** 作按钮，数据更新后，利用上述key更新节点后 ，会将展开的状态初始为初次进度页面的状态，不能停留在 *** 作的节点。解决方法：可以在点击 *** 作按钮的时候，使用findParentNode方法递归查询到该节点所有的祖先节点id并记录（expandRow，该变量也是树形表格:expand-row-keys默认展开的数据），然后再请求刷新数据时，通过mapNewTableData()方法递归处理将对应的祖先节点id对应的children给展示处理，其他的节点还是一样的置为null。代码如下：

/

@param 递归，当前节点的祖先节点id数组（包含自身）

acceptUnitNodes树状结构数据，ids当前节点的id

/

findParentNode(acceptUnitNodes, ids) {

var parentNodes = [] // 所有父节点

var forfun = function(id, nodes) {

for (var i = 0; i < nodeslength; i++) {

var currentNode = nodes[i]

if (currentNodeid === id) {

return currentNodeid

} else if (currentNodechildren) {

var validNodeId = forfun(id, currentNodechildren)

if (validNodeId && parentNodesindexOf(validNodeId) < 0) {

parentNodespush(validNodeId)

}

if (validNodeId) {

return currentNodeid

}

}

}

}

var validNodeId = forfun(ids, acceptUnitNodes)

if (validNodeId && parentNodesindexOf(validNodeId) < 0) {

parentNodespush(validNodeId)

}

return parentNodes

},

//递归处理数据，当有展开记录的时候，将有展开记录的数据的子节点显示出来

mapNewTableData(data, pidArr) {

let dataNew = JSONparse(JSONstringify(data));

function mapNewArr(dataNew, pidArr) {

dataNewmap(item => {

if (pidArrindexOf(itemid) === -1) {

itemidList = [itemid]

itemhasChildren = true

itemchildren = null

// 记住层级关系

return item;

} else {

mapNewArr(itemchildren, pidArr)

}

})

return dataNew;

}

mapNewArr(dataNew, pidArr);

return mapNewArr(dataNew, pidArr);;

},

登录后复制

*** 作按钮：

//上移//下移

upDownLayer(index, row, type) {

thisexpandRow = (thiscommonJsfindParentNode(thistableDataCopy, rowid))splice(1); //调工具，获取点击当前节点的祖先节点id数组。

let loading = Loadingservice({

target: documentquerySelector("tableBox"),

});

你的意思是点击Button删除表格的一行信息！

首先在方法开始的时候获得整个表格的dom信息

然后在用this传值到方法中获得当前行的信息

最后用获取到的表格deleterow（获取到的行的值）；

参考代码：

function Remove(fontobj){

var obj=$('#myTable');

var n=fontobjparentNodeparentNodeparentNoderowIndex;

objdeleteRow(n);

}

您可以使用 ElementparentNode 属性来获取元素的父级。

您还可以将它们串在一起以提升几个级别。

您可以使用 Elementclosest() 方法获取与选择器匹配的 DOM 树上最近的父级。

Elementclosest() 方法从元素本身开始。您可以通过将第一个父元素与 NodeparentNode 属性配对来开始。

可能最常用的是使用 Elementclosest() 方法来检查元素是否在某个父元素中。

它与事件侦听器的事件委托配合时特别有用。

例如，假设您有一些按钮，其中包含一些嵌套的 HTML，如下所示。

你的 JavaScript 监听这些按钮的点击看起来像这样。

这将永远不会运行，因为点击事件的目标几乎总是 text-large 或 text-small 元素。仅当您单击按钮中的文本之外时才有效。

为了解决这个问题，我们可以使用 Elementclosest() 方法。

Elementclosest() 方法有很多用途 ，这只是其中之一。

使用 closest 和 matches 方法来检测元素是否存在某选择器

你好，出现这个问题是复制方式不对的。

如果直接复制html代码（你图上的<html></html>这些就属于Html代码），需要在源代码模式下复制。

具体 *** 作：点 百度编辑器上的第一个按钮html，然后再复制代码。下图的红色部分。

复制完后，再次点一下html按钮，就是所见即所得的内容。

当然你可以在源码模式下直接提交内容。

以上就是关于JavaScript如何获取按钮所在的div元素全部的内容，包括:JavaScript如何获取按钮所在的div元素、elementui表格更新卡住、javascript中,已知一个button的ID，找这个button的父节点的父节点找不到。好心人帮下忙等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！