关于JavaScript的DOM操作

Dom

在JS中，存在一种对象叫做dom对象，那么对于dom操作，最熟知的的就是几种。

1. 节点：节点一共分为三种节点，元素节点，属性节点，文本节点

   <div title="hello" class="hello">你好</div>

   以此语句为例，元素节点就是div，属性就是在div标签中的属性，文本就是你好。

   ---

    

2. 那么知道了三种节点，我们就有属性对其进行操作，这些属性不仅仅是可以查看，同时也可以对其进行修改。

   1. tagName（标签名）：

      document.getElementById('hh').tagName//DIV

       

   2. innerHTML（内容）：

      document.getElementById('hh').innerHTML

       

   3. HTML中的属性（包括id，name，title，className）

3. 操作

   1. id：

      document.getElementById()

      返回的是所选对象（单个），因为id仅仅允许一个，不允许重复

   2. name：

      document.getElementsByName()

      返回多个符合规则的内容。

   3. class：返回多个符合类型的内容

      			document.getElementsByClassName()

   4. tagName：

      document.getElementsByTagName()

      以标签名进行dom操作。

在这里所有含有"s"的都是以数组进行存储，因此可以使用数组方法对所需要的dom对象进行操作。

最后一个获取到CSS的样式：

=>在IE浏览器中与谷歌（火狐）浏览器中的方法会有不同，在此给出兼容写法

function getStyle(element , attr){//element为元素节点，attr为需要查询（修改）的Style属性
				return element.currentStyle?element.currentStyle[attr]:getComputedStyle(element)[attr];
				//element.currentStyle[attr] ---这里是IE的操作
				//getComputedStyle(element)[attr] --- 谷歌等其他浏览器的操作
			}

2020.7.10