Javascript HTML DOM

Posted 2020-09-02

1： 改变html元素的内容

使用innerHTML方法: document.getElementById(id).innerHTML=new HTML 

如： document.getElementById("p1").innerHTML="New text!";

 

2: 改变HTML元素属性

使用  document.getElementById(id).attribute=new value

如： document.getElementById("image").src="landscape.jpg";

 

3： 改变HTML样式

使用： document.getElementById(id).style.property=new style

如： document.getElementById("p2").style.color="blue";

 

 

4： 对事件作出反应

HTML事件的例子：

- 当用户点击鼠标时

- 当网页加载时

- 当图片已加载时

- 当鼠标移动到元素上时

- 当输入字段被改变时

- 当提交HTML表单时

- 当用户触发按键时

 

如： 点击元素时候执行JS代码， nclick=javascript

    <h1onclick="this.innerHTML=‘谢谢!‘">请点击该文本</h1>

    

   点击按钮时候执行JS:[使用JS向HTML中的元素分配事件]

    <script>

    document.getElementById("myBtn").onclick=function(){displayDate()};

    function displayDate()

    {

    document.getElementById("demo").innerHTML=Date();

    }

    </script>

 

参考： HTML DOM Event对象

http://www.w3school.com.cn/jsref/dom_obj_event.asp

 

5： 创建新的HTML元素

如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

使用element.appendChild(para);

 

6:  删除已有的HTML元素

parent.removeChild(child);