JS DOM 查用法

DOM元素:

1. DOM元素：查(查找）
   1.1 (查元素)
   1.2 (查属性)
   1.3 (查内容)

1.1 (查元素)

类名	获取元素名	返回值
ID	getElementById	返回值只获取到一个元素,没有找到返回null
Class	getElementsByClassName	返回值是一个类数组,没有找到返回空数组
标签名	geteElementsByTsagName	返回值一个类数组，没有找到返回空数组
name	getElementsByName	返回值是一个类数组，没有找到返回空数组
选择器1	querySelector	返回值只获取第一个元素
选择器2	querySleectorAll	返回值是一个类数组

1.2 (查属性)

对象的取值和赋值方法:
1.2.1 点语法: 对象名.属性名
1.2.2 字符串语法: 对象名[“属性名”]

 //body内容
 <div id="box" class="one" style="width: 100px; background-color: green;">我是div盒子</div>
 //js内容
 //获取元素
 var box = document.getElementById("box");
 console.log(box.id);
 console.log(box["id"]);
 console.log(box.className);
 console.log(box.style);     //style属性是一个对象  存储的是元素的样式
 console.log(box.style.width);  // 100px  带单位
 console.log(box.style.height);  // 如果没有这个属性  获取到的不是undefined 而是空字符串

特点 :

1.可以获取标准属性
2.可以获取点语法动态添加的属性
3.无法获取行内自定义属性
4.无法获取行外属性
注意点 :
1.只能获取行内属性，不能获取行外属性
2.获取到的是带单位的字符串
3.属性既可以获取，也可以修改
4.获取类名使用className,不能使用class, 因为class是关键字

attribute操作元素属性

获取 : 元素.getAttribute(“属性名”)
设置 : 元素.seAttribute(“属性名”,“属性值”)
移出 : 元素.removeAttribute(“属性名”)
参数是字符串，所以无需考虑js命名规则，html中的属性名是什么就写什么

1. 行内标准样式
2. 行内自定义属性
3. 行外属性
4. 点语法动态添加的属性

	// body内容
	<div id="box" class="one" www="sss" style="color: hotpink;background-color: yellow; width: 100px;" >我是div盒子</div>
	// js内容
	var box = document.getElementById("box");
	box.aaa = "bbb";

可以获取的 :

 // 可以获取行内标准属性
 console.log(box.getAttribute("id"));
 // 可以获取行内自定义属性
 console.log(box.getAttribute("www"));
 // 可以获取点语法动态添加的属性
 console.log(box.bbb);

无法获取的 :

 // 无法获取行内自定义属性
 console.log(box.www);   // undefined
 // 无法获取行外属性
 console.log(box.style.height);  // 空字符串
 // 无法获取行外元素
console.log(box.getAttribute("style.height"));   // null
 // 无法获取点语法动态添加的属性
 console.log(box.getAttribute("aaa"));  // null

特点 :

1.可以获取行内自定义属性
2.可以获取行内自定义属性(主要是用来操作行内自定义属性)
3.无法获取行外元素
4.无法获取点语法动态添加的属性

1.3 (查内容)

 // body内容		
 <div class="contain">
 	北京上海广州<span>深圳厦门</span>陕西西安
 	<p>台湾香港澳门</p>
 </div>
 	<button οnclick="myFunction()">我是按钮</button>

1.3.1 innerText

 console.log("innerText的内容是:",container.innerText);

作用 : 获取元素文本，包含子元素的文本，但是innerText不是w3c的标准语法，而是微软自己的语法
缺点 : 无法识别标签，不会把所有的内容都设置成元素的本文

1.3.2 textContent

 console.log("textContent的内容是:",container.textContent);

作用 : 作用域innerText完全一致，只是浏览器的兼容性不同，但是w3c的标准语法，IE8及以前版本不支持
缺点 : 无法识别标签，会把所有的内容都设置成元素的文本

1.3.3 innerHTML

 console.log("innerHTML的内容是:",container.innerHTML);

作用 : 获取元素文本
缺点 : 可以识别内容的标签，并进行解析

innerText 和innerHTML的区别 :

 box.innerText = "<a>我是一个a标签</a><p>我是一个p标签</p>"
 box.innerHTML = "<a>我是一个a标签</a><p>我是一个p标签</p>"

innerText : 无法识别标签, 会把所有的内容都设置成元素的文本
innerHTML : 可以识别内容中的标签, 并进行解析