JavaScript基础-----（DOM操作的内容）

Posted 2021-03-16 迷惘~徘徊

查询元素

　　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属性，但是有对应关系