javascript获取Document类型和Element类型属性

朱雀 2021-02-10 09:15 582阅读 0赞

DOM

节点层次：  
Document类型

JavaScript 通过 Document 类型表示文档。在浏览器中， document 对象是 HTMLDocument（继承自 Document 类型）的一个实例，表示整个 HTML 页面。而且， document 对象是 window 对象的一个属性，因此可以将其作为全局对象来访问。

1、文档子节点  
可以使用document.documentElement属性，该属性始终指向HTML页面中`<html>`元素。另一个就是通过 childNodes 列表访问文档元素，但通过 documentElement 属性则能更快捷、更直接地访问该元素

两种方法：  
document.documentElement;  
document.childNodes\[0\];  
document.firstChild;  
输出结果是获取所有页面所有元素

````html
<html>  
<head>   
</head>  
<body>  
<form>  
ssss  
</form>   
</body>  
</html>

````

document还有一个body属性可以直接指向html中`<body>`元素  
var body = document.body;//取得对`<body>`的引用  
所有浏览器都是支持document.documentElement;和document.body;这两个属性的。

2、文档信息  
document.title;获取文档标题信息，可以修改这个标题信息：document.title = "这是一个测试";  
document.URL;//取得完整的 URL  
document.domain;//取得域名  
document.referrer;//取得来源页面的 URL

3、查找元素  
document.getElementById("");接收一个参数：要取得的元素的 ID。如果找到相应的元素则返回该元素，如果不存在带有相应 ID 的元素，则返回 null。

document.getElementsByTagName("");这个方法接受一个参数，即要取得元素的标签名，而返回的是包含零或多个元素的 NodeList。

document.getElementsByName("");这个方法会返回带有给定 name 特性的所有元素。最常使用 getElementsByName()法的情况是取得单选按钮；为了确保发送给浏览器的值正确无误，所有单选按钮必须具有相同的 name 特性，

````
<html>  
<head>  
</head>  
<script type="text/javascript">  
    function check(){  
        var color = document.getElementsByName("color");  
        for(var i = 0 ; i < color.length;i++){  
            if(color[i].checked){  
            	console.log(color[i].value);  
            }  
        }   
    }   
</script>  
<body>  
<form>  
<fieldset>  
<legend>Which color do you prefer?</legend>  
<ul>  
<li><input type="radio" value="red" name="color" id="colorRed" οnclick="check();">  
<label for="colorRed">Red</label></li>  
<li><input type="radio" value="green" name="color" id="colorGreen" οnclick="check();">  
<label for="colorGreen">Green</label></li>  
<li><input type="radio" value="blue" name="color" id="colorBlue" οnclick="check();">  
<label for="colorBlue">Blue</label></li>  
</ul>  
</fieldset>  
</form>  
</body>  
</html>

````

4、特殊集合  
除了属性和方法， document 对象还有一些特殊的集合。这些集合都是 HTMLCollection 对象，为访问文档常用的部分提供了快捷方式，包括：  
document.anchors，包含文档中所有带 name 特性的`<a>`元素；  
document.applets，包含文档中所有的`<applet>`元素，因为不再推荐使用`<applet>`元素，所以这个集合已经不建议使用了；  
document.forms，包含文档中所有的`<form>`元素，与 document.getElementsByTagName("form")得到的结果相同；  
document.images，包含文档中所有的`<img>`元素，与 document.getElementsByTagName("img")得到的结果相同；  
document.links，包含文档中所有带 href 特性的`<a>`元素

5、文档写入  
document将输出流写入到网页中。  
write(),writeln(),open()和close();  
write()和writeln()方法都接收一个字符串参数，即要写入到输出流中的文本。write()会原样写入，而writeln()则会在字符  
串的末尾添加一个换行符(\\n)。在页面被加载的过程中，可以使用这个两个方法向页面中动态地加入内容。  
实例： 
```` 
<html>  
<head>  
</head>  
<script type="text/javascript">

</script>  
<body>  
<form>  
<p>The current date and time is:  
<script type="application/javascript">  
document.write("<strong>"+(new Date()).toString()+"</strong>")   
</script>  
</p>  
</form>  
</body>  
</html>   
````

Element类型

Element 类型是使用 attributes 属性的唯一一个 DOM 节点类型。attributes 属性中包含一个NamedNodeMap，与 NodeList 类似，也是一个“动态”的集合。元素的每一个特性都由一个 Attr 节点表示，每个节点都保存在 NamedNodeMap 对象中。  
getNamedItem(name)：返回 nodeName 属性等于 name 的节点；  
removeNamedItem(name)：从列表中移除 nodeName 属性等于 name 的节点；  
setNamedItem(node)：向列表中添加节点，以节点的 nodeName 属性为索引；  
item(pos)：返回位于数字 pos 位置处的节点。
````  
<html>  
<head>

</head>  
<script type="text/javascript">

</script>  
<body>  
<form>  
<div id="myDiv" align="left" my\_special\_attribute="hello!"></div>  
</form>  
</body>  
</html>  
````

//获取div 元素  
var div = document.getElementById("myDiv")

1、取得特性  
div.getAttribute("id");  
div.getAttribute("align");  
div.getAttribute("my\_special\_attribute");  
2、设置特性  
div.setAttribute("id","test");  
div.setAttribute("align","test");  
div.setAttribute("my\_special\_attribute","test");  
3、移除特性  
div.removeAttribute("id");  
4、attributes 属性  
div.attributes.id.value;//myDiv  
div.attributes.getNamedItem("id").nodeValue;//myDiv  
div.attributes\["id"\].nodeValue;//myDiv  
5、设置新的值  
element.attributes\["id"\].nodeValue = "someOtherId";  
6、删除特性  
element.attributes.removeNamedItem("id");  
7、创建元素  
使用document.createElement()方法可以创建新元素  
````
var userName = document.createElement("input");  
````
添加属性  
````
userName.setAttribute("id","userName");  
userName.setAttribute("name","userName");  
userName.setAttribute("value","liuwenlaing");

userName:<input id="userName" name="userName" value="liuwenlaing">  
````
通过appendChild()、 insertBefore()或 replaceChild()把新元素添加到文档树中。  
var div = document.getElementById("myDiv");  
div.appendChild(userName);  
div:  
````
//<div id="myDiv" align="left" my_special_attribute="hello!"><input id="userName" name="userName" value="liuwenlaing"></div>  
````
直接创建元素信息：  
````
var div = document.createElement("<div id="myNewDiv" class="box"></div >");  
````
8、元素的子节点 
```` 
<html>  
<head>   
</head>   
<body>  
<form>  
<ul id="myList">  
<li>Item 1</li>  
<li>Item 2</li>  
<li>Item 3</li>  
</ul>  
</form>  
</body>  
</html>  
````
````
for(var i = 0 ; i < items.length;i++){  
	console.log(items[i]);   
}  
````
````
<li>Item 1</li>  
<li>Item 2</li>  
<li>Item 3</li>  
````
这里`<ul>`的后代中只包含直接子元素。不过，如果它包含更多层次的后代元素，那么各个层次中包含的`<li>`元素也都会返回。