DOM03-节点层次-Element类型

除Document类型之外,Element类型就要算是Web编程中最常用的类型了.

Element类型用于表现XML或HTML元素,提供了对元素标签名,子节点及特性的访问.具有以下特征

  • nodeType的值为1;
  • nodeName的值为元素的标签名;
  • nodeValue的值为null;
  • parentNode可能是Document或Element;
  • 其子节点可能是Element,Text,Comment,ProcessingInstruction,CDATASection或EntityReference

1.访问元素

html代码

<div id="myDiv" class="bbb" title="wsl" style="color: pink;" onclick="click()">汪苏泷</div>

要访问元素标签名,可以使用nodeName属性,也可以使用tagName

 //取标签
    var div = document.getElementById("myDiv");
    console.log(div.tagName);
    console.log(div.nodeName);

输出结果:
在这里插入图片描述

2.HTML元素

每个HTML元素中都存在以下标准特性

  1. id
  2. title
  3. lang
  4. dir 语言的方向 值为"ltr"(left to right 从左到右) 其他:“rtl” (right to left 从右到左)
  5. className 与元素class特性对应 即为元素指定的CSS类
 //1.HTML元素
    console.log(div.id+" "+div.className+" "+div.title);

输出结果
在这里插入图片描述

3.取得特性

console.log(div.getAttribute("id"));
console.log(div.getAttribute("class"));

输出结果
在这里插入图片描述

特殊情况

//特殊:style 和 onclick 特性访问的方式和属性访问的方式不同
    //style getAttribute返回css样式代码 属性访问返回对象
    console.log(div.getAttribute("style"));
    console.log(div.style);
    //onclick getAttribute返回相应代码串的字符串 属性访问则会返回JavaScript函数
    
    function click(){
        alert("点击");
    }
    
    console.log(div.onclick);
    console.log(div.getAttribute("onclick"));

输出结果
在这里插入图片描述

4.设置特性

div.setAttribute('id','myDiv2');
console.log(div.getAttribute('id'));

输出结果
在这里插入图片描述

发布了40 篇原创文章 · 获赞 6 · 访问量 5868
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 创作都市 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览