WebAPI知识点整合中

最新推荐文章于 2022-09-08 21:30:08 发布

Cc.＇沐艿伊℡

最新推荐文章于 2022-09-08 21:30:08 发布

阅读量105

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_44899153/article/details/91904274

版权

web 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

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

Cc.＇沐艿伊℡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebAPI知识点整合中

WebAPI知识点整合中属性操作非表单元素的属性href、title、id、src、classNamevar link = document.getElementById('link');console.log(link.href);console.log(link.title);var pic = document.getElementById('pic');console.l...
复制链接

扫一扫