DOM对象的一些常用属性和方法：

作者: lurker | 来源:发表于2016-04-06 21:18 被阅读825次

DOM基础
HTML DOM 方法
第九天 DOM
DOM操作和样式操作库的封装
DOM对象的一些常用属性和方法：
认识 HTML DOM
js笔记十五之DOM基础-获取元素的方法
DOM基础
JavaScript ----- 操作DOM对象的属性
js对象与jquery对象

DOM对象的一些常用方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Z-one</title>
</head>
<body>
    <p id="p1" class="p">测试</p>
    <p id="p2" class="p">测试</p>
    <p id="p3" class="p">测试</p>
</body>
</html>

以上面code为例子
document 对象

document.doctype;//可以知道文档声明，如果没有return null;这里是<!DOCTYPE html>
document.doctype.name//知道文档声明的名字.
document.head//很明显选取head节点.就是<head></head>这段
document.body//选取body节点.

示例图

location
我记得location一般主要是用来获取地址。
常用方法：

document.location.href//获取当前地址
document.location.assign(http://www.baidu.com)//分配一个地址
另外如果href 是获取当前地址，如果给他赋值，把一个地址给他，也能达到assign的效果；
document.location="http://www.baidu.com"
或者
document.location.href="http://www.baidu.com"

innerText，innerHTML;
这三个放一起说，主要是都挺像的,这两个个的作用都是往文档中写出内容,但是区别主要是：
document.body.innerText("Z-ONE") 主要是写入一个纯文本内容，此时<span>并不是标签。而是一个文本"<span>".(其实这样也显得innerText的安全性高一点)

示例图

document.body.innerHTML("z-one")也是写入一个纯文本内容，但是不会将HTML标签进行转义。

示例图

另外innerHTML是符合W3C协议的，而innerText只适用于IE浏览器。

Element元素
Element的几个必要重要的属性感觉常用的就是：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Z-one</title>
</head>
<body>
    <p id="p1" class="p">测试</p>
    <p id="p2" class="p">测试</p>
    <p id="p3" class="p">测试</p>
  <script>
        var a=document.getElementById("p1")//获取上面那个例子的p1元素.
          a.id// 获取该元素的id... "p1" (貌似就是通过p1找到的他- -)
          a.nodeName//获取到节点的名字(就是标签名字) 这里是"p"
          a.className//获取节点的class名字，这里因为关键字的原因，只能用className;
           另外还有一些
            child//获取子元素  这里没有
           lastchild//最后一个子元素.
           firstchild//第一个子元素.
           nextSibling//下一个兄弟元素.
           previousSibing//上一个兄弟元素.
</script>
</body>
</html>

获取元素的方法
获取元素的方法主要有三种：

通过ID
通过类名
通过元素种类
*(针对于input元素通过分组名字)
通过DOM2的方法
下面这个例子很好表示了获取元素的几种方法:

    <p id="p1" class="p">测试</p>
    <p id="p2" class="p">测试</p>
    <p id="p3" class="p">测试</p>
</body>
<script>
    window.onload=function(){
        //用id获取第二个p标签的元素
        var a=document.getElementById("p2");
        a.style.color="red";
        //用标签名字来获取第一个p标签;
        var b=document.getElementsByTagName("p")[0]//获取的是一个集合,
        b.style.fontSize="30px";//这里font-size,会报错,就用fontSize;
        //用类名来获取第三个标签.
        var c=document.getElementsByClassName("p")[2]//和上面一个道理
        c.style.fontWeight="bold";
        //通过DOM2的方法获取第1个标签;
        var d=document.querySelector("#p1");
        //如果是queryselectorAll() 就是获取一个集合,操作方式和上面类似。
        //这里是通过类名，如果是ID就用#p1 标签就用p,一般是获取第一个元素.这点和Tag和Class都不一样
        d.style.color="green";
    }

示例图

然后就是Element的创建和添加元素。用一个例子表示吧：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建元素</title>
</head>
<script>
    window.onload=function(){
        var a=document.createElement("div");
        a.className="p1"
        a.innerHTML=("<span>测试下</span>");
        //添加到文档中
        document.body.appendChild(a);//这下子元素就写进去了
        //如果还要添加 可以照着上面来，我们现在就添加一个元素进去
        var b=document.createElement("div");
        b.innerHTML="<p>测试第二弹</p>";
        //这次我们添加在上一个元素前面
        document.body.insertBefore(b,a);//把b插在a前面- -
        //这时候不想要b了，想替换掉，可以这么做!
        var c=document.createElement("div");
        c.innerHTML="我就是来替换的";
        document.body.replaceChild(c,b);//（new,old）
    }
</script>
<body>
    
</body>
</html>

属性操作
Element的属性操作一般就下面四种：

getAttribute 获取一个属性。
setAttribute 设置一个属性。
removeAttribute 删除一个属性。
createAttribute 新建一个属性。
举个例子吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取属性</title>
</head>
<body>
    <div id="x1" class="p1"></div>
</body>
<script>
    var a=document.getElementById("x1");
    a.getAttribute("id");//获取该阶段的属性：id
    a.setAttribute("id","Z-one");//设置一个属性。
    a.removeAttribute("id")//删除ID节点
</script>
</html>

事件处理###

DOM0级事件处理
还是用一个例子说明：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="button" id="a" value="按钮">
</body>
<script>
    var a=document.getElementById("a");
    a.onclick=function(){
        console.log("测试一下");
    }
    //这样点击按钮就会在控制台输出测试一下
</script>
</html>

这一种应该算是比较常见的一种操作方式。没什么好说的。我们看下面
DOM2级事件处理程序
这里前面区别开来，就是我是你的升级版！。出了这两个方法
addEventListener();//添加
removeEventListener();//去除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM2级</title>
</head>
<body>
    <input type="button" value="按钮">
</body>
<script>
     var fun=function(){
        console.log("测试一下");
    }
    var btn=document.querySelector("input");
    btn.addEventListener("click",fun,false)
    btn.removeEventListener("click",fun,false)
        //如果是true 就是在事件捕获阶段调用，如果是false则是在事件冒泡阶段调用。
    //另外如果这里要用removeEventListener("click",function(){})//这样是没有效果的。虽然是一个函数，但是JS会认为传入了一个另外一个函数，虽然和之前一个一模一样。
</script>
</html>

IE事件调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IE事件调用</title>
</head>
<body>
    <input type="button" id="p1" value="按钮">
</body>
<script>
    var a=document.getElementById("p1");
    a.attachEvent("onclick",function(){
        console.log("测试一下");
    })
    a.attachEvent("onclick",function(){
        console.log("猜猜我在第一还是在第二");
    })
//这里有一点。如果是如果是调用了两次attachEvent（）,后面的会在前面出现。和DOM2是相反的.
另外IE下 事件处理会在全局作用下运行。
</script>
</html>

示意图