element 验证出现英文_第42节 Element元素节点-Javascript-王唯

本内容是《Web前端开发之Javascript视频》的课件，请配合大师哥《Javascript》视频课程学习。

Element类型用于表示XML或HTML元素，提供了对元素标签名、子节点及特性的访问；

Element类继承自Node接口；它继承了Node接口中的所有属性和方法，比如parentNode、childNode等；同时，它在Node接口的基础上扩展了自己的属性和方法；

Element类型的特征：

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

var mydiv = document.getElementById("mydiv");console.log(mydiv.nodeType);  // 1console.log(mydiv.nodeName);  // DIVconsole.log(mydiv.nodeValue);  // nullconsole.log(mydiv.parentNode);  // console.log(mydiv.childNodes);  // NodeList

Element的属性：

id属性：表示元素的标识符，与全局属性id对应；

var mydiv = document.getElementById("mydiv");console.log(mydiv.id);mydiv.id = "yourdiv";console.log(mydiv.id);var yourdiv = document.getElementById("yourdiv");console.log(yourdiv.id);

tagName属性：与nodeName属性一样，可以返回元素的标签名，在HTML文档中返回大写，在XML中返回原生，因此在使用tagName时，最后使用toLowerCase()转换；

var mydiv = document.getElementById("mydiv");console.log(mydiv.tagName);  // DIVif(mydiv.tagName.toLowerCase() == "div"){    //...}

一般使用tagName，因为从字义上理解更加清晰；

Element的子类型HTMLElement：

HTMLElement类型直接继承自Element，因此，HTML元素即属于HTMLElement类也属于Element类；

所有HTML元素都由HTMLElement类型或其子类型表示，比如：HTMLDIVElement，就是具体的div元素的类型；

HTMLElement类型在Element类的基础上，并添加了一些属性，这些属性分别对应于每个HTML元素中都存在的标准特性：id、title、lang、dir、className；

这些属性都是可读可写的，并且也是动态的；

// …

Element特性(属性)：

每个元素都有若干个特性，这些特性的用途是给出相应元素或其内容的附加信息；DOM为Element对象定义了一些API来获取或设置这些XML或HTML属性(特性)；

操作特性主要有三个方法：

getAttribute()、setAttribute()、removeAttribute()；这些方法可以针对任何特性使用，包括那些以HTMLElement类型属性的形式定义的特性；

getAttribute(attributeName)方法：

返回元素上一个指定的特性值，如果指定的特性不存在，则返回null或 ""；特性的名称不区分大小写；

如果取得class，需要传入class，而不是className；

var mydiv = document.getElementById("mydiv");console.log(mydiv.getAttribute("id"));  // mydivconsole.log(mydiv.getAttribute("class"));  // divclassconsole.log(mydiv.getAttribute("title"));  // null

也可以取得自定义特性(即不是HTML元素的标准特性)，但要注意，根据HTML5的规范，自定义特性应该加上data-前缀以便验证；

console.log(mydiv.getAttribute("custom"));  // customvalueconsole.log(mydiv.getAttribute("data-name"));  // wangwei

任何元素的所有特性，都可以通过DOM元素本身的属性来访问，不过，只有公认的(非自定义)特性才会以属性的形式添加到DOM对象中；但IE可以为自定义特性创建属性；

console.log(mydiv.id);console.log(mydiv.className);console.log(mydiv.myname);  // undefinedconsole.log(mydiv.align);  // left，认为align是公认的var img = document.getElementById("myimg");var imgurl = img.src;console.log(img.id === "myimg");var f = document.forms[0];f.action = "https://www.zeronetwork.cn/do.php";f.method = "POST";

HTML属性名不区分大小写，但Javascript属性名则大小写敏感；从HTML属性名转换到Javascript属性名应该采用小写，但是如果属性名包含不止一个单词，则采用小驼峰式，如：defaultCheded和tabIndex；

有些HTML属性名在Javascript中是保留字，对于这些属性，一般的规则是为该属性名加前缀”html”，如，HTML的for属性在Javascript中变为htmlFor属性，class属性比较特殊，它在Javascript中变成className属性；

表示HTML属性的值通常是字符串，但当属性为布尔值或数值时，Javascript中对应的属性也是布尔值或数值，而不是字符串；

文本框：

style和事件处理程序特性：

style：在通过getAttribute()访问时，返回的style特性值中包含的是CSS文本；而通过属性访问它会返回一个CSSStyleDeclaration对象(由于style属性是用于以编程方式访问元素样式的对象，因此并没有直接映射到style特性，有关CSS编程，后面我们会讲到)；

事件处理程序特性，类似于onclick等这样的事件处理程序，当在特性中使用时，onclick中包含的就是JS代码，使用getAttribute()会返回相应的代码的字符串，但在访问onclick属性时，会返回一个Javascript函数；

var mydiv = document.getElementById("mydiv");console.log(mydiv.getAttribute("style")); // font-size: 14px;color:red;console.log(mydiv.style); // CSSStyleDeclaration or CSS2Propertiesconsole.log(mydiv.getAttribute("onclick"));  // alert('zeronetwork');console.log(mydiv.onclick); // function onclick(event)

setAttribute(name, value)方法：

设置指定元素上的某个特性值，如果特性已经存在，则更新该值，否则，使用指定的名称和值添加一个新的特性；

该接受两个参数：要设置的特性名和值；

此方法可以操作HTML特性也可以操作自定义特性；

var mydiv = document.getElementById("mydiv");mydiv.setAttribute("id","outerdiv");mydiv.setAttribute("class","outerdivclass");mydiv.setAttribute("title","mydiv title");mydiv.setAttribute("style","border-bottom:1px solid;color:purple;");mydiv.setAttribute("custom","custom value");console.log(mydiv.title);  // mydiv titleconsole.log(mydiv.custom);  // undefined

通过该方法设置的特性名会被统一转换成小写形式，即“ID”最终会变成“id”；

mydiv.setAttribute("ID","myID");  // idmydiv.setAttribute("CID","customID");  // cid

布尔特性只要出现在元素上就会被认为是 true，无论它的值是什么；一般来说，应该将 value 设置为空字符串，也有人使用这个属性的名称作为值，虽然不会出现什么问题，但不规范的；

var txtInput = document.getElementById("txtInput");txtInput.setAttribute("readonly",true);// 会渲染成readonly="true"txtInput.setAttribute("readonly",""); // 渲染成readonlyconsole.log(txtInput.readOnly);  // true

因为所有特性都是属性，所以直接给属性赋值可以设置特性的值，但如果添加的是一个自定义的属性，该属性不会自动成为元素的特性；

mydiv.title = "mydiv title";mydiv.style = "border-bottom:1px solid;color:purple;";mydiv.custom = "custom value";  // html中并没有渲染customconsole.log(mydiv.title);  // mydiv titleconsole.log(mydiv.custom);  // custom valueconsole.log(mydiv.getAttribute("title")); // mydiv titleconsole.log(mydiv.getAttribute("custom")); // null

可以通过setAttribute()方法设置class，但不能通过属性设置class，因为class是关键字，需要className进行属性设置；

var mydiv = document.getElementById("mydiv");mydiv.setAttribute("class","att_class");// mydiv.class = "att_class";  // 无效,class是保留字mydiv.className = "att_class";console.log(mydiv.class);  // undefinedconsole.log(mydiv.className);  // att_class

removeAttribute(attrName)方法：

用于从指定的元素彻底删除元素的特性；

此方法不仅会清除特性的值，而且也会从元素中完全删除特性；

此方法并不常用，但在序列化DOM元素时，可以通过它来确切地指定要包含哪些特性；

var mydiv = document.getElementById("mydiv");mydiv.removeAttribute("class");mydiv.removeAttribute("style");mydiv.setAttribute("custom","custom_value");mydiv.removeAttribute("custom");mydiv.title = "mydiv title";mydiv.removeAttribute("title");

hasAttribute(attrName)方法和hasAttributes()方法：

用于检测特性是否存在；其中hasAttribute()需要一个特性参数，判断该元素是否包含有指定的特性，而hasAttributes()检测的是否有特性，具体是什么特性，则不是它所关心的了；

var mydiv = document.getElementById("mydiv");console.log(mydiv.hasAttribute("title"));if(!mydiv.hasAttribute("align"))    mydiv.setAttribute("align","center");console.log(mydiv.hasAttributes());  // true

当属性为布尔值时，hasAttribute()方法特别有用，比如HTML表单的disabled属性，只要判断它有没有这个属性即可，不用管它的值；

attributes属性：

返回该元素所有属性节点的一个实时集合，该集合是一个NamedNodeMap对象，是一个只读的类数组对象，只有Element类型拥有；该属性与NodeList类似，也是一个动态的集合；也可以使用索引方式访问，并且可以枚举；

元素的每个特性都由一个Attr节点表示，Attr对象是一个特殊的Node，不会像普通的Node一样去使用；Attr的name和value属性返回该属性的名字和值；

每个Attr节点都保存在NamedNodeMap对象中；此节点都有nodeName、nodeValue等属性，nodeName就是特性的名称，nodeValue就是特性的值；

var mydiv = document.getElementById("mydiv");console.log(mydiv.attributes);console.log(mydiv.attributes[1]);console.log(mydiv.attributes.title);console.log(mydiv.attributes.custom);mydiv.attributes.title = "wangwei";  // 无效console.log(mydiv.attributes[1].nodeType);  // ATTRIBUTE_NODEconsole.log(mydiv.attributes[1].nodeName);console.log(mydiv.attributes[1].nodeValue);

NamedNodeMap对象：

表示一个无顺序的属性节点 Attr 对象的集合；其是类数组对象，同时也是动态的；

属性和方法：

length属性：返回映射(map)中对象的数量；

getNamedItem(name)：返回给定名称name的属性节点；

item(pos)：返回位于数字pos位置处的节点；(注：各个浏览器会返回不同的顺序)；

setNamedItem(node)：向列表中添加或替换特性节点；

removeNamedItem(name)：从列表中移除特性为name的节点；与removeAttribute()相同，但其会返回被删除的特性(Attr)节点；

可以通过attributes属性使用方括号直接访问特性；

var mydiv = document.getElementById("mydiv");console.log(mydiv.attributes);console.log(mydiv.attributes.item(1));console.log(mydiv.attributes.getNamedItem("name"));console.log(mydiv.attributes[1]);console.log(mydiv.attributes["name"]);mydiv.attributes["id"].nodeValue = "newID";mydiv.attributes.getNamedItem("name").nodeValue = "newName";var deleteStyle = mydiv.attributes.removeNamedItem("style");console.log(deleteStyle);var yourdiv = document.getElementById("yourdiv");yourdiv.attributes.setNamedItem(deleteStyle);var attr = document.createAttribute("dir");attr.nodeValue = "ltr";mydiv.attributes.setNamedItem(attr);

使用attributes属性较麻烦，因此使用getAttribute()、removeAttribute()和removeAttribute()方法比较常用；但在遍历元素的特性时，attributes属性比较方便；

遍历attributes属性：

在需要将DOM结构序列化为XML或HTML字符串时，多数都会涉及遍历元素特性；

// 迭代元素的所有特性，构造成name=”value” name=”value”这样的字符串格式var mydiv = document.getElementById("mydiv");function outputAttributes(element){    var pairs = new Array();    for(var attr in element.attributes){        if(element.attributes[attr] instanceof Attr){            // console.log(attr + element.attributes[attr]);            var attrName = element.attributes[attr].nodeName;            var attrValue = element.attributes[attr].nodeValue;            // console.log(attrName);            pairs.push(attrName + "="" + attrValue + """);        }    }    // 或者使用for循环    // for(var i=0,len=element.attributes.length; i

创建Element元素：

document.createElement(tagName)方法：用于创建一个由标签名称tagName指定的HTML元素，如果用户代理无法识别tagName，则会生成一个未知 HTML 元素；

该方法只接受一个参数，即要创建元素的标签名；此标签名在HTML中不区分大小写，在XML(包括XHTML)中，是区分大小写的；

在创建新元素的同时，也为新元素设置了ownerDocument属性；同时还可以操作元素的特性，为它添加子节点，以及执行其他操作；

新创建的元素，必须添加到文档树中，才能显示出来，可以利用appendChild，insertBefore()或replaceChild()方法；

var div = document.createElement("div");div.innerHTML = "

零点程序员

";div.id = "outerDiv";div.className = "outerDiv";div.setAttribute("style","color:green;");console.log(div.ownerDocument);document.body.appendChild(div);var h3 = document.createElement("h3");h3.setAttribute("onclick","alert('this is zeronetwork');");h3.innerText = "zeronetwork";div.insertBefore(h3, null);

Element的子节点：

元素可以有任意数目的子节点和后代节点，这些子节点可能是元素、文本、注释处处理指令；但HTML中的空白也会被解析为文本节点；因此在执行某项操作时，要先检查一下nodeType属性；

HTML CSS Javascript HTMLCSSJavascript// js代码var myList = document.getElementById("myList");console.log(myList.childNodes.length);for(var i=0,len=myList.childNodes.length; i

元素节点也支持getElementsByTagName() 方法，可以通过它获得某个特定的标签名的子节点或后代节点；

var myList = document.getElementById("myList");var lis = myList.getElementsByTagName("li");console.log(lis);  // dom.html:23 HTMLCollection(3)

自定义Element的方法：

Element和HTMLDocument等类型都像String和Array一样是类，它们不是构造函数，但它们有原型对象，可以自定义方法扩展它；

Element.prototype.next = function(){    if(this.nextElementSibling) return this.nextElementSibling;    var sib = this.nextSibling;    while(sib && sib.nodeType !== 1) sib = sib.nextSibling;    return sib;}console.log(document.getElementById("mydiv").next());

Web前端开发之Javascript-零点程序员-王唯