JavaScript学习(一)---DOM操作

2023-08-26 18:55:26 浏览数 (2)

代码语言:javascript复制
一、DOM概念

代码语言:javascript复制
 "D":Docment,指的是文档“O”:Object,指的是对象,在javascript有三种对象:用户定义对象、内建对象(JavaScript语言对象。如Math,Array)、宿主对象(浏览器对象)"M":Model,值得是Model,某种事物的表现形式二、节点
代码语言:javascript复制
  元素节点 :<body> <p> <ul>等文本节点:<p>文本节点</p>、<li>文本节点</li>等属性节点:title id class	等三、获取元素	三种方法:通过元素ID、通过标签名字、通过类名字来获取
 
 
  
  请看下面实例:
 
 
 
 
  
  <h1>What do you want to buy</h1>
    <p title="a gentle reminder">Donnot Forget TO Buy This Stuff</p>
    <ul id="purchases">
        <li>A tin of beans</li>
        <li class="sale">Cheese</li>
        <li class="sale important">Milk</li>
    </ul>
  
  

  
  

 
 1、getElementsById(id) 返回一个对象var obj=document.getElementById("purchases");
2、 getElementsByTagName() 返回一个对象数组var obj=document.getElementsByTagName('li')
        alert(typeof obj);
        alert(obj.length);
        for(var i=0;i<obj.length;i  ){
            alert(typeof obj[i]);
        }3、getElementsByClassName() 返回一个对象数组var obj=document.getElementsByClassName('sale');
        alert("具有sale类的元素个数:" obj.length);
        //important sale顺序颠倒不影响 ----getElementsByClassName('sale important')
        var obj_1=document.getElementsByClassName(' important sale');
        alert("同时具有important 和sale类的元素个数:" obj_1.length);
四、获取和设置属性1、getAttribue(attribute) var pa=document.getElementsByTagName('p');
        for(var i=0;i<pa.length;i  ){
            var text=pa[i].getAttribute('title');
            if(text) alert(text);
        }
2、serAttribute(attribue,value)

 var shoppping=document.getElementById('purchases');
        shoppping.setAttribute('title','A list of goods');
        alert(shoppping.getAttribute('title'));

五、小结
 
 
  
   
  
  getElementById
  
  getElementsByTagNamegetElementsByClassNamegetAttributesetAttribute上面5个常见方法是编写DOM脚本的基石

0 人点赞