初识js——DOM（1）

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。

DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）

将HTML代码分解为DOM节点层次图:

HTML文档可以说由节点构成的集合，DOM节点有:

1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。

2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。

节点属性:

遍历节点树:

DOM操作：

document.getElementsByName()方法：返回带有指定名称的节点对象的集合。（返回的是元素的数组，而不是一个元素）

语法：document.getElementsByName(name)

document.getElementsByTagName()方法：返回带有指定标签名（如p、a、img、form等标签名）的节点对象的集合。返回元素的顺序是它们在文档中的顺序。（返回的是元素的数组，而不是一个元素）

语法:document.getElementsByTagName(Tagname)

getAttribute()方法：通过元素节点的属性名称获取属性的值。

语法：elementNode.getAttribute(name)

setAttribute() 方法:增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。

语法：elementNode.setAttribute(name,value)

说明：1.name: 要设置的属性名。2.value: 要设置的属性值。

getAttribute()方法和setAttribute() 方法用法举例:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
  <p id="intro">我的课程</p>  
  <ul>  
    <li title="JS">JavaScript</li>  
    <li title="JQ">JQuery</li>  
    <li title="">HTML/CSS</li>  
    <li title="JAVA">JAVA</li>  
    <li title="">PHP</li>  
  </ul>  
  <h1>以下为li列表title的值,当title为空时，新设置值为"WEB前端技术":</h1>
<script type="text/javascript">
  var Lists=document.getElementsByTagName("li");
  for (var i=0; i<Lists.length;i++)
  {
    var text=Lists[i].getAttribute("title");
    document.write(text +"<br>");
    if(text=="")
    {
    Lists[i].setAttribute("title","WEB前端技术");
    document.write(Lists[i].getAttribute("title")+"<br>");
    }
  }
</script>
</body>
</html>

初识js——DOM（1）

猜你喜欢