Dom(节点篇)

最新推荐文章于 2023-08-02 23:40:31 发布

野猪麦兜

最新推荐文章于 2023-08-02 23:40:31 发布

阅读量199

点赞数 1

分类专栏： JavaScript 文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_58242432/article/details/121993547

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

理解：文档对象模型（Document Object Model）

一，getElementById()

二，getElementsByClassName()

三，getElementsByName()

四，getElementsByTagName()

五，querySelector()与querySelectorAll()

六，getAttribute()，setAttribute()，removeAttribute()

七，innerHTML，innerText，outerHTML

八，属性分类：固有属性，自定义属性

一，getElementById()

理解：通过id获取元素节点，返回元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Dom</title>
		<script type="text/javascript">
        window.onload = function(){
        var box = document.getElementById("box");
        console.log(box);
        }
        </script>
    </head>
    <body>
		<div id="box" class="obox" title="盒子" name="mybox">
			<h3>这是一个盒子</h3>
		</div>
	</body>
</html>

二，getElementsByClassName()

理解：通过类名（class）获取元素节点，返回数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Dom</title>
		<script type="text/javascript">
        window.onload = function(){
        var box = document.getElementsByClassName("obox");
        console.log(box);
        }
        </script>
    </head>
    <body>
		<div id="box" class="obox" title="盒子" name="mybox">
			<h3>这是一个盒子</h3>
		</div>
	</body>
</html>

三，getElementsByName()

理解：通过name属性获取元素节点，返回数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Dom</title>
		<script type="text/javascript">
        window.onload = function(){
        var box = document.getElementsByName("mybox");
        console.log(box);
        }
        </script>
    </head>
    <body>
		<div id="box" class="obox" title="盒子" name="mybox">
			<h3>这是一个盒子</h3>
		</div>
	</body>
</html>

四，getElementsByTagName()

理解：通过标签名获取元素节点，返回数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Dom</title>
		<script type="text/javascript">
        window.onload = function(){
        var box = document.getElementsByTagName("div");
        console.log(box);
        }
        </script>
    </head>
    <body>
		<div id="box" class="obox" title="盒子" name="mybox">
			<h3>这是一个盒子</h3>
		</div>
	</body>
</html>

五，querySelector()与querySelectorAll()

理解：querySelector()=》通过标签名、类名、id获取元素节点，返回元素

querySelectorAll()=》通过标签名、类名获取元素节点，返回数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Dom</title>
		<script type="text/javascript">
        window.onload = function(){
        var list = document.querySelector(".list");
		var oli = list.querySelectorAll("li");
        console.log(list)
        console.log(oli)
        }
        </script>
    </head>
    <body>
		<ul class="list">
			<li>列表内容1</li>
			<li>列表内容2</li>
			<li>列表内容3</li>
			<li>列表内容4</li>
			<li>列表内容5</li>
		</ul>
	</body>
</html>

六，getAttribute()，setAttribute()，removeAttribute()

理解：getAttribute(attributename)=》方法返回指定属性名的属性值（attributename：必需，需要获得属性值的属性名称）

setAttribute(attributename,attributevalue)=》方法添加指定的属性，并为其赋指定的值，如果这个指定的属性已存在，则仅设置/更改值（attributename：必需，您希望添加的属性的名称，attributevalue：必需，您希望添加的属性值）

removeAttribute(attributename)=》方法删除指定的属性（attributename：必需，您希望移除的属性的名称）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Dom</title>
		<script type="text/javascript">
        window.onload = function(){
        var box = document.querySelector("#box");
          console.log(box.getAttribute('title'));
          box.setAttribute('title','新盒子');
          console.log(box.getAttribute('title'));
          box.removeAttribute('title')
          console.log(box.getAttribute('title'));
        }
        </script>
    </head>
    <body>
		<div id="box" class="obox" title="盒子" name="mybox">
			<h3>这是一个盒子</h3>
		</div>
	</body>
</html>

七，innerHTML，innerText，outerHTML

理解：innerHTML=》从对象的起始位置到终止位置的全部内容, 不包括本身HTML标签

innerText=》打印标签之间的纯文本信息，显示标签，标签无效

outerHTML=》除了包含innerHTML的全部内容外, 还包含对象标签本身

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Dom</title>
		<script type="text/javascript">
        window.onload = function(){
        var box = document.querySelector("#box");
        console.log(box.innerHTML);
        console.log(box.innerText);
        console.log(box.outerHTML);
        }
        </script>
    </head>
    <body>
		<div id="box" class="obox" title="盒子" name="mybox">
			<h3>这是一个盒子</h3>
		</div>
	</body>
</html>

八，属性分类：固有属性，自定义属性

理解：顶语法，中括号表示法是可以获取到固有属性的值，拿不到自定义属性的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Dom</title>
		<script type="text/javascript">
        window.onload = function(){
        var box = document.querySelector("#box");
          console.log(box.title);
          console.log(box.id);
          console.log(box.className);
          console.log(box["id"]);
          console.log(box.name);//"undefined"
          console.log(box.getAttribute('name'))
        var i1 = document.querySelector("input");
		  console.log(i1.name);//"mytext"
        }
        </script>
    </head>
    <body>
		<div id="box" class="obox" title="盒子" name="mybox">
			<h3>这是一个盒子</h3>
		</div>
        <input type="text" name="mytext"/>
	</body>
</html>