JavaScript中HTML的DOM

JavaScript中HTML的DOM

1.1DOM简介

1.2获得元素

　　document.getElementById()
　　document.getElementByTagName()
　　document.getElementByClassName()

    <div id="intro"></div><div id="main"><p>My Name</p></div><div class="content"></div><div class="content"></div><div class="content"></div><script type="text/javascript">var intro = document.getElementById("intro");var main = document.getElementById("main");var p = main.getElementsByTagName("p")[0];var content1 = document.getElementsByClassName("content")[0];</script>

2.DOM-HTML

　　2.1修改HTML内容

　　　　document.getElementById(id).innerHTML='HelloWorld';

　　2.2修改HTML属性

element.getAttribute()
element.setAttribute()
element.src
element.href

<body><div id="main" data="first">123</div><img id="image" src="1.png"><a  id="goUrl" href=""/>1
<script type="text/javascript">var main = document.getElementById('main');main.innerHTML = 'HelloWorld';alert(main.getAttribute('data'));main.setAttribute('data','second');var image = document.getElementById('image');image.src='2.png';var goUrl = document.getElementById('goUrl');goUrl.href='https://www.baidu.com';</script>
</body>

3.DOM-CSS

　　3.1修改样式

document.getElementById(' ').style.color=' ';

4.DOM事件　

<h1 οnclick="this.innerHTML='谢谢！'">请点击该文本</h1>
Element.οnclick=function(){displayDate()};
Element.addEventListener("click",function(){
});

<body><div id="main" οnclick="this.innerHTML='wow!!'">hello</div><div id="nav">world</div><div id="boo">!</div><script type="text/javascript">var nav = document.getElementById('nav');nav.onclick = function () {alert('world');}var boo = document.getElementById('boo');boo.addEventListener('click',function () {alert('!');});
</script>
</body>

5.DOM节点

　　　5.1添加删除节点

document.createElement("p");
document.createTextNode("新增")
parent.appendChild(child);
parent.removeChild(child);

<body><div id="div1"><p>hello</p><p>world</p></div>
<script type="text/javascript">var div1 = document.getElementById('div1');var p = document.createElement('p');//<p></p>var nono = document.createTextNode('nono');//nonovar _p = p.appendChild(nono);//<p>nono</p>div1.appendChild(_p);div1.removeChild(_p);
</script>
</body>

转载于:https://www.cnblogs.com/yangHS/p/10848802.html

JavaScript中HTML的DOM相关推荐

JavaScript中BOM及DOM的学习
JavaScript中BOM及DOM的学习文章目录 JavaScript中BOM及DOM的学习 1 BOM编程 1.1 BOM编程概述 1.1.1 BOM编程的概念 1.1.2 BOM编程的作用 1 ...
javascript中0级DOM和2级DOM事件模型浅析
Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...
JavaScript中BOM和DOM(持续更新)
文章目录 1.API和WebAPIs 1.1 Web APIs和JS基础关联性 1.2 API和Web API 1.3 API和WebAPI总结 2.DOM 2.1 DOM简介 2.1.1 什么是DO ...
html dom节点类型,浅谈Javascript中的12种DOM节点类型
前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组 ...
javascript中获取dom元素高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight ...
vanilla_如何在Vanilla JavaScript中操作DOM
vanilla by carlos da costa 通过卡洛斯·达·科斯塔如何在Vanilla JavaScript中操作DOM (How to manipulate the DOM in Van ...
java dom 获得子元素_在JavaScript中删除DOM节点的所有子元素
我将如何删除JavaScript中DOM节点的所有子元素? 说我有以下(丑陋的)HTML: hello world 我抓住了我想要的节点,如下所示: var myNode = document.get ...
JavaScript中DOM的层次节点(一)
DOM是针对HTML和XML文档的一个API,描绘了一个层次化的节点树,允许开发人员添加.修改.删除节点的一部分. DOM将HTML和XML文档描绘成一个有多个节点构成的结构,节点分为12种不同的节点 ...
JavaScript中DOM操作
Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...

JavaScript中HTML的DOM

JavaScript中HTML的DOM相关推荐

最新文章

热门文章