DOM1----(获取节点，操作元素)

realllll
123 阅读3分钟

DOM

什么是DOM:

DOM（文档对象模型）：document object model。

DOM 是document object model 它是W3C产业联盟制定的浏览器对程序员提供的对HTML文档操作的接口

把文档中的代码翻译成一个对象模型

在这个模型中 所有相关的标签属性注释文本等等12种数据 都翻译为一种类型的对象 统称节点对象

这些对象之间在文档模型数据结构中存在某种关系: 根节点 父子节点 同胞节点等等

1.只有一个根节点document

2.除了根节点外所有节点都有唯一的一个父节点

3.document是window对象的属性

4.全局对象模型属于BOM操作 Browser Object Model 把浏览器对外提供的接口翻译为一个对象 BOM操作会在接下来的知识点讲到 它不属于标准的接口 但是浏览器厂商都提供了几乎一样的功能 5.元素的属性也是独立节点 叫属性节点 但是不是元素节点的子节点

获取元素

1.通过方法获取节点

旧方法：

通过id查找：document.getElementById 查找速度最快。返回标签对象或者null

通过类名查找：document.getElementsByClassName//返回类数组（装的元素）/空类数组

通过name查找：document.getElementsByName//返回类数组（装的元素）/空类数组

通过标签名查找：document.getElementsByTagName//返回类数组（装的元素）/空类数组

<body>
    <nav class="2">222</nav>
    <div id="1">
        1111

    </div>
    <input type="text" name="3">
    <table>
        <tr>
            <td></td>
        </tr>
    </table>
</body>
<script>
    var re1 = document.getElementById("1");
    var re2 = document.getElementsByClassName("2")
    var re3 = document.getElementsByName("3")
    var re4 = document.getElementsByTagName("table")
    console.log(re1, re2, re3, re4);
</script>

image.png

H5出的新方法：

通过选择器选择查找：返回一个类数组

document.querySelector//通过选择器进行查询，选取符合条件的第一个，没有就返回【】

document.querySelectorAll//通过选择器进行查询，获取所有符合条件的，没有就返回【】

<body>
<nav class="2">222</nav>
    <nav>3333</nav>
    <nav>3333</nav>
    <nav>3333</nav>
    <nav>3333</nav>
    <div id="1">
        1111

    </div>
    <div>
        3333
    </div>

    <div>
        44444
    </div>
</body>
<script>

    var re1 = document.querySelector("div");
    var re2 = document.querySelectorAll("nav")
    console.log(re1);
</script>

image.png

系统提供的直接获取的方式(除了body不常用):

body标签:document.body

form表单们：document.forms

a标签们：document.anchors

图片们：document.images

连接们：document.links

当前文档的网址：document.URL

通过关系获取节点

节点与元素的区别：

节点： 根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

  • 整个文档是一个文档节点

  • 每个 HTML 元素是元素节点

  • HTML 元素内的文本是文本节点

  • 每个 HTML 属性是属性节点

  • 注释是注释节点

元素：元素是特定类型的节点 element (Node.ELEMENT_NODE)，以及文档、注释、文本等类型。

简而言之，元素是使用HTML文档中的标记编写的节点。 html，head，title，body，h2，p都是元素，因为它们由标签表示。

通过关系获取元素：

   <body>
	<div id="box1">hello
		<div class="box2" id="box4">2</div>
		<div class="box2">
			<div class="box3" id="box5">box3</div>
		</div>
		<div class="box2" id="box6">4</div>
	</div>

	<script>
		var box4 = document.querySelector("#box4")
		//爸爸
		var box4baba = box4.parentElement
		console.log(box4baba)
		var box5 = document.querySelector("#box5")
		// console.log(box5.parentElement.parentElement.parentElement.parentElement.parentElement)
		console.log(box5.parentNode.parentNode.parentNode.parentNode.parentNode)


		// 子节点
		var box4 = document.querySelector("#box1")
		var arr = box4.children //子元素们
		var arr2 = box4.childNodes //子节点们
		console.log(arr, arr2)

		var box = document.querySelector("#box4")
		console.log(box.children, 111)


		// 弟弟节点
		var box = document.querySelector("#box4")
		console.log(box.nextElementSibling) //弟弟元素
		console.log(box.nextSibling) //弟弟节点
		var box6 = document.querySelector("#box6")
		console.log(box6.nextElementSibling) //弟弟元素
		console.log(box6.nextSibling) //弟弟节点


		// 哥哥节点
		var box = document.querySelector("#box4")
		console.log(box.previousElementSibling) //弟弟元素
		console.log(box.previousSibling) //弟弟节点
		var box6 = document.querySelector("#box6")
		console.log(box6.previousElementSibling) //哥哥元素
		console.log(box6.previousSibling) //哥哥节点


		// 第1个子元素
		var box = document.querySelector("#box4")
		console.log(box.firstElementChild) //第1个子元素
		console.log(box.firstChild) //第1个子节点

		// 最后一个子元素
		var box = document.querySelector("#box4")
		box.children[box.children.length - 1]
		box.childNodes[box.childNodes.length - 1]
		console.log(box.lastElementChild) //最后一个子元素
		console.log(box.lastChild) //最后一个子节点

image.png

检索子元素是父元素中的第几个：

封装一个函数

		Object.prototype.indexof1 = function () {
			var arr = this.parentElement.children
			for (let i = 0; i < arr.length; i++) {
				if (arr[i] === this) {
					return i
				}
			}
		}
		var box = document.querySelector("#box6")
		console.log(box.indexof1())

元素的操作

操作元素

JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容 、属性等。注意以下都是属性

1、改变元素内容

innerText

从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉。

 element.innerText

innerHTML

起始位置到终止位置的全部内容，包括HTML标签，同时保留空格和换行


     element.innerHTML

<body>
    <div></div>
    <p>
        我是文字
        <span>123</span>
    </p>

    <script>
        // innerText 和 innerHTML的区别 
        // 1. innerText 不识别html标签,去除空格和换行
        var div = document.querySelector('div');
        div.innerText = '<strong>今天是：</strong> 2019';
        // 2. innerHTML 识别html标签 保留空格和换行的
        div.innerHTML = '<strong>今天是：</strong> 2019';
        // 这两个属性是可读写的  可以获取元素里面的内容
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);
    </script>
</body>

image.png

image.png

image.png 分析：innerText 不识别html标签,去除空格和换行，因此在页面上显示strong标签，在控制台上不打印span标签

2、改变元素属性

// img.属性
img.src = "xxx";

input.value = "xxx";
input.type = "xxx";
input.checked = "xxx";
input.selected = true / false;
input.disabled = true / false;

3、改变样式属性

我们可以通过 JS 修改元素的大小、颜色、位置等样式。

  • 行内样式操作
// element.style
div.style.backgroundColor = 'pink';
div.style.width = '250px';
  • 类名样式操作
// element.className

**注意 **：

  • JS里面的样式采取驼峰命名法，比如 fontSize ，backgroundColor

  • JS 修改 style 样式操作 ，产生的是行内样式，CSS权重比较高

  • 如果样式修改较多，可以采取操作类名方式更改元素样式

  • class 因为是个保留字，因此使用className来操作元素类名属性

  • className 会直接更改元素的类名，会覆盖原先的类名

<body>
    <div class="first">文本</div>
    <script>
        // 1. 使用 element.style 获得修改元素样式  如果样式比较少 或者 功能简单的情况下使用
        var test = document.querySelector('div');
        test.onclick = function() {
            // this.style.backgroundColor = 'purple';
            // this.style.color = '#fff';
            // this.style.fontSize = '25px';
            // this.style.marginTop = '100px';
            // 让我们当前元素的类名改为了 change

            // 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
            // 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器
            // this.className = 'change';
            this.className = 'first change';
        }
    </script>
</body>

4、总结

image.png

排他思想

如果有同一组元素，我们相要某一个元素实现某种样式，需要用到循环的排他思想算法：

  • 所有元素全部清除样式（干掉其他人）

  • 给当前元素设置样式 （留下我自己）

  • 注意顺序不能颠倒，首先干掉其他人，再设置自己

案列：点击一列变色，其他列不变色

<body>
	<style>
		table {
			border: 1px red solid;
		}

		tr {
			width: 100%;
			height: 40px;
		}

		td {
			width: 100px;
			border: 1px darkred solid;
		}
	</style>

	<table id="tb" cellspacing="0">
		<tr>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
		</tr>
		<tr>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
		</tr>
		<tr>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
		</tr>
		<tr>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
		</tr>
	</table>
	<script>
		Object.prototype.indexof1 = function () {
			var arr = this.parentElement.children
			for (let i = 0; i < arr.length; i++) {
				if (arr[i] === this) {
					return i
				}
			}
		}
	</script>
	<script>
		var tb = document.querySelector("#tb")
		var trs = document.querySelectorAll("tr")
		var tds = document.querySelectorAll("td")
		console.log(tds)
		for (let i = 0; i < tds.length; i++) {
			tds[i].onclick = function () {
				// console.log(this,tds[i])
				//1.把所有的td的背景颜色设置为白色
				//2.获取当前点击的元素是一横排中的第x个元素
				//3.把没一横排的第x个元素 设置为red
				//排它思想
				tds.forEach((el) => {
					// console.log(el,11)
					el.style.backgroundColor = "white"
				})
				let x = tds[i].indexof1()
				trs.forEach((el) => {
					//el是tr元素
					el.children[x].style.backgroundColor = "red"
				})
			}
		}
	</script>
</body>

image.png

image.png

avatar
文章
阅读
粉丝