DOM笔记

1.把文档表示为树

HTML文档的递归形式决定了它的树状拓扑结构，树的节点对应文档中的各种结构。文档的结构主要包括标签、文本和注释。

2.树的节点

• getElementByld()

        在HTML中，id是唯一的，也就是说我们可以很方便地找出某个元素。

<p id="test1">测试文字1</p>
<p id="test2">测试文字2</p>
<script>
var test = document.getElementsByTagName("p");
test[0].innerHTML="这个是测试2";
</script>

•  getElementsByTagName()

        按标签名找

 <ul id="mylist">
    <li id="m1">标签1</li>
    <li id="m2">标签2</li>
    <li id="m3">标签3</li>
    <li id="m4">标签4</li>
</ul>
<script>
 var elems=document.getElementsByTagName("ul");//通过标签名进行访问
 console.log(elems);
</script>

• getElementByName()

        按名字找

<form  id="registerForm">
        <input type="checkbox" name="boy">
        <input type="checkbox" name="boy">
        <input type="checkbox" name="boy">
</form>
<script>
 var list = document.getElementsByName("boy")
 console.log(list);
</script>

• getElementClassName()

       查找指定的class属性的元素

<div id="news">
        <p class="mainTitle">新闻标题1</p>
        <p class="subTitle">新闻标题2</p>
        <p class="mainTitle">新闻标题3</p>
</div>
<script>
var list = div.getElementsByClassName('mainTitle');
console.log(list);
</script>

• querySelector() 

        通过CSS选择器查找

var elem = parent.querySelector("selector");
//selector支持一切CSS中选择器
//强调如果选择器匹配的有多个，只返回第一个。
//找多个
var  elems = parent.querySelectorAll("selector");

2.常用的DOM操作

• createElement操作

创建一个新的节点

//基本方法：document.createElement(nodeName);
var  para = document.createElement("p");//创建一个p元素节点

• appendChild+createTextNode()

插入新建的节点

<ul id="mylist">
    <li>coffee</li>
    <li>Tea</li>
   </ul>
   <p id="demo">单击按钮将项目添加到列表中</p>
   <button onclick="m()">点我</button>
   <script>
    function m(){
        var node = document.createElement("li");
        var textnode=document.createTextNode("Water");
        node.appendChild(textnode);//给li列表加入值
        document.getElementById("mylist").appendChild(node);//通过Id来查找。将新的li插入ul中
    }
   </script>

•  insertBefore()

将一个新元素插入到一个现有元素的前面

<div>
    <p class="p1" id="p1">这是段落1</p>
    <p class="p2">这是段落2</p>
</div>
   <p id="p3">这是段落3</p>
   <script>
    let  div = document.getElementsByTagName("div")[0];
    let p2 = document.getElementsByClassName("p2")[0];
    let p1 = document.getElementById("p1");
    let p3 = document.getElementById("p3");
    let returnDom = div = insertBefore(p2,p1);
    console.log(returnDom === p2);
   </script>

• replaceChild()

替换子节点为其他节点

如果成功该函数则返回被替换的节点，如果失败则返回Null。

node.replaceChild(newnode,oldnode);

 <div>
<b id="oldnode">javascript</b>
</div>
   <a href="javascript:replaceMessage()">将加粗改为斜体</a>
   <script type="text/javascript">
    function replaceMessage(){
        var oldnode = document.getElementsByTagName("b")[0];
        var newnode=document.createElement("i");
        newnode.innerHTML="javascript";
        oldnode.parentNode.appendChild(newnode);
        oldnode.parentNode.replaceChild(newnode,oldnode);
    }

   </script>
//效果就是将页面一开始的javascript粗体变成javascript斜体（在点击“将粗体改为斜体”链接）

•  removeChild()

        删除节点，用来删除父节点的一个子节点，注意，当一个节点被删除，那么这个节点包含的所有子节点都将被删除。

 <div id="d1">
    <div id="thisNode">
        点击就可以删除我
    </div>
   </div>
   <script type="text/javascript">
    document.getElementById("thisNode").onclick=function(){
        this.parentNode.removeChild(this);//先找到此节点的父节点再删除该父元素下的子节点。也就是thisNode节点。
    }
   </script>

• hasChildNodes() 

        作用：用来检查一个元素是否有子节点，返回值是true/false。

<div id="div1">
    <div id="div2"></div>
   </div>
   <script>
    var div1 = document.getElementById("div1");
    var div2=document.getElementById("div2");
    var s = div1.hasChildNodes("div1");
    var d = div2.hasChildNodes("div2");
    alert(s);
    alert(d);
   </script>//输出结果是true  false

• NodeName 

        节点名称，如果节点是元素节点，返回元素的名称。

        如果给定节点是属性节点，NodeName返回属性的名称

        如果给定的是文本节点，NodeName返回#text的字符串

 <p>段落节点</p>
   <div id="div1">元素节点&属性节点</div>
   <script>
    var div = document.getElementById("div1");
    var p = document.getElementsByName("p");
    var id = document.getElementsByName("id");
    var div1 = document.getElementsByTagName("div");
    console.log(div.nodeName);
    console.log(p.nodeName);
    console.log(id.nodeName);
    console.log(div.nodeName==div1.nodeName);
   </script>
//输出结果是：DIV（大写）
//#text
//id(小写)
//true.

• nodeType——节点的类型值        

        返回值是一个整数

        元素节点类型    值为1

        属性节点类型    值为2

        文本节点类型    值为3

<p>段落节点</p>
   <div id="div1">元素节点&属性节点</div>
   <script>
    var div = document.getElementById("div1");
    var p = document.getElementsById("p1");
    var div1 = document.getElementsByTagName("div");
    alert(div.nodeType);
    alert(p.nodeType);
   </script>
//结果是1 3

• nodeValue——节点的value值 

        返回给定节点的当前值（字符串）

        如果给定节点是属性节点，返回值是这个属性的值

        如果给定节点是文本节点，返回值是这个文本节点的内容。

        如果给定节点是元素节点，返回值是null。 

• getAttribute()

        作用：返回一个给定元素的一个给定属性名称的节点的值

• setAttribute()

        作用：将给定元素节点添加一个新的属性值或改变它的现有属性的值。

        返回值是一个字符串，如果不存在setAttribute()方法将先创建它再为其赋值。

<style>
        .a2{
            color:red;
            font:30px 华文仿宋;
        }
</style>
<a href="#">
    <p id="p2" onclick="add()">链接2</p>
</a>
<script>
 function add(){
        var b = document.getElementById("p2");
        b.setAttribute('class',"a2");
    }
</script>

•  removeAttribute()       

  <style>
          .a2{
              color:red;
              font:30px 华文仿宋;
          }
  </style>
  <a href="javascript:void(0)" id="a1"><p class="a2" id="p1" onclick="jump()">链接1</p></a>
     <script>
      function jump(){
       var a = document.getElementById("p1");
      a.removeAttribute("class");
      }
     </script>//结果就是当单击链接1字样时红色字样消失，即a2定义的CSS效果失效

• hasAttribute()

        判断是否包含指定属性

<div id="div1">
    <div id="div2" onclick="">
    </div>
   </div>
   <script>
    var div1 = document.getElementById("div1");
    var div2=document.getElementById("div2");
    var s = div1.hasAttribute("onclick");
    var d = div2.hasAttribute("onclick");
    alert(s);
    alert(d);
   </script>//输出结果是false true。

      第五周蓝旭培训总结