HTML DOM Element 对象
HTML DOM 节点
在 HTML DOM (文档对象模型)中,每个部分都是节点:
- 文档本身是文档节点
- 所有 HTML 元素是元素节点
- 所有 HTML 属性是属性节点
- HTML 元素内的文本是文本节点
- 注释是注释节点
Element 对象
在 HTML DOM 中,Element 对象表示 HTML 元素。
Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。
NodeList 对象表示节点列表,比如 HTML 元素的子节点集合。
元素也可以拥有属性。属性是属性节点(参见下一节)。
IE | firefox | safari | opera | |
---|---|---|---|---|
true | true | true | true | true |
属性和方法
1. accessKey
设置或返回元素的快捷键
快捷键规定激活元素或使元素获得焦点的快捷键。
注释:在不同的浏览器中访问快捷键的方式各有不同:
不过在大多数浏览器中,可以将快捷键设置为其他组合。
提示:如果超过一个元素拥有相同的快捷键,那么:
- IE, Firefox: 激活下一个被按下快捷键的元素
- Chrome, Safari:激活最后一个被按下快捷键的元素
- Opera: 激活第一个被按下快捷键的元素
浏览器支持
IE | firefox | safari | opera | |
---|---|---|---|---|
true | true | true | true | true |
用法
HTMLElementObject.accessKey=accessKey
<html>
<head>
<script>
function accesskey()
{
document.getElementById('w3s').accessKey="w"
}
</script>
</head>
<body onload="accesskey()">
<a id="w3s" href="http://www.w3school.com.cn/">W3School</a>
</body>
</html>
2. appendChild()
向节点添加最后一个子节点
提示:如果您需要创建包含文本的新段落,请记得添加到段落的文本的文本节点,然后向文档添加该段落。您也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。
浏览器支持
IE | firefox | safari | opera | |
---|---|---|---|---|
true | true | true | true | true |
用法
node.appendChild(node)
参数
- 必需
-
- node 您希望添加的节点对象。
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div"></div>
<button onclick="Event()">点我吧</button>
</body>
<script>
function Event(){
var Dom_p = document.createElement('p');
var text = document.createTextNode("1213"); //Document中的对象实例 createTextNode
Dom_p.appendChild(text);
div.appendChild(Dom_p);
}
</script>
</html>
3. attributes
返回指定节点的属性集合,即 NamedNodeMap
提示:您可以使用 length 属性来确定属性的数量,然后您就能够遍历所有的属性节点并提取您需要的信息。
浏览器支持
IE | firefox | safari | opera | |
---|---|---|---|---|
true | true | true | true | true |
注释:在 Internet Explorer 8 以及更早的版本中,attributes 属性会返回元素所有可能属性的集合。
用法
node.attributes
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd"></div>
<button onclick="Event()">点我吧</button>
</body>
<script>
function Event(){
var Dom_p = document.createElement('p');
var attr = div.attributes;
var text = "";
for(let i = 0; i< attr.length;i++){
text += attr[i].nodeValue + " ";
}
Dom_p.innerText += text;
div.appendChild(Dom_p);
}
</script>
</html>
4. childNodes
返回节点的子节点集合,以 NodeList 对象
提示:您可以使用 length 属性来确定子节点的数量,然后您就能够遍历所有的子节点并提取您需要的信息。
浏览器支持
IE | firefox | safari | opera | |
---|---|---|---|---|
true | true | true | true | true |
用法
element.childNodes
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd"></div>
<button onclick="Event()">点我吧</button>
</body>
<script>
function Event(){
console.log(document.body.childNodes);
}
</script>
</html>
5. className
设置或返回元素的 class 属性
浏览器支持
IE | firefox | safari | opera | |
---|---|---|---|---|
true | true | true | true | true |
用法
HTMLElementObject.className=classname
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd"></div>
<button onclick="Event()">点我吧</button>
</body>
<script>
function Event(){
div.className = "ddd"
}
</script>
</html>
6. clientHeight
返回元素的可见高度
浏览器支持
IE | firefox | safari | opera | |
---|---|---|---|---|
true | true | true | true | true |
用法
HTMLElementObject.clientHeight
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd"></div>
<button onclick="Event()">点我吧</button>
</body>
<script>
function Event(){
alert(div.clientHeight);
}
</script>
</html>
7. clientWidth
返回元素的可见高度
浏览器支持
IE | firefox | safari | opera | |
---|---|---|---|---|
true | true | true | true | true |
用法
HTMLElementObject.clientWidth
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd"></div>
<button onclick="Event()">点我吧</button>
</body>
<script>
function Event(){
alert(div.clientWidth);
}
</script>
</html>
8. cloneNode()
创建节点的拷贝,并返回该副本
cloneNode() 方法克隆所有属性以及它们的值。
如果您需要克隆所有后代的属性,请把 deep 参数设置 true,否则设置为 false。
浏览器支持
IE | firefox | safari | opera | |
---|---|---|---|---|
true | true | true | true | true |
用法
node.cloneNode(deep)
参数
- 可选
-
- deep 默认是 false。
-
-
- 设置为 true,如果您需要克隆节点及其属性,以及后代
-
-
-
- 设置为 false,如果您只需要克隆节点及其后代
返回值
- 设置为 false,如果您只需要克隆节点及其后代
-
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd"></div>
<button onclick="Event()">点我吧</button>
</body>
<script>
function Event(){
var cloneDiv = div.cloneNode();
div.appendChild(cloneDiv)
}
</script>
</html>
9. compareDocumentPosition()
比较两个节点,并返回描述它们在文档中位置的整数
返回值
- 1:没有关系,两个节点不属于同一个文档。
- 2:第一节点(P1)位于第二个节点后(P2)。
- 4:第一节点(P1)定位在第二节点(P2)前。
- 8:第一节点(P1)位于第二节点内(P2)。
- 16:第二节点(P2)位于第一节点内(P1)。
- 32:没有关系,或是两个节点是同一元素的两个属性。
注释:返回值可以是值的组合。例如,返回 20 意味着在 p2 在 p1 内部(16),并且 p1 在 p2 之前(4)。
浏览器支持
IE | firefox | safari | opera | |
---|---|---|---|---|
true | 9.0 | true | true | true |
用法
node.compareDocumentPosition(node)
参数
- 必需
-
- node 规定于当前节点作比较的节点
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd"></div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
alert(div.compareDocumentPosition(btn));
}
</script>
</html>
10. contentEditable
设置或返回元素内容是否可编辑
提示:您也可以使用 isContentEditable 属性来查明元素内容是否可编辑。
浏览器支持
IE | firefox | safari | opera | |
---|---|---|---|---|
true | true | true | true | true |
用法
HTMLElementObject.contentEditable
HTMLElementObject.contentEditable=true|false
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd"></div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
div.contentEditable = true;
}
</script>
</html>
11. dir
设置或返回元素的文本方向
提示:Element需要设置dir属性。
dir的属性值
- auto 自动
- rtl 右
- ltl 左
浏览器支持
IE | firefox | safari | opera | |
---|---|---|---|---|
true | true | true | true | true |
用法
HTMLElementObject.dir=text-direction
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir=""></div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
alert(div.dir);
}
</script>
</html>
12. firstChild
返回指定节点的首个子节点,以 Node 对象
注释:在 HTML 中,文本本身是 HTML 元素的父节点,HEAD 和 BODY 是 HTML 元素的子节点。
浏览器支持
IE | firefox | safari | opera | |
---|---|---|---|---|
true | true | true | true | true |
用法
node.firstChild
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="">
<p></p>
</div>
<button onclick="Event()" id="btn">点我吧</button>
</body>
<script>
function Event(){
if(div.firstChild.nodeType == 3){
console.log(div.childNodes[1]);
}else{
console.log(div.firstChild);
}
}
</script>
</html>
13. getAttribute()
返回指定属性名的属性值