前端——DOM

最新推荐文章于 2022-07-25 17:57:23 发布

banketan1026

最新推荐文章于 2022-07-25 17:57:23 发布

阅读量192

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/V587Chinese/p/9462299.html

版权

什么是DOM？

DOM是W3C（万维网联盟）的标准，是Document Object Model（文档对象模型）的缩写，它定义了访问HTML和XML文档的标准：

“W3C文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

DOM标准被分为三个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对XML文档的标准模型
HTML DOM - 针对HTML文档的标准模型

什么是HTML DOM?

HTML 的标准对象模型
HTML 的标准编程接口
W3C 标准

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。将整个HTML当做一个对象，对象嵌套一个对象，每个标签都认为是一个对象。

换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。我们最为关心的是，DOM把网页和脚本以及其他编程语言联系了起来。

查找标签

1.直接查找

document.getElementById()            根据ID获取标签（单个标签）
document.getElementsByName()         根据name属性获取标签(列表)
document.getElementsByClassName()    根据class属性获取标签（列表）
document.getElementsByTagName()      根据标签类型获取标签（列表）
document.querySelector()             允许通过CSS选择器的规则来查找标签(符合条件的第一个)
document.querySelectorAll()          所有符合条件的(列表)

示例：

// 根据id查找标签，tag是一个DOM对象
var tag = document.getElementById("i1");

2.间接查找

间接查找是建立在直接查找的结果基础之上的操作

parentElement             // 父节点标签
children                  // 所有子标签
firstElementChild         // 第一个子标签元素
lastElementChild          // 最后一个子标签元素
nextElementSibling        // 下一个兄弟标签元素
previousElementSibling    // 上一个兄弟标签元素

操作标签

1.基本操作

console.log()               输出框
alert("")                   弹出框
confirm("")                 确认框
  
// URL和刷新
location.href               获取当前URL
location.href = "url"       设置URL（重定向，跳转）
location.reload() 或 location.href = location.href       重新加载（刷新页面）
  
// 定时器
setInterval                 多次定时器
clearInterval               清除多次定时器
setTimeout                  单次定时器
clearTimeout                清除单次定时器

2.文本内容操作

.innerText         获取标签文本内容
.innerText=" "     对文本内容重新赋值
.inerHTML          获取标签全部内容
.innerHTML=" "     设置标签全部内容
.value            （只对部分标签生效）获取input中(所有使用value)的值、select标签选中的值，textarea标签中的值
.value=" "         设置值
.checked           获取单(复)选框中的值，input标签中类型checked,radio的专属
.checked=" "       设置值，true 或 false

示例：

<body>
    <div>div内容</div>
    <p>p标签内容</p>
    <input id="a1" type="button" value="按钮">
    <input id="a2" type="text">
    <input id="a3" type="password">
    <select id="a4" name="city">
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">天津</option>
    </select>
    <textarea>这里是默认文本</textarea>
    <span>
        篮球<input type="checkbox" name="favor" value="1">
        足球<input type="checkbox" name="favor" value="2">
        台球<input type="checkbox" name="favor" value="3">
        羽毛球<input type="checkbox" name="favor" value="4">
        单选框：<input type="radio" name="1"> <input type="radio" name="1">
    </span>

    <script>
        function func(){
            var tag1 = document.getElementsByTagName("div"); // tag1是列表，tag1[0]才是div标签对象
            tag1[0].innerText = "修改后的div内容";
            var tag2 = document.getElementsByTagName("p");
            tag2[0].innerHTML = "<a href='https://www.baidu.com'>修改后的p标签内容</a>";
            var tag3 = document.getElementById("a1");
            tag3.value = "修改后按钮名称";
            var tag4 = document.getElementById("a2");
            tag4.value = "修改输入框内容";
            var tag5 = document.getElementById("a3");
            tag5.value = "同样也可以修改密码的输入，也可以从控制台获取";
            var tag6 = document.getElementById("a4");
            tag6.value = 3; // 选择"天津"
            var tag7 = document.getElementsByTagName("textarea")[0];
            tag7.value = "修改后的默认文本";
            var tag8 = document.getElementsByTagName("span")[0];
            tag8.children[0].checked = true;
            tag8.children[2].checked = true;
            tag8.children[5].checked = true;
        }
        setTimeout(func,2000); // 定时器，2秒后执行函数
    </script>
</body>

3.样式操作

// 类的操作
.className                     获取所有使用的类
.className="样式"              设置样式（会覆盖之前的，处理方法与.cssText相同）
.classList.add("样式")         增添样式集合
.classList.remove("样式")      删除样式
.className.indexOf("样式")     判断是否具有某样式，有则返回下标，没有返回-1
// 获取CSS样式
.style.属性　　　　　　　　　　   获取样式，但是只能获得内联样式表中定义的属性（写在<style>标签和<link>引入的都无法获取）
window.getComputedStyle()     获取元素计算之后的样式属性值，即当前元素最终使用的所有CSS属性值。只读的返回值
   　　　　语法：window.getComputedStyle(element,"伪元素").width 如果不需要获取伪元素，第二个参数省略，默认null

// 设置CSS样式
.style.属性 = "值";           对具体样式进行操作         例如：.style.color = "red"; 
.style.cssText = "";          可以一次性设置多个样式。    例：.style.cssText = "width:180px;color:white;height:40px;"

 有了.cssText可以一步完成，但是会带来一个问题，会把原来有的样式清除掉，例如原来有的css中有style“display:none;”，在执行完上面的js操作后，display会被删掉，解决办法：
.style.cssText += ";width:180px;color:white;height:40px;"

4.属性操作

.attributes   获取所有属性
.setAttribute("属性名","值")    设置属性   
.removeAttribute("属性名")       删除属性
.getAttribute("属性名")         获取某属性的值

/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/

5.标签操作

1.创建标签

字符串的方式创建标签

var tag = "<a class='c1' href='http://www.baidu.com'>你好</a>";

对象的方式创建标签

var tag = document.createElement("input");
tag.style.color = "red"; 
…… ……   // 可以设置样式、属性等

2.插入标签

创建标签后，需要将其插入我们想要的位置

// 方式一
document.getElementById("i1").insertAdjacentHTML("beforeEnd",tag);// 将其插入id="i1"标签的内部最后一个
// 方式二
document.getElementById("i1").appendChild(tag);  // 将标签添加到"i1"标签内，默认插入位置是内部最后一个

insertAdjacentHTML()方法的第一个参数只能是："beforeBegin","afterBegin","beforeEnd","afterEnd"，分别表示将新标签添加到对照标签的：前面，内部第一个，内部最后一个，后面。

3.删除标签

原生API要删除标签，必须要获得它本身和父标签。

var tag1 = document.getElementById("p1");
var tag2 = document.getElementById("p2");
tag1.removeChild(tag2); // 删除标签

这样比较麻烦，常用的办法是这样：

tag.parentElement.removeChild(tag);

6.提交表单

在HTML中input标签 submit 类型可以提交，但是通过DOM操作可以将任何标签具有此功能。

.submit() 方法
将目标标签加入oncilck事件，触发函数，函数中使用.submit()方法

示例：

<form id="f1" action="http://www.baidu.com">
    <input type="text">
    <a id="a1">提交</a>
</form>
<script>
    document.getElementById("a1").onclick = submitFrom; // 绑定事件
    function submitFrom(){
        document.getElementById("f1").submit();
    }
</script>

事件

要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素相应的事件绑定处理函数。

示例：

// 鼠标移入移出显示不同效果，可以用CSS hover实现
<body>
    <table id="text" border = "1">
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>1</td><td>2</td><td>3</td></tr>
    </table>
    <script>
        var tag = document.getElementsByTagName("tr");
        var len = tag.length;
        for(var i=0;i<len;i++)
        {
            tag[i].onmouseover = function(){
                //tag[i].style.backgroundColor = "red"; //会报错，要将tag[i]换成this：谁调用这个函数，this就指向谁、
                // 作用域的问题
                this.style.backgroundColor = "red";
            }
            tag[i].onmouseout = function(){
                this.style.backgroundColor = "";
            }

        }


    </script>
</body>

// 输入框默认显示提示信息，点击消失。 标签中placeholder属性可以实现类似效果，不同的是：点击不消失，输入字符时才消失。
<body>
    <div>
        <input οnfοcus="Focus();" οnblur="Blur();" id="i1" type="text" value="请输入关键字">
    </div>
    <script>
        function Focus(){
            var tag = document.getElementById("i1");
            if(tag.value == "请输入关键字")
            {
                tag.value= "";
            }
        }
        function Blur(){
            var tag = document.getElementById("i1");
            if(tag.value.length == 0)
            {
                tag.value = "请输入关键字";
            }
        }
    </script>
</body>

绑定事件：

在JavaScript和DOM的知识背景下有三种绑定事件的方式：

1.在HTML标签中直接绑定（不建议）

初学者使用的方法，为简化html代码，不建议使用。

<div οnclick="click(this)"> // 一般函数不需要传入参数，如果多个标签绑定同一函数，为了区分用户点击的是哪个标签，需要传入this
function click(self){
    // self 代指当前点击的标签
}

2.先获取DOM对象，再进行绑定

可使JavaScript代码与HTML相分离，文档结构清晰，便于管理和开发。

// 绑定函数
document.getElementById("i1").onclick = function(){
    this 代指当前点击的标签
}
// 解除函数
document.getElementById("i1").onclick = null;

3.绑定/解除事件监听函数

可以对一个事件绑定多个函数

a. addEventListener()方法（推荐）

// 绑定事件监听函数 addEventListener()
document.getElementById("i1").addEventListener("click",function(){},false);
document.getElementById("i1").addEventListener("click",handle,false);
参数：事件名称，执行函数，执行模式。
关于执行模式：默认false表示冒泡阶段执行，true表示捕捉阶段执行。

// 解除事件监听函数 removeEventListener()
参数与上相同。需要注意
1.该方法只能移除由addEventListener()方法添加的函数
2.匿名函数无法移除