JavaScript-DOM

第三章 DOM

• document 文档
• object 对象
• model 模型
• 统称为文档对象模型

节点（node）

• 元素节点（element node） // div ul li a

• 文本节点 （text node） // 标签内容

• 属性节点（attribute）//标签的属性值 href

• CSS

  • id
  • class

• 获取元素

  • getElementById //通过id取得

    document对象特有的函数

  • getElementsByTagName //通过表签名取得

    获取到的是一个数组，可遍历，可使用Array对象中的默认属性

    //获取全部标签 通配符*
    document.getElementsByTagName("*")
    //返回所有文档节点obj
    
    //获取指定标签内所有的标签
    var shop = document.getElementById("shop");
    var allItems = shop.getElementsByTagName("*");
    

  • getElementsByClassName //通过class属性获得 HTML5新增

    document.getElementsByClassName("classname")
    //返回是数组 类似于tagname
    document.getElementsByClassName("classname1 classname2")
    //获取多个classname的标签
    
    //获取指定id下所有特定class标签
    
    var id = document.getElementById("id");
    var innerClass = id.getElementsByClassName("classname");
    
    //适应老浏览器做法
        function getElementsByClassName(node,classname){
          if(node.getElementsByClassName){
            return node.getElementsByClassName(classname);
          }else{
            var results = [];
            var allNode = document.getElementsByTagName('*');
            for(var i in allNode){
              if(allNode[i].className.indexOf(classname) != -1){
                results[i] = allNode[i];
              }
            }
            return results;
          }
        }
        //替换为
        var id = document.getElementById("id");
        var innerClass = getElementsByClassName(id，"classname");

获取和设置属性

获取元素以后，我们可以获取和设置这些元素的属性

• 获取属性值 obj.getAttribute(属性名) //不能通过document对象调用，只能通过元素节点调用

  //获取所有p标签的title属性
  var paras = document.getElementsByTagName('p');
  var result = [];
  
  for(var i in paras){
    result[i] = paras[i].getAttribute('title');
  }

• 设置属性值 obj.setAttribute(“属性名”，”属性值”)

  var para = document.getElementById("par");
  para.setAttribute("title","我是标题")

  这里有一个非常值得关注的细节:通过 setAttribute对文档做出修改后,在通过浏览器的view source(查看源代码)选项去查看文档的源代码时看到的仍将是改变前的属性值,也就是说,setAttribute做出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自DOM的工作模式:先加载文档的静态内容,再动态刷新,动态刷新不影响文档的静态内容。这正是DOM的真正威力:对页面内容进行刷新却不需要在浏览器里刷新页面。