保安日记：JavaScript学习第七篇之DOM基础

本文链接：https://blog.csdn.net/Zhuo_De/article/details/109126121

API和WebAPI

API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。
Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)。

DOM

文档对象模型(Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言(HTML或者XML）的标准编程接口。
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

DOM树
在这里插入图片描述
DOM在开发中主要用来操作元素

获取元素方法

根据ID获取

var element = document.getElementById('id');

注意：
1. id是大小写敏感的字符串，要写引号
2.返回一个匹配到 ID 的 DOM Element 对象

根据标签名获取

    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>

elements = element.getElementsByTagName('tagName');
var lis = document.getElementsByTagName('li');  //document指的整个文档
//可以获取父元素内部所有指定标签名的子元素
var a = document.getElementsByTagName('ul') //会报错 不能以伪数组的形式作为父元素
console.log(a[0].getElementsByTagName('li'))

//也可以先给父元素指定一个ID
<ul id=b>
      <li></li>
      <li></li>
      <li></li>
    </ul>
var b = document.getElementsById('ul');
console.log(b.getElementsByTagName('li'));

注意：
1.返回的是  获取过来元素对象的集合 以伪数组的形式存储
2.可以通过遍历的方式访问里面的元素
3.得到的元素对象是动态的  元素变化伪数组里的内容也随之变化
4.父元素必须是单个对象（必须指明是哪个对象）,获取元素时不包括父元素自己

H5新增的方法获取

//根据类名返回元素对象集合
document.getElementsByClassName( '类名');
//根据指定选择器返回第一个元素对象 
document.querySelector ('选择器');
//根据指定选择器返回所有元素对象集合 
document.querySelectorAll ('选择器');

注意：  
1.选择器要加符号 类 .box   ID #box

获取特殊元素（body，HTML）

//获取body
var doc = document.body;
//获取HTML
var htm = document.documentElement;

事件基础

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。简单理解∶触发—响应机制。
网页中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

事件由三部分组成：

事件源：事件被触发的对象比如按钮
事件类型：如何触发，比如鼠标点击
事件处理程序：通过函数赋值的方式完成

执行事件的步骤：

 <body>
    <div>123</div>

    <script>
      //1.获取事件源
      var div = document.querySelector("div");
      //   2.注册事件（绑定事件）
      //   3.添加事件处理程序（采取函数赋值形式）
      div.onclick = function () {
        console.log("hello,world");
      };
    </script>
  </body>

操作元素

修改元素内容

element.innerText = '';  //可以直接是文字内容 也可以是函数
element.innerText = count();
element.innerHTML = '';
element.innerHTML = count();

两者区别：
innerText ：
1.不识别html标签  比如div.innerText = 'hello <br> world' 不能识别出来
2.属性可以读写，可以获取元素里的内容，可以去除空格和换行
innerHTML ：
1.识别html标签  W3C标准
2.属性可以读写，可以获取元素里的内容，保留空格和换行

	<button id = 'ldh'>刘德华</button>
	<button id = 'zxy'>张学友</button>
	<img src="/123" alt="">
<script>
	//修改元素属性src
	// 1．获取元素
	var ldh = document.getElementById( 'ldh');
	var zxy = document.getElementById( 'zxy');
	var img = document.queryselector( 'img');
	// 2．注册事件处理程序
	zxy.onclick = function() {
		img.src = images/zxy.jpg';
		img.title'张学友思密达';
	}
	ldh. onclick = function() {
		img.src= 'images/ldh.jpg';
		img.title ='刘德华';
	}
< / script>

修改表单属性

<body>
    <button>按钮</button><br />
    <input type="text" value="输入内容" />

    <script>
      //   1.获取元素
      var btn = document.querySelector("button");
      var input = document.querySelector("input");
      //   2.注册事件 处理程序
      btn.onclick = function () {
        //   表单里面的值 文字内容是通过value来修改的 普通盒子才用innerHTML
        input.value = "被点击";
        // 如果想要某个表单被禁用  不能再点击就用 disabled
        this.disabled = true;
        // this 指向的是事件函数的调用者  btn
      };
    </script>
  </body>

修改样式属性

element.style        //行内样式操作
element.className  	 //类名样式操作

注意：
1.js里面的样式采取驼峰命名法 比如 fontSize、backgroundColor
2.js修改 style样式操作，产生的是行内样式  权重比较高
3.如果样式修改比较多，可以采取操作类名方式更改元素样式
4.class是保留字  因此使用className来操作元素类名属性
5.className会直接更改元素的类名，会覆盖原先的类名，如果想保留原先的类名
this.className = '类名1 类名2'; 采用多类名选择器

排他思想
如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法∶

所有元素全部清除样式(干掉其他人)
给当前元素设置样式（留下我自己)
注意顺序不能颠倒，首先干掉其他人，再设置自己


// 1．获取所有按钮元素
 <body>
       <button></button>;
       <button></button>;
       <button></button>;
       <button></button>;

 <script>
		var btns = document.getElementsByTagName( ' button ' );
		//btns得到的是伪数组里面的每一个元素 btns[i]
		for (var i = 0; i < btns.length; i++) {
			btns[i].onclick = function(） {
			//(1）我们先把所有的按钮背景颜色去掉―干掉所有人
				for (var i = 0; i < btns.length; i++) {
					btns[i].style.backgroundColor = '';
				}
			//(2）然后才让当前的元素背景颜色为pink留下我自己
				this.style.backgroundColor = 'pink';
			}
		}
  </script>
</body>
//2．首先先排除其他人，然后才设置自己的样式这种排除其他人的思想我们成为排他思想

获取自定义属性值

<body>
    <div id="demo" index="1" class="nav"></div>
    <script>
        var div = document.querySelector('div');
        // 1. 获取元素的属性值
        // (1) element.属性
        console.log(div.id);
        //(2) element.getAttribute('属性')  get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
        // 2. 设置元素属性值
        // (1) element.属性= '值'
        div.id = 'test';
        div.className = 'navs';
        // (2) element.setAttribute('属性', '值');  主要针对于自定义属性
        div.setAttribute('index', 2);
        div.setAttribute('class', 'footer'); // class 特殊  这里面写的就是class 不是className
        // 3 移除属性 removeAttribute(属性)    
        div.removeAttribute('index');
    </script>
</body>

注意：
1.element.属性  获取内置属性值（元素本身自带的属性）
2.element.getAttribute('属性')；  主要获得自定义的属性 即我们自定义的属性

H5自定义属性
自定义属性目的：为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中

H5规范
H5规定自定义属性 data- 开头作为属性名并且赋值
如< div data-index = ‘1’>< /div> 、element.setAttribute(‘date-index’,2)

H5获取自定义属性
1.兼容性获取element.getAttribute( 'data-index’);
2.H5新增 element.dataset.index 或者 element.dataset[‘index’ ] ie11才开始支持

<body>
    <div getTime="20" data-index="2" data-list-name="andy"></div>
    <script>
        var div = document.querySelector('div');
        // console.log(div.getTime);
        console.log(div.getAttribute('getTime'));
        div.setAttribute('data-time', 20);
        console.log(div.getAttribute('data-index'));
        console.log(div.getAttribute('data-list-name'));
        // h5新增的获取自定义属性的方法 它只能获取data-开头的
        // dataset 是一个集合里面存放了所有以data开头的自定义属性
        console.log(div.dataset);
        console.log(div.dataset.index);
        console.log(div.dataset['index']);
        // 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
        console.log(div.dataset.listName);
        console.log(div.dataset['listName']);
    </script>
</body>

注意：
如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法