JavaScript dom对象

Js的dom对象

*dom：document object model：文档对象模型

文档：超文本标记文档HTML，xml

对象：提供了属性，方法

模型：使用属性和方法操作超文本标记文档

可以使用js里面的dom里面提供的对象。使用这些对象的属性和方法，对标记型文档         进行操作

想要对标记型文档进行操作，首先需要对标记型文档里面的所有的内容封装成对象

需要把HTML里面的标签，属性，文本都封装成对象

需要解析标记型文档

-document对象：整个文档

-element对象：标签对象

-属性对象

-文本对象

-Node节点对象：这个对象是这些对象的父对象

如果在对象里面找不到想要的方法，这个时候到Node对象里面去找

DHTML：是很多技术的简称：

HTML ：封装数据

Css：使用属性和属性值设置样式

 Dom：操作HTML文档（标记型文档）

 JavaScript：专门指的是js的语法语句（ECMAScript）

*document对象

常用方法：

*write()：

1. 向页面输出变量
2. 向页面输出HTML代码

*getElementById()：

通过id得到元素（标签）

var input1 = document.getElementById("id1"); //传递的是标签的id号，得到标签对象

document.write(input1.value);

alert(input1.value);

*getElementsByName()：通过标签的name的属性值得到这个标签，返回的是一个集合或者说是数组

var arr = document.getElementsByName("tname");

document.write("<br>");

document.write("数组长度:"+arr.length);

document.write("<br>");

for(var x = 0;x<arr.length;x++){

         document.write(arr[x].value);

         document.write("<br>");

}

*getElementByTagName()：通过标签的标签名来得到标签对象

案例 添加末尾节点

function ha(){//在末尾添加节点

                          //获取ul标签

                          var ul1 = document.getElementById("ul");

                          //创建标签

                          var li1 = document.createElement("li");

                          //创建文本

                          var texd(text);

                          //将li添加到ul下面

                          ul1.appendChild(li1);

                  }

 

*element元素对象

要操作element对象，首先需要获取到element

使用document里面的方法获取

方法：

*getAttribute(“属性名称”)：获取属性里面的值

*var input = document.getElementById(“inputid”);

*alert(input.value);

*alert(input.getAttribute(“value”));//与上面的一行一样

*alert(input.class);//无法读取class属性，在这里是一个关键字

*alert(input.getAttribute(“class”));//可以获取到

*setAttribute(“属性名”,”属性值”)：设置属性的值

*removeAttribute(“属性名称”)：删除属性值，但是不能删除value属性

Node对象属性

*nodeName

*nodeType

*nodeValue

使用dom解析HTML时候，需要HTML里面的标签，属性和文本封装成对象

<span id="spanid" name="dog">孙阿犬</span>

标签节点：

*nodeType：1

*nodeName：大写的标签名称，比如SPAN

*nodeValue：null

var sp = document.getElementById("spanid");

                  document.write(sp.nodeType);//1

                  document.write("<br>");

                  document.write(sp.nodeName);//SPAN

                  document.write("<br>");

                  document.write(sp.nodeValue);//null

属性节点：

*nodeType：2

*nodeName：属性名称

*nodeValue：属性的值

通过getAttributeNode(“属性名称 如id name value”);来获取属性节点

var id1 = sp.getAttributeNode("id");

                  document.write(id1.nodeType);//2

                  document.write("<br>");

                  document.write(id1.nodeName);//id

                  document.write("<br>");

                  document.write(id1.nodeValue);//spanid

文本节点：

*nodeType：3

*nodeName：#text

*nodeValue：文本内容

通过firstChild 或者lastChild 获取文本节点

var text = sp.firstChild;

                  document.write(text.nodeType);//3

                  document.write("<br>");

                  document.write(text.nodeName);//#text

                  document.write("<br>");

                  document.write(text.nodeValue);//孙阿犬

 

属性二：

父节点：parentNode

子节点：childNodes：得到所有的子节点 但是兼容性差

*firstChild：获取第一个子节点

*lastChild：获取最后一个子节点

同辈节点：nextSiBling：返回一个给定节点的下一个兄弟节点

*previousSiBling：返回一个给定节点的上一个兄弟节点