WebAPI知识点整合中
属性操作
非表单元素的属性
href、title、id、src、className
var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);
var pic = document.getElementById('pic');
console.log(pic.src);
- innerHTML和innerText
- 设置标签中的文本内容.使用textContent, ie8不支持
- 设置标签中的文本内容.使用innerText, 都支持
- 获取标签中的文本内容. 使用textConent , ie8返回的是undefined
- 获取标签中的文本内容. 使用innerText, 返回对应的文本内容
var box = document.getElementById('box');
box.innerHTML = '我是文本<p>我会生成为标签</p>';
console.log(box.innerHTML);
box.innerText = '我是文本<p>我不会生成为标签</p>';
console.log(box.innerText);
- innerHTML和innerText的区别
- innerText 设置/获取文本内容 只能获取里面的文本内容
- innerHTML 设置/获取文本内容 可以解析标签 获取里面所有的内容
- innerText的兼容性处理
封装获取/设置兼容代码的函数
//设置任意的标签中的任意文本内容
function setInnerText(element, text) {
//判断是否支持这个属性
if(typeof element.textContent == "undefined"){
console.log(element.textContent+"====");
//说明不支持
element.innerText = text;
}else{
console.log(element.textContent);
element.textContent = text;
}
}
//封装 获取任意标签中的文本内容. 需要返回值
function getInnerText(element){
if(element.textContent == undefined){
return element.innerText;
}else{
return element.textContent;
}
}
表单元素属性
- value 用于大部分表单元素的内容获取(option除外)
- type 可以获取input标签的类型(输入框或复选框等)
- disabled 禁用属性
- checked 复选框选中属性
- selected 下拉菜单选中属性
自定义属性操作
* 本身html标签没有这个属性, 是我们自己加的--->自定义属性/目的: 储存数据
* 获取自定义属性对应的值 getAttribute("自定义属性的名");
* 设置自定义属性 setAttribute("属性名", "属性值");
* 移除自定义属性 removeAttribute("属性的名字") 可以移除自带的属性
- 与element.属性的区别: 上述三个方法用于获取任意的行内属性。
节点操作
* 文档: document
* 元素: 页面中的所有的标签 element
* 节点: 页面中所有的内容(标签, 属性, 文本[文字, 换行, 空格])
* 根节点: html
*
* 节点的属性
* nodeType : 节点的类型 : 1--->标签节点 2-->属性节点 , 3-->文本节点
* nodeName: 节点的名字: 1.大写的标签名字-->标签节点 2.小写的属性名字-->属性节点 3.#text-->文本节点
* nodeValue: 节点的值: 1.null-->标签节点 2. 属性值-->属性节点 3.文本内容-->文本节点
var box = my$("box");
console.log(box.nodeType);
console.log(box.nodeName);
console.log(box.nodeValue);
节点层级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box" class="box">
<p></p>
<span></span>
<input type="text">
<a href=""></a>
<ul id="uu">
<li>这是第1个li</li>
<li>这是第2个li</li>
<li id="three">这是第3个li</li>
<li>这是第4个li</li>
</ul>
</div>
<script src="common.js"></script>
<script>
var box = my$("box");
console.log(box.childNodes);//子节点 返回是伪数组
console.log(box.children);//子元素 返回是伪数组
console.log(box.parentNode);//父节点 js对象
console.log(box.parentElement);//父元素 js对象
console.log("========================================");
console.log(my$("uu").firstChild);//第一个子节点 ----->在ie8中获取的第一个子元素
console.log(my$("uu").firstElementChild);//第一个子元素 ---->在ie8中是undefined 说明不支持
console.log(my$("uu").lastChild);//最后一个子节点 ---->在ie8中获取的最后一个子元素
console.log(my$("uu").lastElementChild);//最后一个子元素 ---->在ie8中是undefined 说明不支持
console.log("==========================================");
console.log(my$("three").previousSibling);//获取前一个兄弟节点 --->在ie8中获取的是元素
console.log(my$("three").previousElementSibling);//获取前一个兄弟元素 --->ie8不支持
console.log(my$("three").nextSibling);//获取后一个兄弟节点 ---->在ie8中获取的是元素
console.log(my$("three").nextElementSibling);//获取后一个兄弟元素 --> --->ie8不支持
</script>
</body>
</html>
- 总结: 凡是获取节点和元素的代码在谷歌和火狐中, 都能支持
-
在ie8中, 获取第一个子节点和最后一个子节点 , 和兄弟节点 返回的都是元素
-
在ie8中, 获取第一个子元素和最后一个子元素 , 和兄弟元素 返回的都是undefined