javascript DOM编程基础

雨点打透心脏的1/2处 2022-08-20 14:29 237阅读 0赞

1.  DOM doccument object model 文档对象模型
2.  Js 中对象分为三类：用户定义对象 内建对象（javascript提供） 宿主对象（浏览器）
3.  树

<html>
    <head>
    <title>Shopping list</title>
    </head>
    <body>
    <h1>What to buy</h1>
    <p title="a gentle reminder">Don't forget to buy this.</p>
    <ul id="purchases">
    <li>bean</li>
    <li>cheese</li>
    <li>milk</li>
    </ul>
    </body>
    </html>

1.  节点
2.  元素节点
    
     *  都属于元素节点
3.  文本节点 元素中包含的文本
4.  属性节点 注释就是属性节点 还有
    
    标签中的title  
    因为属性总是放在起始标签里，所以属性节点总是包含在元素节点  
    5.css 层叠样式表 可以放在文档的部分，也可以在另一个样式表里  
    语法结构： selector\{  
    property:value;  
    \}  
    class属性

<p class="special">This is a special class</p>
    <h2 class="special">So do this headline</h2>
    
    .special{
        font-style:italic;//为所有元素定义一种共享的样式
    
            }
    
    h2.special{
        text-transform:uppercase;//为特定的类型元素定义一种独享的样式
        }

id属性 定义一个对无二的标志，每个元素只能有一个id属性值

<ul id="purchases">
    
    #purchases{ 
        border:1px solid white;
        background-color:#333;
        color:#ccc;
        padding:1em;
        }

1.  getElementById 参数是想获得的元素的id属性值

document.getElementById("purchases")//返回一个对象

1.  getElementsByTagName 返回一个对象数组，

for(var i=0;i<document.getElementsByTagName("li").length;i++)
    {
        alert(typeof document.getElementByTagName("li")[i]);//返回一个数组 长度为3
        }
    //简介的代码，可以把它赋值给一个变量
    var items=document.getElementsByTagName("li");
    for (var i=0;i<items.length;i++)
    { alert(typeof items[i]);
    }

1.  getAttribute()

ar paras=document.getElementsByTagName("li");
    for (var i=0;i<paras.length;i++)
    { alert(paras[i].getAttribute("title"));//弹出 a gentle reminder
    }
    
    //当不存在title时，返回值为null,为提高代码可读性，存在时才弹出消息
    var paras=document.getElementsByTagName("li");
    for (var i=0;i<paras.length;i++)
    { var title_text=paras[i].getAttribute("title");
       if(title_text)
        alert(title_text);
    }

1.  setAttribute() 检索出来并修改title

var shopping=document.getElementById("purchases");
    shopping.setAttribute("title","a list of goods");//对已有的元素节点增加title属性值
    
    var paras=document.getElementsByTagName("p");
    for (var i=0;i<paras.length;i++)
    { var title_text=paras[i].getAttribute("title");//首先找到p标签的名字
       if(title_text)
       {  paras[i].setAttribute("title","brand new title text");//然后把所有的名字换掉
          alert(paras[i].getAttribute("title"));//打印出来
          }
    
    }

通过窗口打印出来的值发生了变化，但是查看源代码，仍然是原来的值。也就是说setAttribute()方法的修改不会反映在源代码中。  
原因：DOM的工作模式是先加载文档的静态内容，再以动态的方式进行刷新，动态的刷新不影响静态的内容。