查询元素
1.直接访问指定节点的方法
getElementById():返回一个节点对象 id
getElementByName():返回多个(节点数组) 名字
getElementByTagName():返回多个(节点数组) 标签名
2.间接根据层次关系查找节点
父节点
parentNode
孩子节点
childNodes 数组对象,表示该节点的多有子节点的集合
firstChild lastChild
兄弟节点
nextSibling previousSiBling
操作文本
1.对于<p></p>、<hn></hn>、<div></div> <span></span>等标签,操作内部文本都使用innetHTML或者innerText
对于表单项input、select等标签,获取值使用value(属性的操作)
对于img等标签,不涉及文本
2.innerHTML 指的是从对象的起始位置到终止位置的全部内容,包括html标签
innerText 指的是从起始位置到终止位置的内容,但它能去除HTML标签
操作属性
方法1:setAttribute(属性名,属性值)和getAttribute(属性名)
方法2 .属性名
方法1可以对自定义属性进行操作;但是方法2只能对标准属性进行操作
操作元素
创建节点的方法
document.createElement("div")
加入节点的方法
parentNode.appendChild(childElement): 末尾追加式插入节点
parentNode.insertBefore(newNode,beforeNode): 在指定节点前插入新节点
删除节点方法
parentNode.removeChild(childNode)
替换节点方法
parentNode.replace(newNode,oldNode)
操作css
使用style对象操作css
每个style对象对应为该元素指定的css,而每个css属性-对应于style对象的属性
对于单个单词的css属性,在style对象中的属性名称不变
对于双单词或多单词属性改写为驼峰命名法。例font-size 为fontSize
注意:是JavaScript的style对象,不是html标签的style属性,但是有对应关系
原文地址:https://www.cnblogs.com/skyline1/p/12184726.html