javascript新手入门DOM

DOM: 全称Document Object Model 文档对象类型
js通过DOM可以对HTML文档进行操作,只要了解DOM就可以随心所欲的操作web页面
文档:整个HTML网页文档
对象:将网页中的的每一个部分转换为对象
模型:用来表示对象之间的关系,这样可以方便获取对象
节点:构成网页最基本的组成部分,网页中每一个部分都可以看成一个节点
事件:浏览器和用户之间的交互行为 比如:点击按钮,鼠标移动

对象的获取
方式1:通过ID获取 获取时会返回第一个id

//document.getElementById("id名");
	<script type="text/javascript">
		window.onload=function()
		{
			var one=document.getElementById("one");//通过ID来获取对象
			console.log(one.innerHTML);//获取对象的文本内容
			console.log(one.style.color);//获取对象的样式
		}
	script>
	head>
	<body>
		<div id="one" style="color: red;">123div>
		<div id="one">456div>
		<div id="one">7div>
	body>

会打印出 123 ,red
方式二:通过标签名来获取对象,结果会返回一个数组

	<script type="text/javascript">
		window.onload=function()
		{
			var p=document.getElementsByTagName('p');
			console.log(p);
		}
	script>
	head>
	<body>
		<p>1p>
		<p>2p>
		<p>3p>
		<p>4p>
	body>

方法3 通过class来获取 对返回一个数组

<script type="text/javascript">
		window.onload=function()
		{
			var p=document.getElementsByClassName("a");
			console.log(p);
		}
	script>
	head>
	<body>
		<p class="a">1p>
		<p class="a">2p>
		<p class="a">3p>
		<p class="a">4p>
	body>

HTML5新增
document.querySelector(选择器)
document.querySelectorAll(选择器)

<script type="text/javascript">
		window.onload=function()
		{
			var p=document.querySelector('.a');
			console.log(p);
		}
	script>
	head>
	<body>
		<p class="a">1p>
		<p class="a">2p>
		<p class="a">3p>
		<p class="a">4p>
	body>

获取body元素
document.body
获取HTML元素
document.documentElement

你可能感兴趣的:(javascript,javascript)