HTML学习笔记-JS DOM

DOM

HTML DOM (文档对象模型)
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素
通常，通过 JavaScript，您需要操作 HTML 元素。为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
1.通过 id 找到 HTML 元素 document.getElementById(“txtName”)
2.通过标签名找到 HTML 元素 getElementsByTagName(“p”);
3.通过类名找到 HTML 元素document.getElementsByClassName(“p1”)，返回的数组
文档中的每一个元素都是一个对象。利用DOM提供的方法能得到任何一个对象。

节点及类型

1.元素节点
2.属性节点：通过属性的方式来操作节点
3.文本节点：是元素的子节点，也是纯文本

DOM HTML

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

1.getElementByID方法

它是document对象特有的函数。该方法返回一个与那个有着给定id属性值的元素节点对应的对象。

//getElementById()方法：返回的是单个值(常用)
            document.getElementById("header").innerText="大标题";
            document.getElementById("p1").innerHTML="<strong>世界，你好！</strong>";

2.getElementsByTagName方法

可返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。 该方法也只有一个参数，该参数是标签的名字。

var arr1=document.getElementsByTagName("a");
         for(var i=0;i<arr1.length;i++){
            arr1[i].innerText="abc";
         }

3.getElementsByClassName方法

HTML5 DOM中新增的一个方法。这个方法让我们能通过class属性中的类名来访问元素。

//getElementsByClassName方法:根据元素的class属性名获取元素节点，返回数组
         var arr2=document.getElementsByClassName("test");
         arr2[0].innerHTML="2018俄罗斯世界杯";
         arr2[1].innerHTML="五大联赛";
        }

4.getElementsByName方法

getElementsByName() 方法可返回带有指定名称的对象的集合

该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。
另外，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），
所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

//getElementsByName()方法:返回的是一个数组，需定义一个数组去接收(常用)
            var arr=document.getElementsByName("Name");
            arr[0].value="张三";
            arr[1].value="李四";
            arr[2].value="王五";
            arr[3].value="马六";

DOM CSS

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property=新样式
例：

//将p1颜色改为红色 p2改为蓝色 p2背景色改为灰色
      function getCss(){
        document.getElementById("p1").style.color="red";
        document.getElementById("p2").style.backgroundColor="cyan";
      }

getAttribute

getAttribute方法只有一个参数，我们要查询的属性的名字。
该方法不属于document对象，只能通过元素节点对象调用。比如与getElementById方法合用：

<script>
       //获取元素节点的属性值
       function getAtrr(){
        //获取元素节点
        var a=document.getElementsByTagName("a")[0];
        //改变ID为p1的元素节点的文本节点为第一个a标签的href属性的值
        document.getElementById("p1").innerHTML=a.getAttribute("href");
        //获取class为container的元素节点的title属性的值
        var div=document.getElementsByClassName("container")[0].getAttribute("title");
        alert(div);
       }
    </script>

setAttribute

setAttribute方法允许我们用属性节点的值做修改。
与getAttribute一样，setAttribute也只能用于元素节点。
setAttribute()方法需要我们向他传递两个参数
object.setAttribute(attribute,value)

<script>
        window.onload=function(){
            //将title的值改为like
            document.getElementById("divHobby").setAttribute("title","like");
            var title=document.getElementById("divHobby").getAttribute("title");alert(title);
        }
    </script>

DOM常用属性

1.nodeName 属性 :节点名称
nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document

2.nodeValue 属性：节点的值。
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值

3.nodeType属性，可以使用nodeType属性来获取节点类型。
nodeType属性共有12种取值，其中仅有三种较常用：
元素节点的nodeType属性值是1；
属性节点的nodeType属性值是2；
文本节点的nodeType属性值是3。
4.childNodes属性
childNodes属性可以用来获取任何一个元素的所有子元素，是一个包含这个元素全部子元素的数组。
//属性节点不是元素的子节点
5.firstChild、lastChild属性
firstChild 获得第一个子节点
lastChild 获得最后一个节点

DOM动态创建节点

1. 创建一个元素节点:

1). createElement(“标签名”): 按照给定的标签名创建一个新的元素节点. 方法只有一个参数：被创建的元素节点的名字, 是一个字符串.
方法的返回值：是一个指向新建节点的引用指针. 返回值是一个元素节点, 所以它的 nodeType 属性值等于 1.
新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象.

2. 创建一个文本节点:

1). createTextNode(“文本值”): 创建一个包含着给定文本的新文本节点. 这个方法的返回值是一个指向新建文本节点引用指针.
它是一个文本节点, 所以它的 nodeType 属性等于 3.
方法只有一个参数：新建文本节点所包含的文本字符串. 新元素节点不会自动添加到文档里

3. 为元素节点添加子节点:

1). appendChild(): var reference = element.appendChild(newChild):
给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点.
方法的返回值是一个指向新增子节点的引用指针.

4. 插入节点:

1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面
var reference = element.insertBefore(newNode,targetNode);
节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面. 节点 targetNode 必须是
element 元素的一个子节点。

5 删除节点:

从一个给定元素里删除一个子节点
格式：var reference = element.removeChild(node);
返回值：返回值是一个指向已被删除的子节点的引用指针。
注意：某个节点被 removeChild() 方法删除时，这个节点所包含的所有子节点将同时被删除。

<script>
      //新增一本书
      function newNode(){
        //1.创建一个li元素节点
     var book=document.createElement("li");
     //2.创建一个文本节点
     var book3=document.createTextNode("《西游记》");
     //3.把文本节点添加到元素节点中
     book.appendChild(book3);
     //4.把新的元素节点添加到现有的元素节点中
     //document.body.appendChild(book);
     //在元素节点book1前面插入新的节点
     //5.获取book1节点的位置
     var old=document.getElementById("book1");
    //6.插入到book1前
    old.parentElement.insertBefore(book,old);
      }
      //删除节点
      function rmChild(){
        //1.获取要删除的父元素节点
        var stars=document.getElementById("stars");
        //获取要删除的子节点
        var fanbingbing=document.getElementById("fanbingbing");
        //3.删除
        stars.removeChild(fanbingbing);
      }
    </script>