Dom、Dom属性、Dom方法、Dom操作

课程要求

  • 用原生JS熟练操作DOM
  • 了解浏览器js兼容

课程内容

1.认识DOM

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

1.1 DOM节点树

1.2节点关系

<html>
  <head>
    <title>DOM 教程</title>
  </head>
  <body>
    <h1>DOM 第一课</h1>
    <p>Hello world!</p>
  </body>
 </html>

从上面的 HTML 中:

<html> 节点没有父节点;它是根节点

<head><body> 的父节点是<html> 节点

文本节点 "Hello world!" 的父节点是 <p> 节点

并且:

<html> 节点拥有两个子节点:<head><body> <head> 节点拥有一个子节点:<title> 节点 <title> 节点也拥有一个子节点:文本节点 "DOM 教程" <h1><p> 节点是同胞节点,同时也是<body> 的子节点

2.节点访问

getElementById() 方法返回带有指定 ID 的元素:

var element=document.getElementById("intro"); 

getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点数组

var element=document.getElementsByTagName("intro");

getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。

var element=document.getElementsByClassName("intro");

4.DOM修改添加

修改html内容

修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

如需改变 HTML 元素的内容,请使用这个语法:

document.getElementById(id).innerHTML=new HTML

<p id="p1">Hello World!</p>

<script>
//改变p1的内容
var el = document.getElementById("p1");
el.innerHTML="New text!";
console.log(el);
</script>

修改html属性

如需改变 HTML 元素的属性,请使用这个语法:

document.getElementById(id).attribute=新值 document.getElementById(id).setAttribute(属性, 值)

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
document.getElementById("image").setAttribute('class','pic');
</script>

本例改变了 元素的 src 属性,会替换图片

改变样式

element.style.xxx = xxx;

能修改哪些样式?参考这里dom样式

<p id="p1">我是段落,要变色</p>
<button>变色</button>
<script>
    document.getElementsByTagName('button')[0].onclick=function(){
        document.getElementById('p1').style.color="red";
    }
</script>

创建新的 HTML 元素

创建元素,然后把它追加到已有的元素上

<div class="d1">

</div>
<script>
    var para=document.createElement("p");
    para.innerHtml="我是新添加的段落";
    var element=document.getElementById("d1");
    element.appendChild(para);
</script>

添加元素

appendChild,使用方法target.appendChild(newChild);

<div id="content"></div>
<button id="btn">添加图片</button>
<script>
    var btn = document.getElementById("btn");
    btn.onclick=function(){
        var img = document.createElement("img");
        img.src = "http://www.baidu.com/img/baidu_sylogo1.gif";
        element.appendChild(img);           
    }

<script>

insertBefore

- insertBefore() 方法的作用是:在现有的子节点前插入一个新的子节点 
- insertBefore用法:target.insertBefore(newChild,existingChild) 
- newChild作为target的子节点插入到existingChild节点之前

# element.insertBefore(img, p1);

删除元素

removeChild

element.removeChild(img);

替换元素

replaceChild

var btn1 = document.getElementById("btn1");
var btn3 = document.createElement("button");
btn3.id = "btn3";
btn3.innerText = "新按钮";
c1.replaceChild(btn3, btn1);