document.querySelectorAll()返回一个节点列表（有点像数组），如果你确定只会有一个节点列表，你有几个选择。
1)请改用.querySelector：

// returns the first node that matches
var elm = document.querySelector('div[class~="one"]');
console.log(elm.id);

2)访问返回列表中的第一个元素：

// returns all nodes that match
var elms = document.querySelectorAll('div[class~="one"]');
console.log(elms[0].id);

确保.querySelector的返回检查为空，.querySelectorAll的返回检查为长。
还要注意的是，我使用的是~=而不是^=，你可以从on the MDN中看到所有等式运算符之间的区别，但是对于这两个：
[attr~=value]表示一个属性名为attr的元素，其值是一个用空格分隔的单词列表，其中一个单词正好是“value”。
[attr^=value]表示属性名为attr且第一个值以“value”为前缀的元素。

首先从DOM获取元素，然后从该元素获取id属性：
1-如果你只需要第一个元素，那么就像这样使用querySelector：

let elms = document.querySelector('div[class~="one"]')[0].id
console.log(elms)

2-如果你需要所有拥有这个类的元素，那么就像这样使用querySelectorAll：

let elms = document.querySelectorAll('div[class~="one"]')

for(let i=0; i<elms.length; i++)
{
console.log(elms[i].id)
}

我认为带“*”的情况更多

document.querySelector('div[class*="words"]')

我试过了，效果非常好

window.frames[0].document.querySelector('td[id*="sss"]')