JavaScript学习Day12笔记

Day12笔记

一、DOM控制节点

DOM动态新增节点

// 创建元素节点。
document.createElement('元素节点名')

// 创建文本节点。
document.createTextNode('文本节点内容')

DOM移除节点

// 移除父元素节点中的某个子节点。
parentNode.removeChild(removeNode)

// 移除节点。
removeNode.remove()

DOM插入节点

// 给父元素节点追加子节点。
parentNode.appendChild(newNode)

// 在父元素节点中某个子节点前面插入一个新的子节点。
parentNode.insertBefore(newNode,beforeNode)

DOM复制节点

// 通过boolean来控制复制的节点。
// 当boolean == 1/ture  =>  该节点的所有子节点也会被一起复制。
// 当boolean == 0/false  =>  只会复制节点本身。
nodeEle.cloneNode(boolean)

DOM替换节点

// 将父元素节点中的某个子节点替换成新的子节点。
// 相当于先将父元素节点中的一个子节点删除，再新增一个子节点。
parentNode.replaceChild(newNode,oldNode)

二、DOM控制HTML属性

新增属性

// 给该节点设置class属性，并赋class属性值。
nodeEle.className = 'class属性值'

// 给该节点增加class属性，并赋增加的class属性值。
nodeEle.classList.add('class属性值')

// 给节点设置CSS属性，并赋属性值。
// 属性值命名规则遵守驼峰命名。
nodeEle.style.属性名 = '属性值'

// 给节点设置CSS属性，并赋属性值。
// 此方法添加的属性在html中会显示，removeAttribute可以移除。
nodeEle.setAttribute('属性名','属性值')

// 获取节点中指定属性的属性值。
nodeEle.getAttribute('属性名')

// 不依靠节点，单独创建一个属性，属性值为空。
var attributeNode = createAttribute('属性名')
// 再给该属性赋属性值。
attributeNode.value = ('属性值')
// 给节点增加属性。
nodeEle.setAttributeNode('attributeNode')

// 给节点新增属性并赋属性值
// 此方法添加的属性不会在html中显示，removeAttribute无法移除此方法添加的属性。
nodeEle.属性名 = '属性值'

移除属性

// 移除节点的某个class属性值。
nodeEle.classList.remove('class属性值')

// 移除节点的某个属性。
// 无法移除通过nodeEle.属性名 = '属性值'添加的属性。
nodeEle.removeAttribute('属性名')