前端学习笔记之——DOM基础

记录一下学习DOM基础的过程啦.

1.Doucment.getElementById("id");

2.Doucment.getElementsByTagName("tag");

3.element.sytle.styleName="styleValue";

4.element.innerHTML

5.element.getAttribute("attribute")

6.element.className

7.element.setAttribute("attribute" , "value")

8.element.removeAttribute("attribute");

 

-------------------------1.Doucment.getElementById();-------------------------

功能:该方法是用来找到对应id的元素滴~;

返回一个:DOM的对象(元素);

(tips:通过该方法我们就可以通过给对应的元素进行设置啦; var sample = document.getElementById( "first" );)

 

 

-------------------------2.Doucment.getElementsByTagName("tag");------------------------

功能:返回一个  [所有和tag有关的元素的]  集合

所以是返回一个数组啦.访问数组元素就是Array[i];

(tips:tag的值可以是<ul>下面的所有<li>;或者有相同class的<div>,<span>... ...)

例:<div class="good" id="a">啊</div>
    <div class="good" id="b">哦</div>
    <div class="good" id="c">额</div>

var divs = document.getElementsByTagName("good");//divs是数组

或者var divs = document.getElementsByTagName("div");

访问就逐个元素访问咯;divs[1]... ...

 

 

-------------------------3.element.sytle.styleName="styleValue";------------------------

功能:设置element元素的CSS样式;

tips:

(1)element就是上述1.2方法得到的DOM对象(元素);

(2)一定要写.style; 

(3).sytleName要去掉杠杠用驼峰法进行书写.

(4)sytleValue一定要用引号.

正确实例:divs[1].style.color = "red";  div[2].style.backgroundColor = "green";

 

 

-------------------------4.element.innerHTML------------------------

功能:获取(返回)element标签内所有的HTML文本.(包括包含在里面的标签);

用法:

divs[1].innerHTML = divs[1].innerHTML + ",我是增加的";

//这句话的意思是将原来divs[1]内的文本"哦";改成    "哦,我是增加的".

 

 

-------------------------5.element.getAttribute("attribute")------------------------

功能:该方法用来获取element元素的"attribute"(任何属性)属性的值滴;

返回:会返回attribute属性的值咯.//  console.log(divs[1].getAttribute("id");)

 

用法:

(1)div[1].getAttribute("id") 

(2)div[1].id; 返回:b   //两种方法获取div[1]这个元素的id属性的值;

     第二种的访问方法仅限于div标签原本具有(包含)的属性;自定义的属性不能用这种方法访问

<div class="good" id="b" style="color = green;" >哦</div>

tips如果有设置的话id,sytle,class他们的属性都可以读出来.

 

 

-------------------------6.element.className-----------------------

功能:该方法专门用来获取class类的属性值;

返回:类的属性(多个也行);//当你去打印的时候console.log(divs[1].className);可以返回类的多个属性(如果有的话)

用法:div[1].className = "newcla";将新的属性覆盖掉原来的属性.该方法会使原来的属性消失

 

 

-------------------------7.element.setAttribute("attribute" , "value")-----------------------

功能:该方法用来给element元素进行设置(添加)属性和属性的值滴;

用法:div[1].setAttribute("class","purple");//给div[1]添加class属性,属性值为"purple";

        div[1].setAttribute("style","color:green");//给div[1]添加sytle属性,属性值为"green";

tips:记得加引号 两个值都加 其他好像没啥了.

 

-------------------------8.element.removeAttribute("attribute");-----------------------

删除;就删除吧.... .... 上述推理下来就是接删除了.

 

最后,大家有什么疑问可以提出来一起学习.欢迎指出错误一起成长..