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

最新推荐文章于 2025-05-18 18:13:19 发布

30以后的男人

最新推荐文章于 2025-05-18 18:13:19 发布

阅读量6.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript 获取Documen

本文链接：https://blog.youkuaiyun.com/liuwenliang_002/article/details/78874827

javascript 专栏收录该内容

6 篇文章

订阅专栏

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>
<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" onclick="check();">
<label for="colorRed">Red</label></li>
<li><input type="radio" value="green" name="color" id="colorGreen" onclick="check();">
<label for="colorGreen">Green</label></li>
<li><input type="radio" value="blue" name="color" id="colorBlue" onclick="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>元素也都会返回。