javascript文档对象模型-Element对象

作者: 鲁智深 分类: JAVASCRIPT 发布时间: 2016-03-11 15:27

获取子元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01获取子元素</title>
</head>
<body>
    <ul id="parent">
        <li>苹果</li>
        <li id="mi">小米</li>
        <li>华为</li>
    </ul>
    <script>
         var id = document.getElementById('parent');
         //element.parentElement获取父元素
         var mi = document.getElementById('mi');
         console.log(mi.parentElement);
             
         //firstElementChild: 获取指定标签的第一个子元素
         first = id.firstElementChild;
         console.log(first);

         //lastElementChild: 获取指定标签的最后一个子元素
         last = id.lastElementChild;
         console.log(last);

         //children: 获取指定标签的所有子元素
         children = id.children;
         console.log(children);

         // 获取所有子元素的个数childElementCount
         console.log(id.childElementCount);

         //也可以用此方法计算个数
         console.log(id.children.length);
    </script>
</body>
</html>

获取兄弟元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02获取兄弟元素</title>
    <!-- <script src="MyTool.js"></script> -->
</head>
<body>
<ul>
    <li>苹果</li>
    <li id="mi">小米</li>
    <li>华为</li>
</ul>
<script>
    /*
        * previousElementSibling获取指定节点的前一个兄弟节点---》元素---不支持IE8
        * nextElementSibling获取指定节点的后一个兄弟节点---》元素---不支持IE8
        * previousSibling: 获取指定节点的前一个兄弟节点。---》元素节点
        * nextSibling: 获取指定节点的后一个兄弟节点。---》元素节点
     */
     var id = document.getElementById('mi');
     console.log(id.previousElementSibling);//<li>苹果</li>
     console.log(id.nextElementSibling);//<li>华为</li>
</script>
</body>
</html>

DOM查询

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM查询</title>
</head>
<body>
<ul id="parent">
    <li>苹果</li>
    <li id="xigua">西瓜</li>
    <li class="banana">香蕉</li>
</ul>
<script>
    /*
        Element对象也提供了相关的DOM查询的方法
        * 返回值为HTMLCollection,依旧是动态NodeList
          * getElementsByTagName()
          * getElementsByClassName()

        * 返回值为NodeList,依旧是静态NodeList
          * querySelector()
          * querySelectorAll()
        Document、Node和Element对象之间的关系
        * Document和Element对象都是继承于Node
        * Document提供的DOM查询与Element提供的DOM查询之间没有关系
     */
    var parent = document.getElementById('parent');
    console.log(parent.getElementsByTagName('li'));//获取所有子元素
    console.log(parent.getElementsByClassName('banana'));//获取class属性
    console.log(parent.querySelector('li'));//获取第一个子元素

操作属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作属性</title>
</head>
<body>
<ul id="parent">
    <li>苹果</li>
    <li id="mi" class="miClass">小米</li>
    <li>梨子</li>
</ul>
<script>
    // 使用Node对象的方式,添加一个新的子节点 - <li id="huawei">华为</li>
     var parent = document.getElementById('parent');
     var li = document.createElement('li');
     var id = document.createAttribute('id');
     var text = document.createTextNode('华为');
     id.nodeValue = 'huawei';
     li.setAttributeNode(id);
     li.appendChild(text);
     parent.appendChild(li);

    /*
      element.getAttribute(属性名)获取 HTML 页面标签的指定属性值
      element.setAttribute(属性名, 属性值)设置 HTML 页面标签的指定属性,无返回值
      element.removeAttribute(属性名)删除 HTML 页面标签的指定属性
      element.hasAttribute(属性名)判断 HTML 页面标签的是否含有属性
    */
     var element = document.getElementById('mi');
     console.log(element.getAttribute('class'));//找到元素的的属性值
     element.setAttribute('class','miClass0001');//无返回值
     element.setAttribute('name','dapeng');
     element.removeAttribute('class');//删除页面标签
     console.log(element.hasAttribute('class'));//boor值
     
     // 使用element对象的方式,添加一个新的子节点 - <li id="chuizi">锤子</li>
     var lichuizi = document.createElement('li');
     var textchuizi = document.createTextNode('锤子');
     lichuizi.setAttribute('id','chuizi');
     console.log(lichuizi);//输出<li id="chuizi"></li>
     lichuizi.appendChild(textchuizi);
     parent.appendChild(lichuizi);  
</script>
</body>
</html>

操作文本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作文本</title>
</head>
<body>
<p id="p1">这是一个段落内容.</p>
<script>
       /*
         textNode.nodeValue
         文本节点的 nodeValue 属性可以得到文本内容,也可以设置文本内容
       */
      var p1 = document.getElementById('p1');
      var first = p1.firstChild;//先获取第一个子节点
      console.log(first.nodeValue);//这是一个段落内容.

      /*
        获得元素的文本内容:
        document.getElementsByTagName("BUTTON")[0].textContent;
        textContent属性 -> 该属性是Node对象的属性
        * 注意 -> 浏览器兼容问题 -> IE 8及之前的版本不支持
        * IE 8及之前版本的浏览器提供了另一个属性
          * innerText属性 -> 作用与textContent属性作用保持一致
      */
       console.log(p1.textContent);//这是一个段落内容.
       console.log(p1.innerText);//这是一个段落内容.

    /*    属性名       获取文本的结果                浏览器支持情况
       innerText    不能获取被CSS样式隐藏的文本内容   Firefox 不支持
       textContent  可以获取全部文本内容             IE 8及之前版本不支持 */

    //浏览器兼容解决方案
       function getText(element){
           var result;
           if(element.textContent === undefined){//判断获得元素的文本内容是否为undefined
               result =  element.innerText;//是,选择innerText获得文本
           }else{
               result =  element.textContent;//否,选择textContent获得文本
           }
           return result;
       }
       console.log(getText(p1));
</script>
</body>
</html>

操作文本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>innerHTML</title>
</head>
<body>
<p id="p1">这是一个段落. <a href="#">链接</a></p>
<div id="show"></div>
<script>
      /*
        innerHTML 属性取得开始和结束标签之间的 HTML。
        tablerowObject.innerHTML = HTML
      */
      var p1 = document.getElementById('p1');
      console.log(p1.innerHTML);//这是一个段落. <a href="#">链接</a>
      console.log(p1.textContent);//这是一个段落. 链接
      /*
        innerHTML 属性指定(替换)开始和结束标签之间的 HTML。
      */
      console.log(p1.innerHTML = '得到的<span>付付</span>付付')//更新

      // 向<div>标签添加一个无序列表
      var show = document.getElementById('show');
      show.innerHTML = '<ul><li>1</li><li>2</li><li>3</li></ul>';

      //安全问题(innerHTML属性不操作用户输入的内容)
</script>
</body>
</html>

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注