标签：节点 let querySelector createElement 操作 JSDOM document div
div、p是元素节点，content是文本节点，title是属性节点
创建节点
createElement
创建新元素，接受一个参数，即要创建元素的标签名
let div = document.createElement('div')createTextNode
创建一个文本节点
let text = document.createTextNode("content");createAttribute
创建属性节点，可以是自定义属性
let dataAttr = document.createAttribute('action');
consle.log(dataAttr);
获取节点
getElementById() getElementsByClassName() getElementsByName() getElementsByTagName() getElementsByTagNameNS()querySelector
传入任何有效的css 选择器，即可选中单个 DOM元素（首个）：
document.querySelector('div')
document.querySelector('.class')
document.querySelector('#id')
document.querySelector('[name="username"]')
document.querySelector('div+p>span')querySelectorAll
返回一个包含节点子树内所有与之相匹配的Element节点列表，如果没有相匹配的，则返回一个空节点列表
let lis=document.querySelectorAll('li')更新节点
innerHTML
不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树
let div = document.createElement('div')
div.innerHTML = '123'innerText、textContent
innerText不返回隐藏元素的文本，而textContent返回所有文本
style
DOM节点的style属性对应所有的CSS，可以直接获取或设置
let div = document.createElement('div')
div.style.color='red'添加
innerHTML
let div = document.createElement('div')
div.innerHTML = '<div id="cla">children</div>'appendChild
把一个子节点添加到父节点的最后一个子节点
let div = document.createElement('div')
div.innerHTML = '<div id="cla">children</div>'
div.style.color = 'red'
cla.appendChild(div)
insertBefore
把子节点插入到指定位置的前面
parentElement.insertBefore(newElement,谁)setAttribute
在指定元素中添加一个属性节点，如果元素中已有该属性改变属性值
var div = document.querySelector('id')
div.setAttribute('class', 'red');//第一个参数属性名，第二个参数属性值。删除节点
删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉
// 拿到待删除节点:
const self = document.getElementById('id');
// 拿到父节点:
const parent = self.parentElement;
// 删除:
const removed = parent.removeChild(self);
removed === self; // true删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置
标签：节点,let,querySelector,createElement,操作,JSDOM,document,div 来源： https://www.cnblogs.com/jingxin01/p/16400910.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。