DOM元素对象的属性和方法(2)

时间:2022-08-14 17:16:38

11、contentEditable

  作用:设置或返回元素内容可否编辑布尔值,HTML5新增属性

<!DOCTYPE html>
<html>
<head>
<title>cloneNode</title>
<meta charset="utf-8">
</head>
<body>
<ul id="one">
<li>可编辑</li>
<li>不可编辑</li>
</ul>
<script>
var one=document.getElementById("one");
var lis=one.getElementsByTagName("li");
lis[0].contentEditable=true;
console.log(lis[0].contentEditable);
console.log(lis[1].contentEditable);
</script>
</body>
</html>

结果:DOM元素对象的属性和方法(2)DOM元素对象的属性和方法(2)

12、dir

  作用:设置或者返回元素文本方向,默认为空

<!DOCTYPE html>
<html>
<head>
<title>cloneNode</title>
<meta charset="utf-8"> </head>
<body id="one">
<p dir="rtl">文本</p>
<p dir="ltr">文本</p>
<p>文本</p>
<script>
var p=document.getElementsByTagName("p");
console.log(p[0].dir);
console.log(p[1].dir);
console.log(p[2].dir);
</script>
</body>
</html>

结果:DOM元素对象的属性和方法(2)DOM元素对象的属性和方法(2)

13、firstChild

  作用:返回元素的第一个子节点(注意是节点,不是元素)

<!DOCTYPE html>
<html>
<head>
<title>cloneNode</title>
<meta charset="utf-8">
</head>
<body>
<div id="one">
文本节点
<p>文本</p>
</div>
<script>
var one=document.getElementById("one");
var first=one.firstChild;
console.log(first.nodeValue);
</script>
</body>
</html>

结果:DOM元素对象的属性和方法(2)DOM元素对象的属性和方法(2)

14、getAttribute

  作用:返回指定的属性名的值

15、getAttributeNode

  作用:返回指定的属性节点

16、getElementsByTagName

  作用:返回指定标签名的后代元素集合

<!DOCTYPE html>
<html>
<head>
<title>firstChild</title>
<meta charset="utf-8">
</head>
<body>
<div id="one">
<ul>
<li>第一个li</li>
<ul>
<li>第二个li</li>
</ul>
</ul>
</div>
<script>
var one=document.getElementById("one");
var lis=one.getElementsByTagName("li");
console.log(lis.length);
</script>
</body>
</html>

结果:DOM元素对象的属性和方法(2)DOM元素对象的属性和方法(2)

17、getFeature

  作用:返回指定特征的执行APIs对象

18、getUserData

  作用:返回一个元素中关联键值的对象

19、hasAttribute

  作用:判断元素是否有指定属性,存在返回true,否则返回false

20、hasAttributes

  作用:判断元素是否有属性,有返回true,否则返回false

21、hasChildNodes

  作用:判断元素是否具有任何子节点(不只是元素),有返回true,否则返回false

<!DOCTYPE html>
<html>
<head>
<title>hasChildNodes</title>
<meta charset="utf-8">
</head>
<body>
<div id="one">
文本
</div>
<div id="two"></div>
<script>
var one=document.getElementById("one");
var two=document.getElementById("two");
console.log("第一个DIV是否有子元素"+one.hasChildNodes());
console.log("第二个DIV是否有子元素"+two.hasChildNodes());
</script>
</body>
</html>

结果:DOM元素对象的属性和方法(2)

22、id

  作用:设置或返回元素的id属性