第七章：DOM模型一

DOM（Document Object Model）：文档对象模型对文档的结构化的表述定义了在程序中对该结构进行访问的方式DOM 分类核心 DOM：用于任何结构化文档的标准模型定义了与系统平台和编程语言无关的接口，DOM 是一种 APIHTMLDOM：用于 HTML 文档的标准模型XMLDOM：用于 XML 文档的标准模型DOM 作用访问文档内容，包括元素、属性、文本增...

我名异侠

254人浏览 · 2019-11-18 09:39:57

我名异侠 · 2019-11-18 09:39:57 发布

DOM（Document Object Model）：文档对象模型
对文档的结构化的表述
定义了在程序中对该结构进行访问的方式

DOM 分类
核心 DOM：用于任何结构化文档的标准模型
定义了与系统平台和编程语言无关的接口，DOM 是一种 API
HTML DOM：用于 HTML 文档的标准模型
XML DOM：用于 XML 文档的标准模型

DOM 作用
访问文档内容，包括元素、属性、文本
增加文档内容，包括元素、属性、文本
删除文档内容，包括元素、属性、文本
修改文档内容，包括元素、属性、文本
DOM 的应用十分广泛，各种网页特效均有 DOM 的踪影

DOM 树
DOM 将 HTML 文档抽象为树形结构，称这棵树为 DOM 树
HTML 中的每一项内容都可以在 DOM 树中找到
对文档内容的操作即对 DOM 树的操作

HTML 文档中的所有内容都是节点：

是根节点，其他标签都是元素，属性是属性。 ① 整个文档是一个文档节点； ② 每个 HTML 元素是元素节点； ③ HTML 元素内的文本是文本节点 ,回车也是文本节点； ④ 每个 HTML 属性是属性节点； ⑤ 注释是注释节点；

DOM 节点是一个对象，拥有属性和方法

元素节点

HTML 开始标签中的属性为元素节点对象的属性
HTML 开始标签中的事件属性为元素节点对象的方法
元素节点对象中的方法函数中的 this 指向当前触发事件的元素
属性节点
文本节点
空格、换行空格属于文本节点

<body>
	<div id="contianer">
	</div>
</body>
<!-- lastchild-->
	<script>
		//得到一个元素的节点
		var contianer=document.getElementById("contianer")
		//事件也可以看成一个特殊的属性
		//在对象的方法内部，this指向当前对象
		//DOM对象的回调函数内部，this指向当前对象
		contianer.onclick=function(){
			console.log(this.id);
		}
		console.log(contianer);

	</script>

在这里插入图片描述

元素树

在节点树中，顶端节点被称为根（root）
父节点：每个节点都有父节点、除非该元素是文档的根节点
子节点：每个元素节点可以有 0 个、1 个或多个子节点
同胞节点：指拥有相同父节点的节点

JavaScript 解释器会为载入的每个 HTML文档创建一个对应的document 对象
通过使用 document对象，可以从脚本中对 HTML 页面中的所有节点进行访问

获取节点的方式：

直接获取：
通过ID属性获取节点
通过标签名获得所有的同名节点
通过类名获取所有相同类名的标签

通过节点关系获取
通过父节点获取子节点
通过子节点获得父节点
获得前后兄弟节点

//第一个单词首字母小写，其余单词首字母大写（小驼峰命名法）
通过 id 属性获得节点（ID选择器）
document.getElementById( )

通过标签名获得所有同名标签（标签选择器）
document.getElementsByTagName( )
返回值是数组，用时注意带上角标

通过类名获得所有类名相同的标签（类选择器）
document.getElementsByClassName( )

		var arr=["welcome","to the","westworld"]; 
		var pList=document.getElementsByTagName("p");
		for(var num=0;num<pList.length;++num)
		{
			//双标记标签可以使用这个属性
			pList[num].innerHTML=arr[num];
		}

document.documentElement 返回 HTML 文档中元素
document.head 返回 HTML 文档中元素
document.body 返回 HTML 文档中元素

<body>
    <div id="container">
        <p id="p1">这是一个段落</p>
    </div>
</body>
<script>
    p1.onclick = function() {
        container.replaceChild(hNode, p1);
    }
</script>

childNodes 属性——返回节点的子节点集合。之后可以通过循环或者索引找到需要的元素节点。
例：document.getElementById(“myList”).childNodes;
document.getElementById(“myList”).childNodes[0];
children 属性——返回节点的所有元素子节点集合。
例：document.getElementById(“myList”).children;
document.getElementById(“myList”).children[0];

DOM对象。chilnodes表示子节点的集合（子节点对象），包括空格，注释，实际网页元素
children，获取具体的元素子节点对象的集合，不包含空格与注释

firstChild 属性——返回指定节点的首个子节点。可递归使用，即支持 parentObj.firstChild.firstChild… 的形式，如此可获得更深层次的节点。
例：document.getElementById(“myList”).firstChild;
firstElementChild 属性——返回指定节点的首个元素子节点。
例：document.getElementById(“myList”).firstElementChild;
lastChild 属性——返回指定节点的最后一个子节点。可递归使用，即支持 parentObj.lastChild.lastChild… 的形式，如此可获得更深层次的节点。
例：document.getElementById(“myList”).lastChild;
lastElementChild 属性——返回指定节点的最后一个元素子节点
例：document.getElementById(“myList”).lastElementChild;

parentNode 属性——返回指定节点的父节点
parentElement 属性——返回指定节点的父节点

html代码:
<h1>新闻动态<span id="time">2018-10-7</span></h1>
js代码：
var parent= document.getElementById("time").parentNode;
console.log(parent.innerHTML);
输出结果：
新闻动态<span id="time">2018-10-7</span>

previous(Element)Sibling 属性——返回指定节点紧跟的前一个(元素)兄弟节点。
例：document.getElementById(“item1”).previousSibling;
next(Element)Sibling 属性——返回指定节点之后紧跟的一个(元素)兄弟节点
例：document.getElementById(“item2”).nextSibling
innerHTML 属性
innerHTML 是 DOM 中元素节点的属性，相当于一个容器
用于获取或改变任意元素节点的内容，该属性可读可写
操作简单，几乎所有浏览器均支持 innerText 属性

<body>
	<ul id="list">
		<li class="bg">香蕉</li>
		<li class="bg">苹果</li>
		<li class="bg">橘子</li>
	</ul>
</body>
	<script>
		var list=document.getElementById("list");
		list.innerHTML="<h1>这是标题</h1>"//会解析内容
		list.innerText="<h1>这是标题</h1>";//不解析内容
		//这是标题
		//<h1>这是标题</h1>
		console.log(list.innerText);//过滤标记，纯文本
	</script>

textContent 属性//有缺陷，不使用
读取元素节点内容
var txt = document.getElementById(“intro”).innerHTML;
document.write(txt);
修改元素节点内容
document.getElementById(“intro”).innerHTML = “hello”;
获取某一元素节点的属性
node.getAttribute( attrName )
设置某一元素节点的属性
node.setAttribute( attrName，value )
当属性存在时，为修改相应属性值
当属性不存在时，为添加相应属性
删除某一元素节点的属性
node.removeAttribute( attrName )
判断某一元素节点是否含有某属性
node.hasAttribute( attrName )
返回值为布尔值 true/false

    设置节点属性 当属性不存在时，添加相应属性
    three.setAttribute("class", "red");

    当属性存在时，为修改相应属性值
   three.setAttribute("class", "green");

		var btn2=document.getElementById("btn2");
		btn2.onclick=function(){
			this.parentNode.firstElementChild.removeAttribute("class");//移除class属性
		}
		btn2.onclick=function(){
			var isExist=this.parentNode.firstElementChild.hasAttribute("class");//判断是否有class
			console.log(isExist);//返回判断结果
			if(isExist==true)
			{
				this.parentNode.firstElementChild.removeAttribute("class");//移除class属性
			}
		}

DOM 操作注意事项：

 获取 DOM 节点的操作要在被浏览器加载之后进行
 <script>标签放在 HTML 内容后面，即<body>结束标签前面
 通用性强，几乎所有浏览器均支持
 操作比较复杂，书写代码量过大
 DOM 节点、DOM 树与元素树
 访问 DOM 元素节点的方式
 直接访问
 间接访问
 特殊节点访问
 元素节点的属性操作
 增、删、改、查、判断方法
 元素节点的文本内容操作 —— innerHTML

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>综合练习</title>
    <style>
    body {
        padding: 50px;
    }

    td {
        width: 100px;
    }
    </style>
</head>

<body>
    <table id="tab" border="1" cellspacing="0">
        <tr>
            <td>
                <button>删除本行0</button>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>
                <button>删除本行1</button>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>
                <button>删除本行2</button>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>
                <button>删除本行3</button>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>
                <button>删除本行4</button>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>
                <button>删除本行5</button>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>
                <button>删除本行6</button>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>
                <button>删除本行7</button>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <script>
    //效果：点击按钮，删除按钮所在行
    var button = document.getElementsByTagName("button"); //类似数组
    var tab = document.getElementById('tab')
    for (var i = 0; i < button.length; i++) { //遍历类似数组
        button[i].onclick = function() {
            // this.parentNode.parentNode.innerHTML = "";
            tab.children[0].removeChild(this.parentNode.parentNode)
        }

    }
    </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    body {
        padding: 50px;
    }

    #div {
        display: inline-flex;
        flex-wrap: wrap;
    }

    .circle {
        width: 100px;
        height: 100px;
        margin: 15px;
        border-radius: 50%;
    }
    </style>
</head>

<body>
    <div id="div">
        <div class="circle" style="background:rgba(100,100,200,0.4)"></div>
    </div>
    <script>
    //效果：点击桌面圆，然后添加一个随机颜色的圆

    //第一步：随机颜色函数
    function color() {
        var r = parseInt(Math.random() * 255);
        var g = parseInt(Math.random() * 255);
        var b = parseInt(Math.random() * 255);
        var a = Math.random() * 0.7 + 0.3;
        //a = a.toFixed(2)  //保留两位小数
        var rgba = "rgba(" + r + "," + g + "," + b + "," + a + ")";

        return rgba;
    }

    //第二步：添加随机颜色圆函数
    function circle(that) {
        that.innerHTML += '<div class="circle" style="background:' + color() + '"></div>';//字符串拼接
    }

    //第三步：为div绑定函数功能
    var div = document.getElementById("div");
    div.setAttribute("onclick", "circle(this)");
    
    </script>
</body>

</html>

<body>
    <p>我喜欢的水果:</p>
    <ul id="fruit">
        <li>百香果</li>
        <li>山竹</li>
        <li class="three">火龙果</li>
        <li>猕猴桃</li>
    </ul>
    <p>我喜欢的动物:</p>
    <ul id="animal">
        <li>小猴子</li>
        <li>狮子</li>
        <li class="three">小猪</li>
        <li>大熊猫</li>
    </ul>
    <script>
    //类似数组对象 具有长度属性，可以遍历，但不是真正的数组，不具有数组的方法
    // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Typed_arrays


    //类似数组对象遍历
    var p = document.getElementsByTagName("p");//返回类似数组对象
    for (var i = 0; i < p.length; i++) {
        document.write(p[i].innerHTML)
        document.write("<br/>");
    }
    </script>

CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生