JavaScript基础-----(DOM操作的内容)

Posted 迷惘~徘徊

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript基础-----(DOM操作的内容)相关的知识,希望对你有一定的参考价值。

查询元素

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

以上是关于JavaScript基础-----(DOM操作的内容)的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript DOM 基础

JavaScript学习 - 基础 - DOM操作

day29—JavaScript中DOM的基础知识应用

JavaScript基础

JavaScript基础-----(DOM操作的内容)

JavaScript基础及函数,BOM,DOM的节点及DOM节点操作