Professional JS(10.1.2-Document类型续---10.1.3Element类型)

最新推荐文章于 2019-01-03 18:14:35 发布

孤岛浅滩

最新推荐文章于 2019-01-03 18:14:35 发布

阅读量470

点赞数

分类专栏： notes 文章标签： class javascript Element类型 Document类型对象

本文链接：https://blog.csdn.net/m0_37851778/article/details/75950362

版权

notes 专栏收录该内容

89 篇文章 0 订阅

订阅专栏

1.查找元素
①取得元素的操作可以使用document对象的几个方法来完成。其中，Document类型为此提供了两个方法：getElementById()和getElementsByTagName()。

②getElementById()方法，接收一个参数：要取得的元素的ID。

③getElementsByTagName()方法，接收一个参数，即要取得元素的标签名，而返回的是包含零或多个元素的NodeList。在HTML文档中，这个方法会返回一个HTMLCollection对象，作为一个”动态”集合，该对象与NodeList非常类似。

++④var images=document.getElementsByTagName(“img”);
Analysis：这行代码会取得页面中所有的<img>元素，并返回一个HTMLCollection对象保存在images变量中。与NodeList对象类似，可以使用方括号法或item()方法来访问HTMLCollection对象中的项。这个对象中元素的数量可以通过length属性取得。

var images=document.getElementsByTagName("img");
alert(images.length);//输出图像的数量
alert(images[0].src);//输出第一个图像元素的src特性
alert(images.item(1).src);//输出第二个图像元素的src特性

++⑤HTMLCollection对象还有个namedItem()方法，通过元素的name特性取得集合中特定的项。

<img src="myimage.gif" name='myImage'>
var myImage=images.namedItem('myImage');

⑥在提供按索引访问的基础上，HTMLCollection还支持按名称访问项。

var myImage=images['myImage'];

⑦虽然标准规定标签名需要区分大小写，但为了最大限度地与既有HTML页面兼容，传给getElementsByTagName()的标签名是不需要区分大小写的。但对于XML页面而言（包括XHTML），getElementsByTagName()方法会区分大小写。

⑧getElementsByName()方法，专属于HTMLDocument类型。这个方法会返回带有给定name特性的所有元素。最常使用getElementsByName()方法的情况是取得单选按钮的name特性。

<fieldset>
        <legend>Which color do you prefer?</legend>
        <ul>
            <li>
                <input type='radio' value='red' name='color' id='colorRed'>
                <label for='colorRed'>Red</label>
            </li>
            <li>
                <input type='radio' value='green' name='color' id='colorGreen'>
                <label for='colorGreen'>Green</label>
            </li>
            <li>
                <input type='radio' value='blue' name='color' id='colorBlue'>
                <label for='colorBlue'>Blue</label>
            </li>
        </ul>
    </fieldset>

⑨与getElemensByTagName()类似，getElementsByName()方法也会返回一个HTMLCollection。但是，对于单选按钮来说，namedItem()方法只取第一项，因为每一项的name特性都相同。

2.特殊集合：<a name,href>/<form>/<img>
①这些集合都是HTMLCollection对象，为访问文档常用的部分提供快捷方式。
a)document.anchors,包含文档中所有带有name特性的<a>元素。
b)document.links，包含文档中所有带有href特性的<a>元素。
c)document.forms，包含文档中所有的<form>元素，与document.getElementsByTagName(‘form’)得到的结果相同。
d)document.images，包含文档中所有的<img>元素，与document.getElementsByTagName(‘img’)得到的结果相同。

3.DOM Conformance Detection(一致性检测)——document.implementation属性
①The document.implementation property is an object containing information and functionality tied directly to the browser’s implementation(实现) of the DOM.

②DOM Level 1 specifies(指定) only one method on document.implementation,which is hasFeature().The hasFeature() method accepts two argumens:the name and version of the DOM feature to check for.

③In most cases,it’s a good idea to use capability detection in addition to hasFeature() before using specific(特殊的) parts of the DOM.

4.Document Writing(文档写入)—write()/writeIn()/open()/close()
①One of the older capabilities of the document object is the ability to write to the output strean(输出流) of a web page.This capability comes in the forms of four methods:write(),writeIn(),open(),close().

@②The write() and writeIn() methods each accept a string argument to write to the output stream.wirte() simply adds the text as is,whereas writeIn() appends a new-line character(\n)【换行符】 to the end of the string.
这里写图片描述

③The write() and writeIn() methods used to dynamically include external resources such as JavaScript files.When including JavaScript files,you must be sure not to include the string “</script>” directly,because it will be interpreted as the end of a script block and the rest of the code won’t execute.To avoid this,you simply need to add ‘\’.such as:
document.write(“<script type=\”text/javascript\” src=\”file.js\”>”+”<\/script>”);

④The string “<\/script>” no longer registers as(当做) a closing tag for the outermost(最外面的) <script> tag,so there is no extra content output to the page.

@⑤The previous example use document.write() to output(输出) content directly into the page as it’s being rendered(被呈现的—在<p>元素中).If document.write() is called after the page has been completely loaded,the content overwrites the entire page.
这里写图片描述

⑥The open() and close() methods are used to open and close the web page output stream respectively(分别地).Neither method is required to be used when write() or writeIn() is used during the course of page loading(页面加载期间).

⑦Document writing is not supported in strict XHTML documents(XHTML文档).For pages that are served with(向…提供) the application/xml+xhtml content type,these methods will not work.

5.The Element Type（Element类型）
①The Element type represents(表现) an XML or HTML element,providing access to information such as its tag name,children, and attributes.An Element node has the following characteristics:
a)nodeType is 1.
b)nodeName is the element’s tag name.
c)nodeValue is null.
d)parentNode may be a Document or Element.
e)Child nodes may be Element,Text,Comment,ProcessingInstruction,CDATASection, or EntityReference.

++②An element’s tag name is accessed via(通过) the nodeName property or by using the tagName property;both properties return the same value(the latter is typically used for clarity(清晰)).

<div id="myDiv"></div>

var div=document.getElementById('myDiv');
alert(div.tagName);//"DIV"
alert(div.tagName==div.nodeName);//true

++③When used with HTML,the tag name is always represented in all uppercase;when used with XML(including XHTML),the tag name always matches the case of the source code(源代码).If you aren’t sure whether your srcipt will be on an HTML or XML document,it’s best to convert tag names to a common case before comparison,as this example show:

if(element.tagName=='div'){  //avoid! Error prone!易于出错的
    //do something here
}

if(element.tagName.toLowerCase()=='div'){  //Preferred -works in all documents
    //do something here
}

④The Element type constructor and prototype are accessible in script in all modern browsers,including Internet Explorer as of version 8. Older browsers,such as Safari prior(之前的) to verison 2 and Opera prior to version 8,do not expose the Element type constructor.

6.HTML Elements
+①

<div id='myDiv' class='yyc' title='Body text' lang='en' dir='ltr'></div>

var div=document.getElementById('myDiv');
alert(div.id);//"myDiv"
//没有直接命名为class是因为class是ES中的保留字。
alert(div.className);//"yyc"
alert(div.title);//"Body text"
alert(div.lang);//"en"
alert(div.dir);//"ltr"

//通过为每个属性赋新值，可以修改对应的特性
div.id='someOtherId';
div.className='asan';
div.title='some other text';
div.lang='fr';//French
div.dir='rtl';

②Not all of the properties effect changes on the page when overwritten.Changes to [id] or [lang] will be transparent(透明的) to the user(assuming no CSS styles are based on these values),whereas changes to [title] will be apparent(显示出来的) only when the mouse is moved over the element.Changes to [dir] will cause the text on the page to be aligned(对齐的) to either the left or right as soon as the property is written.Changes to [className] may appear immediately if the class has differnet CSS style information than the previous one.

7.Getting Attributes
++①

<div id='myDiv' class='yyc' title='Body text' lang='en' dir='ltr'></div>

var div=document.getElementById('myDiv');
alert(div.getAttribute('id'));//"myDiv"
alert(div.getAttribute('class'));//"yyc"
alert(div.getAttribute('title'));//"Body text"
alert(div.getAttribute('lang'));//"en"
alert(div.getAttribute('dir'));//"ltr"
alert(div.getAttribute('other'));//null

++②

<div id='myDiv' align='left' my_special_attribute='Hello'></div>

var div=document.getElementById('myDiv');
alert(div.id);//"myDiv"
alert(div.align);//"left"
alert(div.my_special_attribute);//undefined(IE除外)
alert(div.getAttribute('my_special_attribute'));//"Hello"

③Two types of attributes have property names that don’t map(映射) directly to the same value returned by getAttribute().The first attribute is [style],which is used to specify(指定) stylistic(形式上的) information about the element using CSS.When accessed via getAttribute(),the [style] attribute contains CCS text while accessing it via a property that returns an object.

④The second catagory(种类) of attribute that behaves differently is event-handler attributes such as [onclick].When used on an element,the [onclick] attribute contains JavaScript code,and that code string is returned when using getAttribute(),When the onclick property is accessed,however,it returns a JavaScript function(or null if the attribute isn’t specified).This is because [onclick] and other event-handling properties are provided such that functions can be assigned to them.

⑤In Internet Explorer version 7-,the getAttribute() method for the [style] attribute and event-handling attributes such as [onclick] always return the same value as if they were accessed via a property.So,getArrtibute(‘style’) returns an object and getAttribute(‘onclick’) returns a function.

8.Setting Attributes
①The sibling method to getAttribute() is setAttribute(),which accepts two arguments:the name of the attribute to set and the value to set it to.If the attribute already exists,setAttribute() replaces its value with the one specified;if the attribute doesn’t exist,setAttribute() creates it and sets its value.

②THe setAttribute() method works with both HTML attributes and custom(自定义) attributes in the same way.Attributes names get normalized to lowercase when set using this method,so”ID” ends up as “id”.

③Because all attributes are properties,assigning directly to the property can set the attribute values.

④Internet Explorer verison 7- had some abnormal behavior regarding setAttribute().Attempting to set the [class] or [style] attributes has no effect,similar to setting an event-handler property using setAttribute().Even though these issues were resolved in Internet Explorer 8,it’s always best to set these attributes using properties.

⑤The last method is removeAttribute(),which removes the attribute from the element altogether.This does more than just clear the attribute’s name completely removes the attribute from the element.

⑥Internet Explorer version 6- don’t support removeAttribute().

9.The attributes Property
①The Element type is the only DOM node type that uses the [attributes] property.The attributes property contains a NamedNodeMap,which is a “live” collection similar to a NodeList.Every attribute on an element is represented by an attr node,each of which is stored in the NamedNodeMap object.A NameNodeMap object has the following methods:
a)getNamedItem(name)—Returns the node whose nodeName property is eqaul to name.
b)removeNamedItem(name)—Removes the node whose nodeName property is equal to name from the list.
c)setNamedItem(node)—Adds the node to the list,indexing it by its nodeName property.
d)item(pos)—Returns the node in the numerical position pos.

②Each node in the attributes property is a node whose nodeName is the attribute name and whose nodeValue is the attribute’s value.

++③

//要取得元素的id特性
var id=element.attributes.getNamedItem('id').nodeValue;
//方括号语法简写方式
var id=element.attributes['id'].nodeValue;
//也可以使用这种方式来设置特性的值
element.attributes['id'].nodeValue='someOtherId';

//removeNamedItem()返回表示被删除特性的Attr节点
var oldAttr=element.attributes.removeNamedItem('id');
//setNamedItem()方法为元素添加一个新特性
element.attributes.setNamedItem(newAttr);

++④The one area where the attributes property is uesful is to iterate(迭代) over the attributes on an element.

function outputAttributes(element){
    var pairs=new Array(),
    attrName,
    attrValue,
    i,
    len;
    for(i=0,len=element.attributes.length;i<len,i++){
        attrName=element.attributes[i].nodeName;
        attrValue=element.attributes[i].nodeValue;
        pairs.push(attrName+ "=\"" +attrValue+ "\"");
    }
    return pairs.join(' ');
}


//这个经过改进的函数可以确保即使在IE7及更早的版本中，也只会返回指定的特性
function outputAttributes(element){
    var pairs=new Array(),
    attrName,
    attrValue,
    i,
    len;
    for(i=0,len=element.attributes.length;i<len;i++){
        attrName=element.attributes[i].nodeName;
        attrValue=element.attributes[i].nodeValue;
        if(element.attributes[i].specified){
            pairs.push(attrName + "=\"" +attrValue "\"");
        }
    }
    return pairs.join(' ');
}

10.Creating Elements
+①New elements can be created by using the document.createElement() method.This method accepts a single argument,which is the tag name of the element to create.In HTML documents,the tag name is case-insensitive,whereas it is case-sensitive in XML docuements(including XHTML).

var div=document.createElement('div');

②The element can be added to the document tree using appendChild(),insertBefore(),or replaceChild().

++③Some issues regarding dynamically created elements in Internet Explorer 7 -:

if(client.browser.ie&&client.browser.ie<=7){
    //创建一个带有name特性的iframe元素
    var iframe=document.createElement("<iframe name=\"myFrame\"></iframe>");
    //创建input元素
    var input=document.createElement("<input type=\"checkbox\">");
    //创建button元素，并将type特性值设置为reset
    var button=document.createElement("<button type=\"reset\"></button>");
    //
    var radio1=document.createElement("<input type=\"radio\" name=\"choice\" "+"value=\"1\">");
    var radio2=document.createElement("<input type=\"radio\" name=\"choice\" "+"value=\"2\">");

}

a)Dynamically created <iframe> elements can’t have their name attribute set.
b)Dynamically created <input> elements won’t get reset via the form’s reset() method
c)Dynamically created <button> elements with a type attribute of ‘reset’ won’t reset the form.
d)Dynamically created radio buttons with the same name have on relation to one another.Radio buttons with the same name are supposed to be different values for the same option,but dynamically created ones lose their relationship.