javaScript(十九）Element

最新推荐文章于 2024-04-18 17:50:16 发布

李不烦

最新推荐文章于 2024-04-18 17:50:16 发布

阅读量475

点赞数 1

分类专栏： JavaScript 文章标签： JavaScript Element

本文链接：https://blog.csdn.net/LWYYYYYY/article/details/90691590

版权

JavaScript 专栏收录该内容

67 篇文章 1 订阅

订阅专栏

1. DOM 元素树

还记得下面这张图吗？

DOM 访问或操作 HTML 页面内容主要是依靠 DOM 节点树这个模型。DOM 有三个主要对象，除了 Document 和 Node 之外，还有一个就是 Element 对象。Element 对象描述了所有相同种类的元素所普遍具有的方法和属性，也是访问和操作 HTML 页面内容的主要途径之一。Element 对象和 Node 对象类似，同样提供了一个 DOM 元素树这个模型。如下图所示:

2. 遍历元素

2.1 获取父元素

通过 HTML 页面的指定标签查找其父元素，我们可以通过如下属性实现:

element.parentElement

var childDiv1=document.getElementById("childDiv1");
        var parentDiv=childDiv1.parentElement;
        parentDiv.style.backgroundColor="red";

2.2 获取子元素

通过 HTML 页面的指定标签查找其子元素，我们可以通过如下属性实现:

firstElementChild: 获取指定标签的第一个子元素。
友情提示：IE8及以下版本不支持此方法；

var parentDiv=document.getElementById("parentDiv");
       var firstElementChild= parentDiv.firstElementChild;
       console.log(firstElementChild);
       firstElementChild.style.backgroundColor="orange";

lastElementChild: 获取指定标签的最后一个子元素。
友情提示：IE8及以下版本不支持此方法；

var parentDiv=document.getElementById("parentDiv");
var lastElementChild=parentDiv.lastElementChild;
lastElementChild.style.backgroundColor="orange";

children: 获取指定标签的所有子元素。

  var parentDiv=document.getElementById("parentDiv");
         var children= parentDiv.children;
         for (var i=0;i<children.length;i++){
             children[i].style.backgroundColor="red";
         }

2.3 获取兄弟元素

通过 HTML 页面的指定标签查找兄弟元素，我们可以通过如下属性实现:

previousElementSibling: 获取指定节点的前一个兄弟节点。//IE8及以下版本不支持

  var two=document.getElementById("two");
  var preEle=two.previousElementSibling;
  preEle.style.backgroundColor="red";

nextElementSibling: 获取指定节点的后一个兄弟节点。//IE8及以下版本不支持

var two=document.getElementById("two");
var nextEle=two.nextElementSibling;
nextEle.style.backgroundColor="red";

3. 操作属性

Element 对象提供的属性操作的方法，是实际开发中应用最多的。（因为 Element 对象操作属性要比 Node 对象简便。）

3.1 获取属性

获取 HTML 页面标签的指定属性值，我们可以通过以下方法实现:

element.getAttribute(属性名)；

 var one=document.getElementById("one");
 var clas=one.getAttribute("class");
alert(clas);

3.2 设置属性

设置 HTML 页面标签的指定属性，我们可以通过以下方法实现:

element.setAttribute(属性名, 属性值)//会覆盖之前的属性值

var one=document.getElementById("one");
one.setAttribute("title","我是标题");

3.3 删除属性

删除 HTML 页面标签的指定属性，我们可以通过以下方法实现:

element.removeAttribute(属性名)；

var one=document.getElementById("one");
one.removeAttribute("title");

3.4 判断是否含有属性

判断 HTML 页面标签的是否含有属性，我们可以通过以下方法实现:

element.hasAttribute(属性名);//判断指定标签是否含有指定属性
hasAttributes()方法
* Node对象的方法
* 作用 - 判断指定标签是否包含属性

var one=document.getElementById("one");
var result=one.hasAttribute("title");//true

4. 获取或更新文本

通过学习 DOM 查询我们知道，获取或更新文本就是对文本节点的操作。

文本节点的 nodeValue 属性可以得到文本内容，也可以设置文本内容。

textNode.nodeValue

 <ul class="list-group">
					<li id="one" class="list-group-item">这是一个 id 为 one 的选项</li>
</ul>

<script type="text/javascript">
       var btn=document.getElementById("btn");
       btn.onclick=function () {
           var one=document.getElementById("one");
           var textNode=one.firstChild.nodeValue;
           alert(textNode);
	   }
</script>

4.2 通过元素的innerText 或 textContent 属性获取或更新文本

innerText 或 textContent 属性都可以用于获取或更新文本。我们先来掌握如何使用这两个属性，再来讨论它们之间的区别。我们可以通过如下示例来学习如何通过 innerText 属性获取或更新文本:

<script type="text/javascript">
        var btn=document.getElementById("btn");
        btn.onclick=function () {
            var one=document.getElementById("one");
            var innerText= one.innerText;
            alert(innerText);
        }
    </script>

学习如何通过 textContent 属性获取或更新文本:

  <script type="text/javascript">
        var btn=document.getElementById("btn");
        btn.onclick=function () {
            var one=document.getElementById("one");
            var text= one.textContent;
            alert(text);
        }
    </script>

innerText 与 textContent 属性的区别

那 innerText 或 textContent 属性之间有什么区别呢？我们还是先通过一个示例入手:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文本操作</title>
    <link rel="stylesheet" href="css/style.css" />
    <style type="text/css">
        b {
            display: none;
        }
    </style>
</head>
<body>
<button id="btn1">点点1</button>
<ul class="list-group">
    <li id="one" class="list-group-item">这是一个id为one的选项</li>
    <li id="two" name="list" class="list-group-item">这是一个id为<b>two</b>的选项</li>
</ul>
</body>
<script>
    var btn1=document.getElementById("btn1");
    btn1.onclick=function () {
        var one=document.getElementById("one");
        var text1=one.innerText;
        console.log(text1);//这是一个id为one的选项
        var text2=one.textContent;
        console.log(text2);//这是一个id为one的选项

        var two=document.getElementById("two");
        var text1=two.innerText;
        console.log(text1);//这是一个id为的选项
        var text2=two.textContent;
        console.log(text2);//这是一个id为two的选项

    }


</script>
</html>

属性名	获取文本的结果	浏览器支持情况
innerText	不能获取被 CSS 样式隐藏的文本内容	Firefox 不支持
textContent	可以获取全部文本内容(包含所有后代节点的文本内容)	IE 8及之前版本不支持

获取或更新 HTML

我们可以通过 innerHTML 属性来获取或更新 HTML 页面的指定标签所包含的 HTML 代码内容。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>innerHTML属性</title>
		<link rel="stylesheet" href="css/style.css" />
		<style type="text/css">
			body {
				padding: 100px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="col-md-4">
				<p><button id="btn" class="btn btn-primary btn-block">innerHTML属性</button></p>
			</div>
			<div class="col-md-8">
				<ul id="ull" class="list-group">
					<li id="one" class="list-group-item">这是一个 id 为 one 的选项!</li>
				</ul>
			</div>
		</div>

	</body>
    <script type="text/javascript">
        var btn=document.getElementById("btn");
        btn.onclick=function () {
            var ull=document.getElementById("ull");
            var ullHTML=ull.innerHTML;
            console.log(ullHTML);// <li id="one" class="list-group-item">这是一个 id 为 one 的选项!</li>

            // 更新HTML
            ull.innerHTML='<li id="11" class="list-group-item">我是新的</li>';
            console.log(ull.innerHTML);// <li id="11" class="list-group-item">我是新的</li>
        }
    </script>
</html>

innerHTML属性
作用 - 获取或设置指定标签的HTML代码
注意 - 使用 innerHTML 属性的安全性很低(可能接收一些恶意代码)
解决 - 使用 innerHTML 属性时，对应的值不能是用户输入内容

今天风和日丽

李不烦

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript(十九）Element

1. DOM 元素树还记得下面这张图吗？DOM 访问或操作 HTML 页面内容主要是依靠 DOM 节点树这个模型。DOM 有三个主要对象，除了 Document 和 Node 之外，还有一个就是 Element 对象。Element 对象描述了所有相同种类的元素所普遍具有的方法和属性，也是访问和操作 HTML 页面内容的主要途径之一。Element 对象和 Node 对象类似，同样提供了一...
复制链接

扫一扫