LearnDevOps

jsdom基础学习

浏览器对象

0. window

1. navigator

document.write('<p>浏览器名称:',navigator.appName,'</p>')
document.write('<p>浏览器次名称:',navigator.appCodeName,'</p>')
document.write('<p>浏览器版本和系统平台:',navigator.appVersion,'</p>')
document.write('<p>浏览器次要版本:',navigator.appMinorVersion,'</p>')
document.write('<p>浏览器语言:',navigator.browserLanguage,'</p>')
document.write('<p>浏览器系统的 CPU 等级:',navigator.cpuClassd,'</p>')
document.write('<p>浏览器否处于脱机模式:',navigator.onLine,'</p>')
document.write('<p>运行浏览器的操作系统和（或）硬件平台:',navigator.platform,'</p>')
document.write('<p>浏览器用于 HTTP 请求的用户代理头的值:',navigator.userAgent,'</p>')

2. Screen

3. History

4. Location

html dom 对象

node type

节点类型 数值常量 字符常量
Element元素节点 1 ELEMENT_NODE
Attr属性节点 2 ATTRIBUTE_NODE
Text文本节点 3 TEXT_NODE
Comment注释节点 8 COMMENT_NODE
Document文档节点 9 DOCUMENT_NODE
DocumentType文档类型节点 10 DOCUMENT_TYPE_NODE
DocumentFragment文档片段节点 11 DOCUMENT_FRAGMENT_NODE

节点的nodeName and nodeValue

节点类型 nodename nodevalue
Element元素节点 元素的标签名 （DIV) null
Attr属性节点 属性名(id) 属性值
Text文本节点 #Text 节点所包含的文本（包含空白换行)
Comment注释节点 #comment 注释内容
DocumentType文档类型节点 docutype的名称 null
DocumentFragment文档片段节点 #documentfragment null

1. document选择器

### 属性
    // 属性
    var title = document.title
    var domain = document.domain
    var url = document.URL
    var referrer = document.referrer
    var cookie = document.cookie
    var lastmodified = document.lastModified
    console.log('title: ',title)
    console.log('domain: ',domain)
    console.log('url: ',url)
    console.log('referrer: ',referrer)
    console.log('cookie: ',cookie)
    console.log('lastmodified: ',lastmodified)

### 对象方法
    // NodeList 对象代表一个有顺序的节点列表,可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)
    var getid = document.getElementById('login') //id
    var getname = document.getElementsByName('input-text') //name属性
    var gettagname = document.getElementsByTagName('p') //html标签
    var classname = document.getElementsByClassName('search-box') //class属性

    console.log('id:  ',getid.innerText)
    console.log('name :',getname[0].innerText)
    console.log('tagname :',gettagname[2].innerText)
    console.log('classname: ',classname[0].innerText)

2. 小例子

点击＋1

<div>
    <p id='num'>1</p>
    <input type="button" value='+1' onclick='AddNum();'>
</div>

<script>
function AddNum(){
    var p = document.getElementsByTagName('p')
    var num = p[0].innerText
    var num = parseInt(num) + 1
    p[0].innerText = num
}
</script>

搜索提示框

   <!-- 搜索框 -->
<div class='search-box'>
    <form action="">
        <input id='input-text' type="text" value='请输入关键词' onFocus='CleanText();' onblur='Retext();'/>
        <!-- <input class='input-submit' type="submit"> -->
    </form>
</div>
<script>
function CleanText(){
    var text = document.getElementById('input-text');
    if(text.value.trim() =='请输入关键词'){
        text.value = '';

    }
}

function Retext(){
    var text = document.getElementById('input-text');
    if(!value.trim()){
        text.value = '请输入关键词';
    }
}
</scirpt>

滚动title

<script>
    var title = document.title;
    console.log(title.charAt(0));

    function Rolling(){
        var title = document.title;
        var first = title.charAt(0);
        var end = title.substring(1,title.lenth);
        var newTitle = end + first;
        document.title = newTitle;
    }
    myInterval = setInterval("Rolling()",500)
</script>

滚动内容

<div>
    <h1>h1标签 滚动测试</h1>
</div>

<script>
function Rolling(){
    var content = document.getElementsByTagName('h1');
    var text =  content[0].innerText
    var first = text.charAt(0);
    var end = text.substring(1,text.lenth);
    var newContent = end + first;
    content[0].innerText = newContent;
}
MyInterval = setInterval('Rolling();',500)
</script>

Published

Category

前端

Tags